Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery function BEFORE form submission

I am trying to fire a function using Jquery when the form submit button is clicked, but the function needs to fire BEFORE the form is actually submitted.

I am trying to copy some div tag attributes into hidden text fields upon submission, and then submit the form.

I have managed to get this to work using the mouseover function (when the submit button is hovered over), but this will not work on mobile devices using touch.

$("#create-card-process.design #submit").on("mouseover", function () {     var textStyleCSS = $("#cover-text").attr('style');     var textbackgroundCSS = $("#cover-text-wrapper").attr('style');     $("#cover_text_css").val(textStyleCSS);     $("#cover_text_background_css").val(textbackgroundCSS); }); 

I have played around with the submit function, but the values are not saved within the fields as the function fires when the form is submitted and not before.

Many thanks.

like image 330
Matt Price Avatar asked Feb 21 '14 15:02

Matt Price


People also ask

How do you call a function before submitting a form?

Here we are calling a validate() function before submitting a form data to the webserver. If validate() function returns true, the form will be submitted, otherwise it will not submit the data. The HTML code snippet.

How do you check form is submitted or not in jQuery?

$("#something-%"). submit(function(e) { e. preventDefault(); $("#some-span"). html(data); });

Does OnClick fire before submit?

Working example Just wondering... is it possible that the form will be submitted before the hidden field gets updated? Wouldn't it be wise to first prevent the submission, then change the hidden field, and first then submit it? When using a click() event on the button, yes it is.

How can we submit a form using jQuery?

jQuery submit() Method The submit event occurs when a form is submitted. This event can only be used on <form> elements. The submit() method triggers the submit event, or attaches a function to run when a submit event occurs.


2 Answers

You can use the onsubmit function.

If you return false the form won't get submitted. Read up about it here.

$('#myform').submit(function() {   // your code here }); 
like image 67
kartikluke Avatar answered Sep 20 '22 05:09

kartikluke


$('#myform').submit(function() {   // your code here }) 

The above is NOT working in Firefox. The form will just simply submit without running your code first. Also, similar issues are mentioned elsewhere... such as this question. The workaround will be

$('#myform').submit(function(event) {   event.preventDefault(); //this will prevent the default submit    // your code here (But not asynchronous code such as Ajax because it does not wait for a response and move to the next line.)     $(this).unbind('submit').submit(); // continue the submit unbind preventDefault }) 
like image 27
Syed Waqas Bukhary Avatar answered Sep 21 '22 05:09

Syed Waqas Bukhary