I have a form with a structure as such:
<form id="myForm">
<div>
<input .....>
<input ......>
</div>
<div>
<input ....>
<input ....>
</div>
<input type="submit">
</form>
I need to do an confirm box when the form is submitted so i did this:
$('#myForm').submit(function(e){
e.preventDefault();
if(confirm('something here')){
$('myForm').submit();
}
});
As we all know, IE8 does not like divs in form and clearly the html is a little broken. This results in my jquery being broken!
How can I work around this?
Since you are using the submit event handler, if the confirmation is negative then you have to prevent the default action, it can be done via
It should be
$('#myForm').submit(function(e){
if(!confirm('something here')){
e.preventDefault();
}
});
Try this instead:
$('#myForm').submit(function(e){
e.preventDefault();
if(confirm('something here')){
this.submit();
}
});
Or you can simply use javascript, No need for doing extra effort on this
<form id="myForm" onsubmit="return confirm('Something Here');">
Related
Can anyone tell me what is going wrong with this code? I tried to submit a form with JavaScript, but an error ".submit is not a function" shown. See below for more details of the code:
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
I also tried this:
<script type="text/javascript">
function submitAction()
{
document.forms["frmProduct"].submit();
}
</script>
Both show me the same error :(
submit is not a function
means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.
When you name the button submit, you override the submit() function on the form.
Make sure that there is no another form with the same name and make sure that there is no name="submit" or id="submit" in the form.
If you have no opportunity to change name="submit" you can also submit form this way:
function submitForm(form) {
const submitFormFunction = Object.getPrototypeOf(form).submit;
submitFormFunction.call(form);
}
<form action="product.php" method="post" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
document.getElementById("submit_value").onclick = submitAction;
function submitAction()
{
document.getElementById("frmProduct").submit();
return false;
}
</script>
EDIT: I accidentally swapped the id's around
I had the same issue when i was creating a MVC application using with master pages.
Tried looking for element with 'submit' as names as mentioned above but it wasn't the case.
For my case it created multiple tags on my page so there were some issues referencing the correct form.
To work around this i'll let the button handle which form object to use:
onclick="return SubmitForm(this.form)"
and with the js:
function SubmitForm(frm) {
frm.submit();
}
form.submit() will not work if the form does not have a <button type="submit">submit</button>. form element belongs to HTMLFormElement interface, therefore, we can call from prototype directly, this method will always work for any form element.
HTMLFormElement.prototype.submit.call(form)
This topic has a lot of answers already, but the one that worked best (and simplest - one line!) for me was a modification of the comment made by Neil E. Pearson from Apr 21 2013:
If you're stuck with your submit button being #submit, you can get around it by stealing another form instance's submit() method.
My modification to his method, and what worked for me:
document.createElement('form').submit.call(document.getElementById(frmProduct));
I had same issue and resolved my issue just remove name="submit" from submit button.
<button name='submit' value='Submit Payment' ></button>
Change To
<button value='Submit Payment' ></button>
remove name attribute hope it will work
Sorry to answer late but for those who are still facing the same error. To get rid of this error:
<form method="POST">
<input type="text"/>
<input type="submit" id="submit-form" value="Submit Form" style="display: none;"/>
</form>
<!-- Other element that will submit the form -->
<button onclick="submitTheForm()">Submit the form</button>
<script>
function submitTheForm(){
document.getElementById("submit-form").click();
}
</script>
Explanation:
The javascript function submitTheForm() is accessing the submit input element and calling the click event on it which results in the form submission.
This solution is lifetime and almost 100% compatible in all browsers.
giving a form element a name of submit will simple shadow the submit property .
make sure you don't have a form element with the name submit and you should be able to access the submit function just fine .
In fact, the solution is very easy...
Original:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Solution:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
</form>
<!-- Place the button here -->
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Possible solutions -
1.Make sure that you don't have any other element with name/id as submit.
2.Try to call the function as onClick = "return submitAction();"
3.document.getElementById("form-name").submit();
You should use this code :
$(document).on("ready", function () {
document.frmProduct.submit();
});
What I used is
var enviar = document.getElementById("enviar");
enviar.type = "submit";
Just because everything else didn´t work.
Solution for me was to set the "form" attribute of button
<form id="form_id_name"><button name="btnSubmit" form="form_id_name" /></form>
or is js:
YOURFORMOBJ.getElementsByTagName("button")[0].setAttribute("form", "form_id_name");
YOURFORMOBJ.submit();
I faced this issues also but i made a quick fix using
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ input#submit
// ✅ Works
HTMLFormElement.prototype.submit.call(form);
}
form.addEventListener('submit', onSubmit);
Even though accessing the submit property on the form element points to the submit input element and not the method, we can still submit the form by accessing the submit property on the HTMLFormElement interface.
I was facing the same problem that my submit() wasn't working. In my case, I'd an id="submit" on the input tag having type="submit", I removed the id, and it started working.
You can try
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction(this)" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction(element)
{
element.form.submit();
}
</script>
Don't you have more than one form with the same name ?
Use getElementById:
document.getElementById ('frmProduct').submit ()
I'm used jquery.form plugin,
it's working and good
but when change input value.. it's submitted good! but redirect me to my uploader.php file, i don't want redirect me, i need to get result in div.result,
to understand me, please look to my code:
HTML
<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="uploader" value="" draggable="true">
<input name="submit" type="submit" class="submit" value="Upload">
<div class="result"></div>
</form>
uploader.php file:
<?php
if( isset($_POST['submit']) and $_SERVER['REQUEST_METHOD'] == "POST" ){
echo 'done!';
}
?>
jQuery code:
jQuery(document).ready(function() {
$('#uploader').change(function(){
$(".result").html('');
$(".result").html('wait..');
$("#uploader").ajaxForm({
target: '.result',
success: function()
{
$('.result').hide().slideDown('fast');
$('#uploader')[0].reset();
},
});
});
});
I need to echo 'done' in .result div, i don't want to redirect me to uploader.php page.
Is it actually doing anything when you change the input value? I mean is it submitting the form? Or does that only happen when you click the submit button?
It seems to me that your script doesn't really do anything. It listens for an onchange event on the form element, but that event, in my experience, is never fired on a <form>. So you just have an HTML form submitting with no aid of script.
On top of that I'm not sure you can submit a multipart/form-data form with script, for security reasons. Maybe I'm wrong about that, but either way, how about using an iframe instead?
<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data" target="resultframe">
<input id="file" type="file" name="uploader" value="" draggable="true">
<input name="submit" type="submit" class="submit" value="Upload">
<div class="result"><iframe name="resultframe" onload="$('.result').hide().slideDown('fast');"></iframe></div>
</form>
To be honest I don't know if an onload works on an iframe these days, I haven't tried it in years. Failing that, remove <div class="result"> and the corresponding </div> and put them into the output of uploader.php, along with the animation script.
Working with .ajaxSubmit({})
jQuery(document).ready(function() {
$('#file').change(function() {
$(".result").html('');
$(".result").html('wait..');
$("#uploader").ajaxSubmit({
target: '.result',
success: function()
{
$('.result').hide().slideDown('fast');
$('#uploader')[0].reset();
},
});
});
});
Thanks everybody.
As your form's action is uploader.php so,the page will be redirected to uploader.php after submitting. so you need change action and use ajax to update the div.result.
check these links once.
http://www.formget.com/form-submission-using-ajax-php-and-javascript/
http://blog.teamtreehouse.com/uploading-files-ajax
i want to only validate the form and don't want to submit it, so that i can use the form values in modifying other part of the same html page by calling a function "myfunction()" after form validation. for this i want to use a button suggest me required code.my code is following :-
<form name="form1">
<input type="text" name="name1" required></input>
<button onclick="myfunction()" ></button> // i want to validation of form by this button
</form>
You can try this by setting onsubmit event of form to return false; as follows:
<form name="form1" onsubmit="return false;">
<input type="text" name="name1" required></input>
<button onclick="myfunction();" ></button>
</form>
This will not submit the form on clicking the button but will execute myfunction() instead.
If you know jQuery, then you can do this as follows:
$('form[name="form1"]').submit(function (event) {
// This will prevent form being submitted.
event.preventDefault();
// Call your function.
myfunction();
});
For maintainability consider adding an event listener to the button by selection instead of inline. When the button is clicked an event object is passed to the callback. Event objects have a number of properties and methods. In this case you're looking for the method "preventDefault" which prevents the default action of the event which in this case is a form submit. An example:
<form name="form1">
<input type="text" name="name1" required />
<button id="my-button"></button>
</form>
document.getElementById('my-button').addEventListener('click', function(e){
e.preventDefault();
var form = document.forms['form1']; //or this.parentNode
//do stuff
}, false);
i have achived this goal by modifying code as follow:-
<form name="form1" onsubmit="myfunction();return false;">
<input type="text" name="name1" required></input>
<button >check form and call function</button>
</form>
by this i am able to check form and call my function and form is also not submitted in this case.
now i want to reset the form without clicking any button. suggest javascript code for this.
HTML form validation by input type button, not by submit.
Try this
<form name="form1" onsubmit="myfunction(); return false;">
<input type="text" name="name1" required></input>
<button type="submit">Submit</button>
</form>
For some reason, when the form button is clicked, the jQuery script I wrote isn't running, does anyone know why?
<body>
<form id="inputform" action="google.com">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>
</body>
$('#inputform').submit(function() {
window.location = "http://mysite.com/";
});
Yes, I imported the jQuery library and everything, I've sourced the external JS file, but I can't figure out why it still isn't working.
You need to prevent the default action from occuring. You can do that by using preventDefault action on the event e. Something like this:
$(function(){
$('#inputform').submit(function(e) {
e.preventDefault();
window.location = "http://mysite.com/";
});
});
Assuming your script is inside document ready, else you need to move the script inside `jQuery(function($){.....});
You need to prevent the default action of the submit button
$('#inputform').submit(function(e) {
window.location = "http://mysite.com/";
return false; // or call e.preventDefault();
});
Ideally you should not do a window.location call from inside a submit button. The data you entered in the Form's text input field wont be automatically posted to the action page if you do so.
<body>
<form id="inputform" action="http://mysite.com/">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>
I have a form which validates that an option is selected using a returned boolean from a function:
<form id="checkoutForm" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" name="paypal">
And I was submitting the form with this standard image button:
<input name="submit" type="image" src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" value="Checkout">
However I've been updating and am using a CSS button instead so submit the form as so:
Checkout with PayPal
I can just use the standard button like so:
<input name="submit" type="submit" class="shopbutton" value="Checkout">
But this causes me some other small issues and I'd like to know how to ensure the form validates using the other method?
TIA
Edit: I should also mention that when using the <a href type button that the button is declared outside of the <form> tags.
You are bypassing the onsubmit when directly submitting the form with javascript. This is one example why client-sided validation is bad.
One solution to your problem would be to append your a link like this:
Checkout with PayPal
And then just add some error count to the validation function, and submit within the function if no errors were found, like so:
function validateForm() {
var errors = 0;
if(inputFieldHere.value.length<3) errors++;
if(errors) return false; //Or display some error or something
else document.forms["checkoutForm"].submit();
}
Try this:
<!DOCTYPE html>
<html>
<head>
<title>element</title>
<script type="text/javascript">
function checkme() {
if (!document.form.agree.checked) {
missinginfo = "You must agree to the Terms and Conditions\n Please tick the box and try again.";
alert(missinginfo);
return false;
}
else {
alert("Text information");
return true;
}
}
function submit_form()
{
if(checkme() == true)
{
document.forms["form"].submit();
}
}
</script>
</head>
<body>
<form name="form" id="form" method="post" action="#" onSubmit="return checkme();">
<input type="checkbox" name="agree" id="agree" value="agree_terms" class="terms">
<label for="agree"> I´ve read terms and conditions and I´m ready to shop</label>
<input type="submit" name="btnSubmit" value="Submit" class="submit">
</form>
Submit form
</body>
</html>
I suggest keeping <input> button inside the form as hidden (e.g. with style="display:none;").
This way you may keep <a> to submit form with onclick, and keep validation in place (I wouldn't be surprised if validation code looks for some reason for <input type="submit" /> inside a form)