CODEWITHSUNDEEP
javascriptjquery
Rajeev
Rajeev

Reputation: 46919

jquery get all form elements attributes and values

In the below html i want to read all the input elements of the form and get the custom field and the selected values or the input entered,how to do this?

function create()
{
   $("form").each(function(){
     var elements = $(this).find(':input');
     for(var ele in elements)
     {
          console.log("++++++++++++")
          console.log(ele)
          console.log("++++++++++++")
     }
  }

}

<form name="UserForm">
   <input type="text" name="name1" readonly class="form-control" custom="input"/>
   <select  name="iType" id="iType" custom="SelectList">
      <option value="3" selected>school</option>
   </select>
   <select multiple id="multi" id="multi" custom="multiselect">
      <option value="1"> 1</option>
      <option value="2"> 2</option>
      <option value="3"> 3</option>
   </select> 
   <input type="checkbox" value="1" custom="checkbox" /> 
   <input type="radio" value="1"  custom ="radio" />
</form>

Upvotes: 2

Views: 4738

Answers (5)

Vladimir
Vladimir

Reputation: 342

You can use JQuery serializeArray function for that purpose, but previously you should add name attribute to each input or select.

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script languarge="javascript">
    $(document).ready(function() {
      $('form[name=UserForm]').submit(function(event) {
        event.preventDefault();
        var a = $(this).serializeArray();
        o = {};
        a.forEach(function(v) {
          if (!o[v.name]) {
            o[v.name] = v.value;
          } else {
            o[v.name] = [o[v.name]];
            o[v.name].push(v.value);
          }
        });
        //console.log ( o );
        $('#result').text(JSON.stringify(o, null, '\t'));
      });
    });
  </script>
</head>

<body>

  <form name="UserForm">
    <input type="text" name="name1" readonly class="form-control" custom="input" />
    <select name="iType" id="iType" custom="SelectList" name="SelectList">
      <option value="3" selected>school</option>
    </select>
    <select multiple id="multi" id="multi" custom="multiselect" name="multiselect">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <input type="checkbox" value="1" custom="checkbox" name="checkbox" />
    <input type="radio" value="1" custom="radio" name="radio" />
    <input type="submit" />
  </form>

  <pre id="result">
</pre>

</body>

</html>

Upvotes: 1

Girish
Girish

Reputation: 12127

First, in your case probably form is single element selector and you should iterate form elements only not form selector, try this code

$(function(){
 $(':input','form').each(function(i, o){
    $('#op').append($(o).attr('custom') + ' value:' + $(o).val()+'<br/>');
 })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="UserForm">
   <input type="text" name="name1" readonly class="form-control" custom="input"/>
   <select  name="iType" id="iType" custom="SelectList">
      <option value="3" selected>school</option>
   </select>
   <select multiple id="multi" id="multi" custom="multiselect">
      <option value="1" selected> 1</option>
      <option value="2" selected> 2</option>
      <option value="3"> 3</option>
   </select> 
   <input type="checkbox" value="1" custom="checkbox" /> 
   <input type="radio" value="1"  custom ="radio" />
</form>
<div id="op"></div>

Upvotes: 2

user2575725
user2575725

Reputation:

Try using attribute selector:

$(function() {
  $('form[name=UserForm]').find('[custom]').each(function() {
    console.log(this, $(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="UserForm">
  <input type="text" name="name1" readonly class="form-control" custom="input" />
  <select name="iType" id="iType" custom="SelectList">
    <option value="3" selected>school</option>
  </select>
  <select multiple id="multi" id="multi" custom="multiselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input type="checkbox" value="1" custom="checkbox" />
  <input type="radio" value="1" custom="radio" />
</form>

Upvotes: 0

Shushanth Pallegar
Shushanth Pallegar

Reputation: 2862

  var $input = $("form :input");
  var inputs = {}


$inputs.each(function() {

    inputs[$(this).attr('type')] = $(this).val();
});

Upvotes: 1

Siamak Ferdos
Siamak Ferdos

Reputation: 3299

Try: 

function create()
{
   $("form input").each(function(){
     {
          console.log("++++++++++++")
          console.log($(this).val())
          console.log("++++++++++++")
     }
    $("form select").each(function(){
     {
          console.log("++++++++++++")
          console.log($(this).find("option:selected").val())
          console.log("++++++++++++")
     }
  }

Upvotes: 0

Related Questions