javascript - jQuery serialize() exclude all elements within div.classname

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=".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: /

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/

Share Improve this question asked Apr 29, 2013 at 9:29 Alexey 3,4847 gold badges31 silver badges47 bronze badges

Add a comment |

3 Answers 3

Sorted by: Reset to default 13

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);
});

$(document).ready(function() {
    var formdata = $("#outboundcall").find(":input:not(:hidden)").serialize();
    console.log(formdata);
});

From jQuery: form serialize, hidden fields, and not displayed fields

This will work :

$(document).ready(function() {
  var formdata = $("#outboundcall input").not(".ui-tabs-hide input").serialize();

  console.log(formdata);
});

Sorry earlier I did not understand the question completely, will delete that answer

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery serialize() exclude all elements within div.classname - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)