Okay, I am working on my final for a webpage design class. We can ONLY use HTML, CSS, and JAVASCRIPT. No AJAX or anything else.
I need a little help.
I have a text box. I want the user to be able to paste an (image) url into it, and it will automatically update an image on the page to the image url they pasted.
Is this possible?
Can I use OnChange in the textbox to update my image url? What do I put in each?
Here is my textbox
<input id="usrimg" onChange="??(What do I put here)??" type="text"/>
and here is the image source I want to change OnChange in the text input
imageObj.src = "??What goes here??";
I know it is a late answer but,
have you tried something like this?
I know it is not the best solution, but it is something...
<script language="JavaScript" type="text/javascript">
function show_prompt() {
var image_url = prompt("Please enter an image url","http://hasselt-graphix.be/images/HGX.png");
document.write("<!-- The rest of your html page --><img src=\"" + image_url + "\" width=\"400px\"><!-- The rest of your html page-->");
}
</script>
<form>
<input type="button" value="Change picture" onclick="show_prompt();" />
</form>
Hope it helps
<script language="JavaScript" type="text/javascript">
function changeUrl(el) {
var el = document.getElementById('inputid').value;
var im = document.getElementsByTagName(img);
im.src = el;
}
</script>
<input type="text" id="inputid" value="" onBlur="changeUrl(this.value)"/>
Related
I am a beginner in html code and created a clickable button however I am stumped how to make it clickable only after the form has been filled out. basic code I have so far is :
<a href="your landing page url">
<img src="your image url" />
</a>
what must I add to achieve what I am looking for?
If you are simply just wanting to use html and vanilla javascript to disable a button form then use the disable property.
<html>
<body>
<input type="text" onkeyup="inputFill(this)" />
<input type="submit" id="submitBtn" disabled />
</body>
<script>
function inputFill(inputData) {
var btn = document.getElementById('submitBtn');
if (inputData.value.length > 0) {
btn.disabled = false;
}
else {
btn.disabled = true;
}
}
</script>
</html>
This should give you a start on what to do
I want to display a validation message only when a user types something in the input field. I can't put required in the input box.
<input type="url" class="form-control" name="website_url">
The input data should be a valid website URL.
Can I do this without using Jquery or Javascript?
You can achieve this by javascript like this.
<!DOCTYPE html>
<html>
<body>
Enter your url: <input type="text" id="url" onfocusout="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("url");
var re = //use valid regex here;
if (!re.test(url)) {
alert("url error");
return false;
}
}
</script>
</body>
</html>
you have to use valid regex for url like this
but I prefer to do server side validation to in case javascript is off.
I need to write in html a field where a user will enter a url and a search button to search for the url that the user has entered
tenks
Try this code:
<script>
function loadSite(){
var site = document.getElementById("bar").value;
window.location = site;
}
</script>
<body>
<input type="text" id="bar">
<button onclick=loadSite()>GO</button>
</body>
http://torasbo.se/lumos/blog20.html contains a simple search form.
<form class="searchform" method="get">
<input type="text" id="s2" name="s" value="type and hit enter" onfocus="this.value=''" onblur="this.value='type and hit enter'"/>
</form>
If I enter - Benjamin - nothing is found and the file bar shows blog20.html?s=Benjamin.
If I alter the file bar to blog20.html?s=#Benjamin then the search is sucessful.
What do I have to change to accomplish this? I have spent 3 days searching and found nothing.
Looks like you have JQuery on your site. Add this in the header of you page after JQuery is called.
<script>
$(document).ready(function(){
$('.searchform').submit(function(e){
e.preventDefault();
var object = $(this).find('input');
window.location.hash = object.val();
object.blur();
});
});
</script>
It blocks the default action of the search form, and instead pushes the hash header to your page. Using a more complete search system would work better and make searches more flexible, but this is what you were evidently trying to do.
Paste this code in your file:
<script type="text/javascript">
$(document).ready(function(){
var submitClicked = false;
$(".searchform").submit(function(e){
if(submitClicked === false){
e.preventDefault();
var searchString = "#"+$("#s2").val();
submitClicked = true;
window.location = window.location.href+"?s="+searchString;
}
});
});
</script>
I have 3000 images in a folder. All named 1000.jpg 1001.jpg and so on.
From 1000 to 3000.
I would like to make a html file and to have a text box and when i input the number (ie, 1000) it will show me the file 1000.jpg.
Also when i would click the file it will hide this.
I need this to properly manage the warehouse and to have the pattern images on my mobile.
Thanks
maybe this can help you--
<input type="number" id="my-input">
See the Image
<Script>
$("#b").click(function() {
var s=$("#my-input").val()
$("#b").attr("href", s+".jpeg");
}
});
</script>
So, what it does is that it takes the value of "#my-input" and appends the value of href attribute to the filename.
You can have some thing like this.
document.getElementById("imageid").src= folderPath + document.getElementById("inputID").value + ".jpg";
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="imageName">
<input type="button" id="view" value="View"/>
<div id="imageDiv">
</div>
<script>
$("#view").on("click", function()
{
var image=$("#imageName").val();
$("#imageDiv").html("<img src='"+image+".jpg'></img>");
});
</script>
</body>
</html>
Assuming that this HTML and the images are in the same folder. If the images are in a different folder, change this line:
$("#imageDiv").html("<img src='"+image+".jpg'></img>");
For ex: if the images are in a folder called images:
$("#imageDiv").html("<img src='images/"+image+".jpg'></img>");