Jquery Get Form Data For Only Visible Fields

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 formDa

Solution 1:

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

Solution 2:

Use :visible selector to filter out hidden elements:

functionshowValues() {
    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;
  }

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