I am trying to use this post in order to get the animated gif for Please wait message.... on button click. However, when I open the sample html page that I am testing on, I get an input box instead of an button with am image.
Below is the html code that I am trying on a test page.
<html>
<script type="text/javascript">
function loadSubmit() {
var ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.visibility = “visible”;
setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
return true;
}
</script>
<body>
<p style="visibility:hidden;" id="progress">
<img id="progress_image" style="padding-left:5px;padding-top:5px;" src="ajax-loader.gif" alt=""> Uploading in progress… </p>
<input class="contSubmit" onclick="return loadSubmit()" type=”button” src= "submitinfo_btn.png" />
</body>
</html>
Be careful when copy-pasting Code like this.
This is wrong:
type=”button”
This is right:
type="button"
Notice the difference? This happens if you copy Code from a website that doesn't have proper formatting for Code enabled.
According to your tutorial, the input should be of type "image", not "button".
Change your input type to image. The src is only valid for image.
Also, it appears your problem has nothing to do with your "please wait" animated gif, so maybe your title is misleading.
Related
I want to make a form where when a user types into an input box, the input box changes the ending of the src of my image (which is an API image).
So the image code looks like this:
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" />
I need the input from the textbox to go after the data= and before the &size=100x100
I have tried a couple of ways of accomplishing this but haven't quite got it:
$(function() {
$('#linktextbox').onchange( function() {
window.location = document.getElementById('baseUrl').attr('href') + '/' + $('#linktextbox').val();
return false;
});
});
I have also tried:
var link = document.getElementById("baseUrl");
link.href = "http://api.qrserver.com/v1/create-qr-code/?data="+document.getElementById('linktextbox')+"&size=100x100"
Any help is appreciated!
You can do it like this.
Obviously you need an input and something to confirm the user action like the button I added.
edit: In order to not abuse the server that generates the image I have deliberately chosen not to use a keyUp event.
When you click the button the small piece of Javascript updates the src of the image tag.
I used IDs to identify the HTML elements, but there are a number of different ways to find a specific element.
function updateQR (){
document.getElementById('image').src = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(document.getElementById('textInput').value) + "&size=100x100";
}
<input id="textInput" type="text">
<br>
<button onclick="updateQR()">Update QR code</button>
<br>
<br>
<img id="image" src="" />
Here the code in plain JavaScript
function updateQr(ele){
document.getElementById("qr").src = "https://api.qrserver.com/v1/create-qr-code/?data="+encodeURIComponent(ele.value)+"&size=100x100/";
}
<input type="textbox" value="HelloWorld" onKeyUp="updateQr(this)"/><br/><br/>
<img id="qr" src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100/">
I need to enter-in a password (without typing on keyboard) by clicking on image(s) on my html page with onclick function or any other action. How can I do this? I tried the code below, which worked for plain text by didn't work for my password-type entry (as seen below). Can someone pls help me?
Here are my codes:
<form style=" margin-left:200px; font-weight:600">
<fieldset>
<legend>STEP II:</legend>
<input id="psx2" type="password">
<p id="psx3">all the way</p>
<p id="psx4">the ramp flies</p>
<script>
function myFunction()
{
x=document.getElementById("psx2"); // Find the element
x.innerHTML="12345"; // Change the content
x=document.getElementById("psx3"); // Find the element
x.innerHTML="Hello!"; // Change the content
x=document.getElementById("psx4"); // Find the element
x.innerHTML="Hey!"; // Change the content
}
</script>
<a href="#">
<img src="images/colourimages/red.jpg"
alt="red not"
onclick="myFunction()"
width="50"
height="50"
id="red" />
</a>
</fieldset>
</form>
This is the result:
you will notice that nothing showed on the password field. Please can someone help? I will appreciate it..
Form elements do not use .innerHTML to change the content you need to use .value
Use value for input elements like,
function myFunction()
{
x=document.getElementById("psx2"); // Input element
x.value="12345"; // Change the content
// innerHTMl is fine for p or div tags
.......
I've seen several ways to display image preview but none of them seem to work or they work only in FF/Chrome.
Trying to keep it simple:
Markup:
<input type="file" id="logo-upload" onchange="changePreview();"/>
<br/>
<img src='#Url.Image("logo.png")' alt="Preview" id="logo-preview"/>
Javascript:
<script type="text/javascript">
function changePreview() {
var input = $('#logo-upload').val();
$('#logo-preview').attr('src', input)
.width(150)
.height(50);
}
</script>
When debugging input shows the correct local image path but preview never shows up.
Why and how can I get this to work (in all browsers ) ?
Thanks.
Try setting the $('#logo-upload').change(function(){}) instead of using onChange. I think that's a good start. Then put the jQuery inside $(document).ready(function(){}). That could be another issue, if you're setting the script before the elements exist on the page.
If you can post more code, it would be beneficial.
Also, for IE, you're going to run into permissions issues that are on the user, which you don't have control over (at least in this situation). So, in those cases, you'll either have to upload the image first, to get the image from the server, OR they'll have to change their security settings to allow for this type of content to be accessed.
<input type="file" id="logo-upload" />
<br/>
<img src="#Url.Image('logo.png')" alt="Preview" id="logo-preview"/>
<script type="text/javascript">
$(document).ready(function() {
$('#logo-upload').change(function() {
var input = $(this).val();
$('#logo-preview').attr('src', input).width(150).height(50);
})
});
</script>
I have the following code, which works fine:
<input type="button" name="btnHello" value="Hello" onclick="Test();"/>
and here is the JS function:
function Test() {
window.location.href = "Page2.aspx";
}
When I click my Hello button, it redirects to Page2.aspx like expected. But when I change my button to an image button:
<input type="image" src="images/myimage.jpg" name="btnHello" onclick="Test();"/>
It no longer works. The page posts back, but its more like a refresh. I can put an alert in the JS function to see that it is getting called, but I'm not sure why the redirect doesn't work? Has anyone ever experienced this?
I know its probably something stupid, but I'm stumped.
Many thanks in advance!
You need to return false from the event handler to prevent the default action.
However, since you don't want it to postback in the first place, you might as well use an ordinary <img /> instead of an <input />.
The redirect is getting cancelled because you are doing a postback. Add return false; after the function test();
e.g
onclick="test();return false;"
Try using an img tag:
<img src="images/myimage.jpg" name="btnHello" onclick="Test();"/>
input type image does not have a onclick event. You need to use the img tag instead.
<img onclick="Test();">
Can an onsubmit event insert an image into the page before the page submits/transfers control to the next page?
I am using classic asp.
Of course. The function resolves before the form is submitted.
(Although… while an img element may be inserted into the page, it might not load before the browser has gone to the next one, and even if it does, the user might not have time to see it clearly)
Yes . You can insert the HTML code (through javascript):
<img src="imgsrc">
But it takes a little time for loading the image. The form send the user to another page in new window or in the same window? Why would you want to insert an image in the current window if the page will be replaced with the new one?
Yes you can do this. It would be easier (for me to write) if you used jquery:
html:
<form id="myForm" action="">
<input type="text" id="someId" />
<input type="submit" id="submit" value="submit" />
</form>
and then JavaScript would be:
$(document).ready(function() {
$("#myForm").submit(function() {
$(this).append('<img src="someImage.jpg" alt="" />');
});
});
http://jsfiddle.net/rYUbQ/
But like others have said it might not be loaded and displayed before the form submits so you might want to instead look in to preloading the image and then just setting it to visible before the page submits.