JQuery serializes how to remove empty fields

Question

In this form, users can add information for authors (music, lyrics authors)

Users can add 1 or more authors.

The problem is that when the user enters only one author, all other inputs remain empty, but the jQuery serialization function will still put them in the url and the server gives me this error:

Request-URI Too Large 

See an example below:

 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 jQuery code (it also includes a validation function, I'm 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 that the user will enter the fields ONLY for AUTHOR 1 and leave AUTHOR 2 and AUTHOR 3 empty. How can I say that the jQuery serialization function should include ONLY entered fields in the URL and DO NOT include empty fields?

Answer 1

Try to add this.

 $('input', '#submForm').each(function(){ $(this).val() == "" && $(this).remove(); }) 

OR

 $('input:text[value=""]', '#submForm').remove(); 

front

 var serialized = $('#submForm').serialize() 

Answer 2

I just ran into the same problem, but with a completely different type of form. I didn’t like how in several of the answers given here the form elements were deleted, on which you could see the elements deleted on the page before submitting the form. Others cloned a form that did not return me any results 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 on input fields.

Here is exactly what I used:

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

Thus, he only pulled out form fields that have data, and not default values. I am curious to know if this can be further optimized.

Answer 3

That I use atm,

 $("form").serialize().replace(/[^&]+=&/g, '').replace(/&[^&]+=$/g, '') 

Answer 4

You can use the filter and the fact that serialize can be called for any jQuery object (this example is only to show that you can serialize only non-empty elements and include only <input> elements from the form)

 var serialized = $('#submForm').filter(function(){ return $(this).val(); }).serialize(); 

Here's a working example - leave one or more text fields blank and click the button; You will see that serialized line changes only include non-empty text fields.

Answer 5

Since the value attribute contains the default value, not the actual one, I decided to use this:

 var queryString = $('form input').map(function () { return $(this).val().trim() == "" ? null : this; }).serialize(); 

Benefits:

• Trim the actual value, so spaces / tabs will not be considered true,
• It does not modify the DOM element, so if it fails, it can still be reused.

Answer 6

First check if your fields are fields. These successful clicks on the array. You can serialize an array of elements.

Answer 7

This should work on what you are trying to do:

 $(document).ready(function() { $('#submForm').validate({ submitHandler: function(form) { // Do cleanup first $('#submForm>input').each(function(){ if($(this).val() == "") { $(this).remove(); } }); var serialized = $('#submForm').serialize(); $.get('".$site['url']."modules/yobilab/copyright/classes/DO_submission.php', serialized); window.setTimeout('location.reload()', 8000); return false; form.submit(); } }) }); 

Edit ...
I really think Mark Koopman's solution would be the easiest option. Is there a reason you cannot use POST instead of GET?

Change 2 ...
Unfortunately, I completely missed the fact that amit_g posted the same solution. But I hope that at least seeing it in context is still useful.

Answer 8

I just needed to do the same, so I wrote a small plugin that simply disables empty inputs before serializing:

 (function($) { $.fn.serialize_without_blank = function () { var $form = this, result, $disabled = $([]); $form.find(':input').each(function () { var $this = $(this); if ($.trim($this.val()) === '' && !$this.is(':disabled')) { $disabled.add($this); $this.attr('disabled', true); } }); result = $form.serialize(); $disabled.removeAttr('disabled'); return result; }; }(jQuery)); 

Use like this:

 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize_without_blank(); }); 

Answer 9

Dr.Molle's solution works, but if the value attribute is absent, then this solution: -

 $(form).clone().find("input").each(function() { if ($.trim($(this).val()) === '') { $(this).remove(); } }).end().serialize(); 

Answer 10

 var serializedData = $('.register-form').serializeArray(); var clear = {}; $.each(serializedData , function(i,data) { if(data.value!=='' && clear[data.name]==undefined) clear[i] = data; }); 

Answer 11

Here is what i did

 var form = $('form'); var form_input = form.serialize().replace(/[^=&]+=(&|$)/g,"").replace(/&$/,"");