jquery submit function does not work

Question

I'm developing a webpage which creates a form with various select tags dynamically. Unfortenatley the jquery submit function passes incorrect information to the php file (form_submit.php) that must process this information; the (netbeans 7.4) debugger always shows default (not selected) values in $_POST within the php file instead of the selected values . The even stranger part: when I copy (in the code below) the console output with the serialised formdata straight into the following ajaxcode (see code), the php debugger shows the correct -selected values within the $_POST array..(?)

The resulting form is quite substantial. The only theoretical cause I can think of is that therefore the execution of 'var dataAjax = $( this ).serialize();' takes time and is not finished when the following ajax call starts...(??)

The code:

$("#myForm").submit(function(event){ event.preventDefault(); var dataAjax = $( this ).serialize(); //does not work, but when copying the string from the console in line below it does work. console.log('SUBMITTED FORM: '+ dataAjax ); //next line is only used as a test //var dataAjax = 'agreementapproval0=SolarX_10&selected_emeterproductid0=SolarX_10_1_1&selected_eproductid0=SolarX_10_2_4&selected_emeterproductid1=NOSELECTION&selected_emeterproductid2=NOSELECTION&selected_eproductid1=NOSELECTION&selected_eproductid2=NOSELECTION&form_token=30688e467ee88167805ad0f330809d74'; $.ajax({ type: "POST", url: "form_submit.php", data: dataAjax, dataType: "json", async: true, success: function(msg){ if(msg.statusgeneral == 'success'){ } else { }//else }, //succes: function error: function(){ $("#errorbox").html("There was an error submitting the form. Please try again."); } });//.ajax //make sure the form doesn't post //return false; //depreciated //} //if(form.valid() });//$("#myForm").submit() <form id="myForm" name="myForm" action="" method="post"> <div id="wrapper"></div> <!--anchor point for adding set of product form fields --> <input type="hidden" name="form_token" value="<?php echo $form_token; ?>" /> <input type="submit" name="submitForm" value="Confirm"> </form>

First, move event.preventDefault(); to the first line of the event handler. this prevents the form from submitting even if an error occurs. Next, check the console for errors (after making the change) — user400654
– user400654, Commented Nov 20, 2013 at 22:15
You might have an issue where the .serialize method returns a URL-encoded string, meaning that space would be %20, and so on. Maybe your php code, or something in between, does not like this. reference — Automatico
– Automatico, Commented Nov 20, 2013 at 22:19
@Kevin B: thnx, just did that, but no change and no errors in the console. The console does give a warning 'event.returnValue is deprecated. Please use the standard event.preventDefault() instead.' — Joppo
– Joppo, Commented Nov 20, 2013 at 22:19
@Cort3z PHP automatically decodes form data, it's required that it be URL-encoded. — Barmar
– Barmar, Commented Nov 20, 2013 at 22:21

mdolbin · Accepted Answer · 2013-11-20 22:18:52Z

1

It works fine http://jsfiddle.net/a9DN4/

You might have been trying to hook form before it have been created, try to wrap your code with

$( document ).ready(function() { // Handler for .ready() called. });

PS and move event.preventDefault(); to the 1st string of your function, as Kevin says.

answered Nov 20, 2013 at 22:18

mdolbin

9364 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Joppo Over a year ago

thnx. sorry, I didnt include the document-ready code on this page, but it is included in my original code. Also added Kevin B's suggestion but without effect.

Joppo Over a year ago

ps: perhaps a thick question: how do I see with your jsfiddle that's working? I start getting the impression the problem relates somehow to the Netbeans debugger...(?)

mdolbin Over a year ago

@user2543182 it sends content of the hidden field, you can check it with firebug or chrome console: i.imgur.com/LzCZWW2.png. I assume that your php is correct, so there will be actual token instead.

Joppo Over a year ago

@all: thnx for all your help(!) I just found the cause of the problem: My webpage includes some buttons to show and hide content (using jquery toggle(). Obviously every time I pressed that button the submit function is activated (didnt know that) as I just noticed with the console, and therefore the php file is called with still unselected values. Only took me 10hrs today to discover...

mdolbin Over a year ago

@user2543182 Don't worry, I had pretty same situation: 8 hours of watching exactly on the cause of my troubles and not a single guess about what's wrong with this code))

|

Collectives™ on Stack Overflow

jquery submit function does not work

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related