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...
Related
Why isn't alert('hi') working at all when submit button is clicked?
evt.preventDefault(); & evt.stopPropagation(); is to prevent the form from trying to open another window. However even when I remove these lines my function still isn't called...
'use strict';
function handleSubmission(evt) {
evt.preventDefault();
evt.stopPropagation();
alert('hi');
}
var form = document.querySelector('#formID');
form.addEventListener('submit', handleSubmission);
<!DOCTYPE html>
<html lang="en-US">
<body>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
</body>
</html>
Not getting any errors in the console.
EDIT: To add to the confusion even more. The snippet above doesn't work on Stack Overflow or in my local (chrome) browser. However, on jsfiddle the alert fires just fine... https://jsfiddle.net/jpazrjt4/1/
Below is a SO snippet that provides a means to accomplish this with pure Javascript, but it will not behave correctly as when you click Run Code Snippet.
I would like to address your concern about it not working in SO Snippet. SO snippet does not allow for form submission in the their iframe sandbox. If you run the SO snippet while in Chrome and then open up developer tools (Ctrl+Shift+I), you will see in the console log entry
Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.
Jsfiddle does not restrict the allow-forms permission for their constructed iframes. Here is the JSFiddle link so you can test it out: jsFiddle:jsFormIntercept
(function() {
"use strict";
window.addEventListener("load", function() {
document.getElementById("formID").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
alert('hi');
}, false);
}, false);
}());
<!DOCTYPE html>
<html lang="en-US">
<body>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
</body>
</html>
you simply need to write the below code as evt.preventDefault() & evt.stopPropagation() both have different functioning
'use strict';
function handleSubmission(evt) {
evt.preventDefault();
alert('hi');
}
e.preventDefault and e.stopPropagation are jQuery functions and r valid only when using the jquery libs.
I cannot seem to find a vanila JavaScript way to acheive that so you will have to use jquery for now
JS as:
function handleSubmission(evt) {
evt.preventDefault();
evt.stopPropogation();
alert('hi');
}
var form = document.querySelector('#formID');
form.addEventListener('submit', handleSubmission);
and HTML as:
<!DOCTYPE html>
<html lang="en-US">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
</body>
</html
Passed the test
Actually when clicked the button will display a an alert say HI and that submit will not go anywhere because of event.preventDefault()
cool change you code to this and please call jquery before this because stoppropogation is a part of jquery library
May be this will not work here but please check it on your side on codepen etc. it is working
check here:-
http://codepen.io/ermayankrajput/pen/VPXKdN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
<script>
'use strict';
var form = document.getElementById('formID');
form.addEventListener('submit',function(evt){
evt.preventDefault();
evt.stopPropagation();
alert('hi');
});
</script>
I've a project where I scan a QR code, and it will then automatically print out information based on which code was scanned.
I have the scanner, and a printer. Each QR code is to correspond to a URL. I can get the scanner to fill an input field, and I can get an alert to show the information that was scanned. However, whenever I try to assign the URL it simply appends the information to the current URL, instead of replacing it.
I need it to replace the current URL. Does anyone know why it is doing this, and how to fix it?
<html>
<head><title>QR Printing</title></head>
<body onload="document.myform.mytextfield.focus();">
<form name="myform">
<input type="text" name="mytextfield" onchange="checkForm()">
</form>
<script type="text/javascript" language="JavaScript">
function checkForm() {
var field1 = document.forms['myform'].elements['mytextfield'].value;
alert(field1);
window.location.assign(field1);
}
</script>
</body>
</html>
Looks like the form is submitting. Cancel it.
<form name="myform" onsubmit="return false">
You want:
window.location = field1;
add return false; after window.location.assign(field1);
<html>
<head><title>QR Printing</title></head>
<body onload="document.myform.mytextfield.focus();">
<form name="myform">
<input type="text" name="mytextfield" onchange="checkForm()">
</form>
<script type="text/javascript" language="JavaScript">
function checkForm() {
var field1 = document.forms['myform'].elements['mytextfield'].value;
alert(field1);
window.location.assign(field1);
return false;
}
</script>
</body>
</html>
Neither of the solutions worked for me in chrome browser.
I have resolved this using:
setTimeout(function () { document.location.href = YourUrlLink }, 500);
Hope this helps who are seeking a solution for chrome browser issue.
I have a textarea and I want its text to have the focus and selected-all when the page is loaded. This is my code, but it is not working. Any ideas?
<body onload="document.formIn.originalScript.select();document.formIn.originalScript.focus();">
<form action="servlet" method="POST" name="formIn">
<textarea name="originalScript" cols="52" rows="30">This is my text</textarea>
Thanks
FIXED: See my answer below. Works on the server.
try paste this in the end of body tag:
<script type="text/javascript" language="javascript">
onLoad();
function onLoad() {
document.getElementsByName('originalScript')[0].select();
}
</script>
Once I upload the code on the original question to the server, it works. It is only locally where I get these issues.
I create this tiny JS so i can control the form submit with jQuery
$('#submit').click(function() {
$('#addForm').submit();
});
Can I use a simple href link for it?
Something like
link
I tried
link
but it didn't work (it by pass the other jQuery in the page)
If you want the JS that you created to control the submit, don't have a href value in your link:
<a id="submit">link</a>
You cannot submit your form that way with a link and some javaScript, even jQuery. You have to use an XHR call to submit your query AND not refresh the page. (you can submit your form with a link as presented by Dan, but I understand that you want to do more than just that from your questions)
The reason being that the "return false" statement will impact the link action, and not the form submission itself.
In any case, I would advise you to not use a link to submit your form at all.
You can easily submit a form with the normal submit button and a bit of jQuery. That way, you provide a nice fallback to your users that have not enabled javaScript.
You can even submit the form with some client side validation, using the following HTML / javaScript:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#addForm').submit(function(){
validate();
ajax_submit_function_taking_form_data_as_argument($(this).serialize());
return false;
});
});
function validate(){
//Do some client side validation if required
}
function ajax_submit_function_taking_form_data_as_argument(theData){
$.ajax({
type: 'GET',
url: "http://search.google.com/",
data: theData,
error: function(e){
alert('error...');
},
success: function(data){
alert('success!');
}
});
}
</script>
<style type="text/css"></style>
</head>
<body>
<form id="addForm">
<input type="text" name="field1" value="" />
<input type="submit" value="submit" />
</form>
</body>
</html>
A last solution, albeit maybe too heavy weight for your use, would be to use the excellent jQuery form plugin from http://jquery.malsup.com/form/
I hope that helps!
You can attach to the click event with jquery. It's also cleaner not to put any javascript in your html.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#aSubmit').click(function(){
$('#form1').submit();
return false;
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<form id="form1" action="http://www.google.com/search" name=f>
<input name="q" />
</form>
submit
</body>
</html>
Never ever put JavaScript in the href attribute. If you must put in the HTML, use the onclick attribute, and remember to add return false. Also, never ever prefix script with javascript:.
Your first script block should do the job just as fine as well, though.
(And what does "it by pass the other jQuery in the page" mean?)
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"?