Onsubmit doesn't work in Chrome - javascript

I have two forms and a button. Everything works fine in Firefox. I get a new window, with a Paypal payment, and in the window where everything happened i get the send_mail form submitted that will send an e-mail to the user. How can I make this work in Chrome? Why it's not working? I've tried anything (or so I think)!
So:
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post" onsubmit="$('#send_mail').submit();">
...
</form>
<form name="send_mail" id="send_mail" action="" method="post">
...
</form>
<a onclick="$('#registerForm').submit()">Go to paypal and send confirmation mail</a>

Unless you have a really good reason to use a javascript-only submit, why set up the form to be unusable if there is a javascript error?
Use a standard form input of type submit, give it an id, alter the look or text of the submit via javascript as necessary, and create onclick & onsubmit events as a layer on top of that functionality and have them return false. Better fallbacks.
I'm not sure why you're trying to submit two forms at once, but how about this alternative (note that I haven't tested this code, but it should convey the idea):
<script type='text/javascript'>
$('#fallback-register-submit').hide(); // Hide the submit button.
$('#registration-link').show().click(function (){ // Show the link and attach the action.
$('#registerForm').submit();
return false; // Don't bother following the link anchor.
});
</script>
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post""><!-- Single form that does all of the submitting. -->
...
...
<input type='submit' id='fallback-register-submit'>Register</input><!-- In the event of a javascript error for their browser, they can still buy your stuff! -->
<a id='registration-submit' style='display:none'>Go to paypal and send confirmation mail</a>
</form>

why not just bind both submits to your a?
onclick="$('#send_mail').submit(); $('#registerForm').submit();"
if you want the other form to submit AFTER the first one:
onclick="$('#send_mail').submit( function() {$('#registerForm').submit();}); "
assuming you're using jquery here

As far as i understand, you want to submit the form using a link?
Why not use "plain" javascript then? Without jQuery: document.getElementById(....).submit()
Or link the submit event to the link in a normal jQuery way:
$(document).ready(function() {
$(".yourLinkClass").click(function() { // or "#yourLinkId" for that matter
$("#registerForm").submit();
});
});
And you also could use the submit button ;)

Related

jQuery submits only one form when multiple forms are submitted

I am writing a chrome extension. In my content script I am injecting two forms into the DOM with target = "_blank". The forms are visible on the page
Form 1
<form action="page1.php" target="_blank" id="form1" method="POST">
<input type="submit" value="Save" id="savebutton1">
</form>
Form 2
<form action="page2.php" target="_blank" id="form2" method="POST">
<input type="submit" value="Save" id="savebutton2">
</form>
I want to submit the two forms using jQuery so I wrote ;
$( "#form1" ).submit();
$( "#form2" ).submit();
But finally only one tab opens, that is only the last form submits and my first form is ignored. But I want to open two tabs
I can not only see page2.php in one tab. My page1.php is never called. Please help in fixing the issue
This is not possible.
The browser can only submit one form and handle whatever redirect that single form generates at server.
If you need multiple forms to submit you would need a different approach such as using ajax
As #charlietfl said, this can't be done as you are trying to do it.
However, depending upon your back end system, you may be able to make a composite form and parse the data there. C#, I know, can handle this.
<input name="form1.xxx">
<input name="form2.xxx">
Then, in C# you could create your object
class Form1 {
xxx: string
}
class Form2 {
xxx: string
}
class Combined {
form1: Form1,
form2: Form2
}
Access it with: Combined.form1.xxx

Form Not Validating when Using Anchor to Submit

I'm trying to submit a form using an anchor tag. However, the validation function doesn't seem to get triggered. I've since replaced the anchor with a submit button and it now works. Still, I'm curious why the previous anchor link didn't work.
The code is
function validate() {
/* validation code here */
return status;
}
<form id="myForm" action="/response_page.php" onsubmit="return validate();" method="POST">
<!-- form elements here -->
Submit
</form>
With this code, clicking the link goes straight to *response_page.php*. But when replaced with a submit button
<input type="submit" value="submit" />
WITHOUT changing the validate function and form tag, the validate function is called correctly. What's wrong with the anchor?
Thanks
This is expected behavior.
From the MDN on the submit function :
The form's onsubmit event handler (for example, onsubmit="return
false;") will not be triggered when invoking this method from
Gecko-based applications. In general, it is not guaranteed to be
invoked by HTML user agents.
If you want to validate your code in your link, just call the validate function explicitely :
<a id=subbut href="#" class="submit_button">Submit</a>
...
document.getElementById('subbut').addEventListener('click', function(){
if (validate()) document.getElementById('myForm').submit();
});

Form fields value get reset without page load

Following is my code in which i am trying to accomplish, when user clicks on the submit button then my javascript function sets all the value to null in the textfields of the form whose id='contact_form' without loading the page . Kindly let me know how can i modify the following code to accomplish the functionality i've been trying to do.
Thanks!!
<script type='text/javascript'>
$(document).ready(function(){
$('#love').click(function(e) {
document.contact_form.name.value = '';
alert('aloha!!');
//stop the form from being submitted (not working fine)
e.preventDefault();
}
}
</script>
<form name='abc' action='' id='abc' >
<input type="submit" id='love' />
</form>
I have also tried the following function it worked fine but its not preventing from the page load
<script type='text/javascript'>
function js(){
document.contact_form.name.value = '';
//stop the form from being submitted (NOT WORKING!!)
preventDefault();
}
}
</script>
If you try onsubmit="return false;" in the form tag your form will not be submitted. Unfortunately it will NEVER be submit. Unless you are not planning to submit it via AJAX you have to modify your onsubmit event like this:
<form onsubmit="return callFunction()">
function callFunction() {
if(condition)
return true;
else
return false;
}
$("#abc").submit( function() {
// do everything you want.
return false; //will prevent the reload.
});
To have a function execute when the form submits you have to do something like this;
<form onsubmit="return validate();">
your form here
</form>
Then you can have your check in a function called 'validate()' (or whatever you want to call it)
Make sure the validate() function returns true is the form is allowed to submit, or returns false if the page is not allowed to submit.
Also put id's and names on your input elements, that way you can access them much easier.
Assuming you have an HTML like this :
<form>
<input type="text" id="text" />
<input type="submit" id='submit' value="clear above field without reloading" />
</form>
And you want the text field value to clear when a user submits without reloading using jQuery, then following script will be your remedy :
$(function(){
$('#submit').click(function(){
$('#text').value('');
})
});
A form can be submitted in many ways, not only by clicking on a submit buttons. You should really watch for submit events, and cancel them with preventDefault (instead of click events that might trigger the submit). See #user1359163's answer.
But you problem seem to be document.contact_form.name.value. There is no property contact_form on the document object, so this will raise an error. The preventDefault is not executed, your form gets submitted and you never see the error. Set your debugger to "Stop on errors"!
You might want something like document.forms["contact"], but I don't know your HTML. An id selector for the input element would be the better choice.

How can I use Javascript to disable a button after submitting a form in Chrome?

I have a web form for which I want to prevent multiple submissions. In production, this is accomplished by the submit button having an onclick="this.disabled=true" attribute. This way, if the form is submitted and then the user goes back (presumably to "edit" the data, which our users seemed to want to do from time to time), the submit button remains disabled.
This works fine in Firefox, Safari, and Internet Explorer. In Chrome, however, the disable seems to fire before the form submission, thus preventing it from happening. In order to work around this, I changed the button's onclick action to:
this.disabled=true; $('myform').submit()
This results in the form being submitted, but when I use Chrome's back button to return to the form page, the button is no longer disabled. Values I entered into the form before submitting remain, so my guess is that Chrome must be selectively reloading the DOM.
Is there any way to accomplish what I want with Javascript in Chrome? There are other ways to solve this problem, of course, but disabling the button has a highly attractive simplicity to it.
I've tested in Chrome 12.0.742.100 in Linux, and 12.0.742.112 in MacOS X.
I prefer this
http://jsfiddle.net/mplungjan/sCgZ9/
Script:
$("form").submit(function() {
$("#subbut").hide();
$("#submitted").show();
});
CSS:
#submitted { display:none }
HTML:
<form action="http://www.google.com/" target="_blank">
<input type="submit" id="subbut" /><span id="submitted">Form submitted</span>
</form>
You can set a cookie if you want to decide to show or not show the button
Consider instead using the form's submit to disable the button.
In any case, you sould be dealing with this at the server, there are other ways to submit a form without using the submit button. Disabling the button will not prevent the user from re-submitting the form.
Using javascript
<form name ="myform" method="POST" action="youractionhere" onSubmit="document.getElementById('submit').disabled=true;">
<input type="submit" name="submit" value="Submit" id="Submit">
</form>
Using jQuery
$("form").each(function() {
$(this).find("button:submit").click(function() {
if($('input[type="submit"]').hasClass("disabled"))
return false;
$('input[type="submit"]').addClass("disabled");
return true;
});
});
I use to do this
html
<form action="/" method="post">
<button type="button" class="submit-form" >Save</button>
</form>
javascript
var button = document.querySelector('.submit-form')
button.addEventListener("click", function(){
this.setAttribute('disabled',true);
var form = this.closest('form')
form.submit();
},false);
jquery
$(document).on("click",".submit-form",function(){
$(this).attr('disabled',true);
$form = $(this).closest('form');
$form.submit();
});

Clicking submit button of an HTML form by a Javascript code

I don't know much about WEB probramming, so feel free to ask if I'm missing any details.
There is a certain website which I'm visiting very frequently, and it requires users to log in every time they visit. For the login page of this website, I'm trying to write down a userscript which will automatically log me in.
I managed to fill in the form fields, but don't have any idea how to click the submit button by JavaScript. The below is a condensed version of the original login code. How can I automatically click this submit button in this code?
<div id="start">
<div id="header">
<div id="login">
<form id="loginForm" name="loginForm" method="post" action="#">
// ...
<input type="submit" id="loginSubmit" onclick="changeAction('submitInput','loginForm');document.forms['loginForm'].submit();" value="Log in" />
// ...
</form>
</div>
</div>
</div>
The usual way to submit a form in general is to call submit() on the form itself, as described in krtek's answer.
However, if you need to actually click a submit button for some reason (your code depends on the submit button's name/value being posted or something), you can click on the submit button itself like this:
document.getElementById('loginSubmit').click();
document.getElementById('loginSubmit').submit();
or, use the same code as the onclick handler:
changeAction('submitInput','loginForm');
document.forms['loginForm'].submit();
(Though that onclick handler is kind of stupidly-written: document.forms['loginForm'] could be replaced with this.)
You can do :
document.forms["loginForm"].submit()
But this won't call the onclick action of your button, so you will need to call it by hand.
Be aware that you must use the name of your form and not the id to access it.

Categories