How to open this input file when opening the page? This way when I select it already does the submit, but how to make it open when starting the page?
<html>
<head>
<title>Basic Upload</title>
</head>
<body>
<script>
function submeter(){
document.formulario.submit();
}
</script>
<form method="POST" action="#" name="formulario" enctype="multipart/form-data">
<input id="up" type="file" onchange="submeter()" name="fileUpload" accept="image/*">
</form>
</body>
</html>
Outside of user-initiated events (such as click events, see: Event.isTrusted) you cannot programmatically open a file input. Therefore, you cannot open it on page load.
There is no workaround.
Related
I tried to open file dialog by 'oncontextmenu' event, but it didn't work! I can do this by other event, but only 'oncontextmenu' didn't work.
<html>
<head>
<script type="text/javascript">
function wrapper(ev)
{
ev.preventDefault();
document.getElementById('file').click();
return false;
}
</script>
</head>
<body>
<input id="button" type="button" oncontextmenu="wrapper(event)">
<input id="file" type="file">
</body>
</html>
I want to know solution or why it doesn't work.
Thanks for reading.
It doesn't work because some browsers disallow triggering file input programatically. See this question for numerous attempts of this with questionable success.
I have 2 HTML files like this.
parent.html
<form method='get' action=''>
<input type='hidden' name='something'>
<input type='button' name='submit' value='Submit' onclick='newwindow=window.open("child.html","popup","height=150,width=200");'>
</form>
child.html
Enter Something Here<br />
<input type='text' name='somethingelse'>
<input type='button' name='submit' value='OK'>
When the user clicks on Submit button in parent, a new popup window will show up and ask him to enter something.
Can anybody please tell me how can I transfer the value of input[somethingelse] from
child to input[something] and submit the form in parent after the user has clicked OK?
You can get a reference to the form in the parent window via window.opener.document, like this:
var form = window.opener.document.getElementById("theFormID");
(You'd give the form an ID, although there are other ways to do it.)
Then you can access the fields in that form, and of course set their .value property, and you can submit the form via its .submit() function.
But fair warning: Users don't like pop-ups. If there's any way you can just incorporate the other field into the form, I would recommend that instead.
Here's a full example: Live Copy | Source | Source of popup
The main page:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form id="theForm" action="" method="GET">
<input type="text" id="theField" name="theField">
<br><input type="submit" value="Send" onclick="window.open('/urawum/1','','height=400,width=400'); return false;">
</form>
</body>
</html>
The popup:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>Please fill in more information:</p>
<input type="text" id="thePopupField">
<br><input type="button" value="Send Form" onclick="doTheSubmit();">
<script>
function doTheSubmit() {
var doc = window.opener.document,
theForm = doc.getElementById("theForm"),
theField = doc.getElementById("theField");
theField.value = document.getElementById("thePopupField").value;
window.close();
theForm.submit();
}
</script>
</body>
</html>
If you run that, you find that when you click Send on the main page, it does the popup. If you fill in a value in the popup and click Send Form, the popup disappears and the form is submitted. You can tell the form is submitted with the value because I've used method="GET" and so you can see theField=yourValue in the query string in the URL of the resulting page. For instance, if you type "my value" into the popup, you'll see the URL http://jsbin.com/abiviq/1?theField=my+value in the main page after the form submit. (But your form presumably uses POST rather than GET, I'm just using GET to demonstrate.)
$('#popupformid').submit(function() {
var myVar = $('#somethingelseid').val();
$('input:text.something').val(myVar);
document.getElementById("formID").submit();
});
I am trying to run a Javascript redirection code on the Window Phone 7's in-app browser, but the redirection does not seem to occur at all.
Snippet:
<script type="text/javascript">
function sform() {
document.forms["frm"].submit();
}
</script>
</head>
<body onload="sform()">
<form action="https://payment-endpoint-url.com" method="POST" name="frm">
<input type="hidden" name="Ref_ID" value="***" />
<!--- some other data that varies depending on the transaction -->
</form>
</body>
I have tried every possible way to make a HTTP POST redirect using Javascript and have also tried a few IE-specific methods, but they do not work. Is there a workaround for this? Could it be a new security feature that disallows redirect?
This code seemed to work for me:
<html>
<head>
<script type="text/javascript">
function sform() {
document.getElementById("submit1").click();
}
</script>
</head>
<body onload="sform()">
<form action="https://payment-endpoint-url.com" method="POST">
<input type="hidden" name="Ref_ID" value="***" />
<input type="submit" value="Go" id="submit1" />
</form>
</body>
</html>
I have a form with only one file input and I want to auto submit the form every time when someone selects file. Now I use this code:
$(function(){
$("#fil1").change(function(){
$("#form1").submit();
});
});
but it works only for the first selection. When I select some other file the form is't submitted again! It seems the change function is called only for the first time! Can anyone help? I use jquery...
What version of jQuery are you using? I just tried the code below and it worked multiple times. Also wonder if it's your browser. I tried Chrome and IE 8.
<html>
<head>
<title>index.html</title>
<script type="text/javascript" src="js/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
alert('hit');
$(function(){
$("#fil1").change(function(){
$("#form1").submit();
});
});
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label for="fileField"></label>
<input type="file" name="fileField" id="fil1">
</form>
</body>
</html>
hope this helps...
Take a look at this html:
<head>
<title>Test page</title>
<script type="text/javascript">
function submitForm() {
document.getElementById("form2").submit();
}
</script>
</head>
<body>
<form id="form1" name="form1">
<input type="hidden" name="test1" value="test" />
<form id="form2" name="form2" action="http://google.com">
<input type="hidden" name="test2" value="nothing" />
</form>
</form>
Submit
</body>
Thing I want to do is submitting form2 located within form1 with a javascript. I want this to be done by submitForm() function. The problem is that it doesn't appear to work. I'm using FireFox for testing and always get an error which says that it's undefined. Does anybody know how I can get it working? Thanks in advance!
You can't nest HTML forms like that. End form1 before starting form2. Duplicate the hidden input if necessary.
Well, given that you have no element with the ID "xxx", I could see where your script might have some difficulty. Perhaps you mean "form2"?