jQuery.serialize returns nothing (The Input elements DO have a name...)

Question

For some reason I can't get jQuery to serialize my form. performing a google search just pointed me to a bunch of similar questions where the O.P. forgot to give the inputs a "name". But that's not my issue, as my inputs DO have a name...

$('#time_clock_form').serialize();

returns nothing on this form

<form id="time_clock_form" method="POST"> <label for="id">Enter last four ligits of SSN</label> <input type="text" id="ssn" name="ssn" maxlength="4"> <input name="submit" value="Punch Timeclock" type="submit"> </form>

I've been ripping my hair out all morning. I even went as far as giving the inputs closing tags. (Obviously, that didn't work)

Here is where i am serializing the data

 // When the user types in their ssn, punch the timeclock $('#ssn').on('input', function(){ // When the user has input all 4 digits... if($(this).val().length === 4){ // Disable the input (only until the AJAX request completes...) $(this).prop('disabled', true); console.log($('#time_clock_form').serialize()); // Send the AJAX request to punch the time clock $.ajax({ url : 'AJAX_punchTimeClock.php', data : $('#time_clock_form').serialize(), success : function(Result){ // We can't use $(this) here because it would refer to the AJAX request, and not the input. Don't you just LOVE context errors? $('#ssn').prop('disabled', false); console.log(Result); }, error : function(XHR, textError, error){ } }); } })

Typo, missing id selector: $('time_clock_form') -> $('#time_clock_form') — Rory McCrossan
– Rory McCrossan, Commented Sep 5, 2016 at 16:23
Yes, that was a typo. In my actual code I am using the ID selector. I was actually just trying to edit my original question — Native Coder
– Native Coder, Commented Sep 5, 2016 at 16:24
In that case what you have should (and does: jsfiddle.net/hzcuv42e) work - assuming you serialize() the form at a point when all inputs have been given values — Rory McCrossan
– Rory McCrossan, Commented Sep 5, 2016 at 16:25
I updated the question with my serialize code. I've done this several times. I can't imaging why it's not working — Native Coder
– Native Coder, Commented Sep 5, 2016 at 16:27

Rory McCrossan · Accepted Answer · 2016-09-05 16:32:22Z

The issue is because you disable the input before you serialize it. serialize() doesn't work on disabled form elements. Change the order of those statements:

$('#ssn').on('input', function() { if ($(this).val().length === 4) { // serialize the form and store the output here console.log($('#time_clock_form').serialize()); // then disable the form... $(this).prop('disabled', true); // ajax... } });

Updated fiddle

Collectives™ on Stack Overflow

jQuery.serialize returns nothing (The Input elements DO have a name...)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related