Menu
I'm trying to exclude invisible form values from serialize() jQuery output. Invisible inputs/selects are inside div.ui-tabs-hide div's. Not the children of it, but descendants. So basically, I need to include all elements (input, select) witin div's without ui-tabs-hide class AND exclude all elements (input, select) within div's with ui-tabs-hide class in one form.
Right now with what I tried it includes all form elements, but I think I did not specify selectors right.
See below the code to reproduce the issue:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var formdata = $("#outboundcall:not(.ui-tabs-hide input, .ui-tabs-hide select)").serialize();
console.log(formdata);
});
</script>
<meta charset="utf-8" />
<title>JS Bin</title>
</head>
<body>
<form id="outboundcall">
<div class="content">
<div class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs-1">Credit Card</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#tabs-2">Cheque</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#tabs-3">Direct Debit</a>
</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<input type="hidden" value="1" name="lead-payment-method" />
</div>
<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<p>Cheque functionality is not currently available.</p>
</div>
<div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<input type="hidden" value="3" name="lead-payment-method" />
</div>
</div>
</div>
</form>
</body>
</html>
Here is jsbin with this code: http://jsbin.com/iyevux/5/
228
The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>: $( "input, textarea, select" ).serialize();
Approach 1: First, select the DIV with certain class using jQuery Selector and then use :not selector to ignore the elements of specific class. Example: This example implements the above approach. that doesn't have another class. class, that doesn't have another class.
In this case, jQuery serializes the successful controls within the form. Only form elements are examined for inputs they contain, in all other cases the input elements to be serialized should be part of the set passed to the .serialize () method. Selecting both the form and its children in a set will cause duplicates in the serialized string.
It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>: $ ( "input, textarea, select" ).serialize (); It is typically easier, however, to select the <form> itself for serialization: In this case, jQuery serializes the successful controls within the form.
You can apply :not() to your class selector, then match form element children with the :input selector:
var formdata = $("#outboundcall :not(.ui-tabs-hide) > :input").serialize();
Try this:
$(document).ready(function() {
var formdata = $("#outboundcall:not(.ui-tabs-hide) input,#outboundcall:not(.ui-tabs-hide) select").serialize();
console.log(formdata);
});
or
$(document).ready(function() {
var formdata = $("#outboundcall").find(":input:not(:hidden)").serialize();
console.log(formdata);
});
From jQuery: form serialize, hidden fields, and not displayed fields
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
