JQuery serialize how to eliminate empty fields

jqueryserialization

In this form users can add some info for Authors (music, lyric authors)

The users have the option to add 1 or more authors.

The problem is that when the user enters only 1 author all the other inputs remain empty, but the jQuery serialize function will put them anyway in the URL and the server gives me this error:

Request-URI Too Large

See the below example:

echo "<form action=\"\" id=\"submForm\" name=\"submForm\" method=\"get\">";
// AUTHOR NUMBER 1
echo "<p><span class=\"labelInput\">".(_t('_cR_name'))." </span><input id=\"nameAuthor\" name=\"author[0][name]\" value=\"\" type=\"text\" class=\"commonInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOB'))." </span><input id=\"DOBAuthor\" name=\"author[0][DOB]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOD'))." </span><input id=\"DODAuthor\" name=\"author[0][DOD]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
// AUTHOR NUMBER 2
echo "<p><span class=\"labelInput\">".(_t('_cR_name'))." </span><input id=\"nameAuthor\" name=\"author[1][name]\" value=\"\" type=\"text\" class=\"commonInput\"></p>";
echo "<p><span class=\"labelInput\">".(_t('_cR_DOB'))." </span><input id=\"DOBAuthor\" name=\"author[1][DOB]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOD'))." </span><input id=\"DODAuthor\" name=\"author[1][DOD]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; Death:
// AUTHOR NUMBER 3
echo "<p><span class=\"labelInput\">".(_t('_cR_name'))." </span><input id=\"nameAuthor\" name=\"author[2][name]\" value=\"\" type=\"text\" class=\"commonInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOB'))." </span><input id=\"DOBAuthor\" name=\"author[2][DOB]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOD'))." </span><input id=\"DODAuthor\" name=\"author[2][DOD]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
echo "</form>";

And this is the jQuery code (it includes also a validate function, I am on jQuery 1.3.2)

echo "<script type=\"text/javascript\">
$(document).ready(function() {
 $('#submForm').validate({   
  submitHandler: function(form) {
  var serialized = $('#submForm').serialize()
  $.get('".$site['url']."modules/yobilab/copyright/classes/DO_submission.php', serialized);
    window.setTimeout('location.reload()', 8000);
return false;
  form.submit();    
  } 
})
});

Now let's say the user will enter the fields ONLY for AUTHOR 1 and will leave AUTHOR 2 and AUTHOR 3 empty. How do I say to the jQuery serialize function to include in the URL ONLY the entered fields and to NOT include the empty fields at all?

Best Answer

I just ran into this same issue, but with a much different type of form. I didn't like how several of the answers in here removed form elements, which you could see the elements removed on the page before the form submitted. Others cloned the form, which wasn’t returning any results for me with one of the forms.

So I ended up with this:

$('#submForm').find('input').not('[value=""]').serialize();

In my case, the above code worked on my selected menus as well as the input fields.

Here’s exactly what I used:

$('#search').find('input, select').not('[value=""], [value="0"], [value="DESC"]').serialize();

So it only pulled form fields that have data and not any default values. I'm curious to know if this can be optimized any further.

Related Topic