jQuery get form data for only visible fields

Question

In my form I got both visible and non-visible (display:none) elements. I need to get form data for only visible fields. I am collecting the data with the following code:

var formData = $('#myForm')
               .serializeArray()
               .reduce(function(obj, item) {   
                    //need to process only visible fields somewhere here                     
                    obj[item.name] = item.value;
                    return obj;
                }, {});

I know about disabling the name propery of the input, but after the data is collected, I would like to return this property for all fields back. Any ideas would be welcome. Thank you.

$("#myForm :visible").each(function(){ console.log(this); }); — Daniel Manta
– Daniel Manta, Commented Jun 15, 2017 at 13:02

Daniel Manta · Accepted Answer · 2017-06-15 13:05:32Z

2

$("#myForm :visible").each(function(){
  console.log(this);
});

answered Jun 15, 2017 at 13:05

Daniel Manta

6,76317 gold badges43 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stanislav Kvitash · Accepted Answer · 2017-06-15 13:08:54Z

Use :visible selector to filter out hidden elements:

function showValues() {
    var fields = $("form :input:visible").serializeArray();
    $("#results").empty();
    $.each(fields, function( i, field ) {
      $("#results").append( field.value + " " );
    });
  }
 
  $(":checkbox, :radio").click(showValues);
  $(":text").blur(showValues);
  $( "select" ).change(showValues);
  
  showValues();

  body, select {
    font-size: 14px;
  }
  form {
    margin: 5px;
  }
  p {
    color: red;
    margin: 5px;
  }
  b {
    color: blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><b>Results:</b> <span id="results"></span></p>
<form>
  <input type="text" name="text1" value="text1" id="text1"/>
  <input type="text" name="text2" value="text2" id="text2" style="display:none;"/>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
  <br>
  <input type="checkbox" name="check" value="check1" id="ch1" />
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2" />
  <label for="ch2">check2</label>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>

Collectives™ on Stack Overflow

jQuery get form data for only visible fields

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related