I want to file load popup to appear after I use function loadFile(), because myInput is hidden.
//HTML
<div id ="hideWhiteSpace" style="display:none">
<input id="myInput" type="file"/>
</div>
Here is my javascript file example, onchange won't work cause i cant press the button.
//JS
function loadFile(){
document.getElementById('myInput').onchange = function (e){
//run code to load file into web.
}
}
Okay, I got it, just put this before onchange line:
document.getElementById('myInput').click();
I don't know if I should answer my own questions or delete the post if I got the answer.
Comment please.
Related
I want to build a html website_A where you can type some data and then open another website_B with a button click and this website_B would be changed according to the text we typed in the first website.
For example we have a website_B example.com with a
<h1 id="xxx">
We save the link in our website_A as a string, insert an input field and button with onClick function:
<input type="text" id="text_id" name="text_name"><br><br>
<input type="submit" value="Open Link!" onclick="openLink()">
<script>
var link = 'example.com';
function openLink() {
link.getElementById("xxx").innerHTML = document.getElementById("text_id").text;
window.open(link);
</script>
}
It should open the link with the changed h1.
Somehow it doesn't work, I don't know the javascript much, not even sure if I can achieve it with js or I have to use some othere languages. I googled a lot and didn't find anything, most information is about changing files locally or changing just the href link, not its elements.
I appreciate your help!
I have the following example files:
index.html
<body>
<input type="file" name="image" onchange="handleUpload()">
<script>
function handleUpload() {
window.location = 'aa.html';
}
</script>
</body>
aa.html
<body>
success
</body>
After file upload I'm redirected to another page.
When I hit browser back button I get Uncaught ReferenceError: handleUpload is not defined at HTMLInputElement.onchange.
Can someone explain why is this happening? I understand why handleUpload is triggered but why it's undefined?
Update
My app is more complex. I use webpack to bundle my js files into a single file then I reference it in layout before closing body tag.
What i'm trying to do is a image preview when input file is filled. Everything works great but if I hit back button after the form was submitted I get that error.
I manage to avoid this problem by removing onchange from html and added a event listener in one of js file. This approach has a delay on opening the select file window.
Here is your Answer
<input type="file" name="image" onchange="window.location='aa.html'">
I have the following code,
http://fiddle.jshell.net/hvLf8yua/
When I click on the image upload button using my mouse, it opens file dialog as expected. However, I couldn't trigger this using JQuery or JS. Could anyone tell me how I can achieve this? What I want is to open the file dialog box when such script is called.
Here is an exmaple snippet you can refer to:-
<script>
function openFile()
{
document.getElementById("dialog").click();
}
</script>
<body onload= "openFile()">
<input type="file" id="dialog" style="display:none">
</body>
I am trying to get the text within the input tags to display the status of the radio button. The code works fine except for the very first time (the onload event). When the page loads the first alert is displayed but not the second. Once I click on the other radio button (the unchecked one) and then back to the original one, I see both alerts. Can someone please help me with why this is happening? I am sure it is something stupid. Thanks
<script>
window.onload = autoSelect("rolls");
function autoSelect(theValue)
{
if(theValue=="rolls")
{
alert("hello world");
document.getElementById("theLabel").innerHTML=theValue;
alert("hello World");
}
else
{
document.getElementById("theLabel").innerHTML=theValue;
}
}
</script>
<div >
<form action="" >
<input type="radio" id="matRadioRolls" name="rollsOrSqFeet" value="rolls" onclick="autoSelect(this.value)" checked>Rolls<br/>
<input type="radio" id="matRadioSqFt" name="rollsOrSqFeet" value="sqfeet" onclick="autoSelect(this.value)" >Sq Ft<br/>
</form>
<label class="productsLabel" for=rolls" id="theLabel"></label>
<input type="text" name="rolls" id="rollsMat"></button>
</div>
You're actually executing your function call before the window object has fully loaded. You should change the call to this:
window.onload = function(){autoSelect("rolls");}
jsFiddle example
Oh, and a small side note. You have a typo in for=rolls" (missing a set of quotes).
Just guessing here: Depends on what browser you are using. there is a chance that the browser supresses the second alert (because you clicked don't show again)
Generally: Use console.log over alert. Use the Dev Tools.
I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?
I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>