jquery get all form elements attributes and values

Question

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>

Girish · Accepted Answer · 2015-06-23 10:57:01Z

2

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>

edited Jun 23, 2015 at 10:57

answered Jun 23, 2015 at 10:48

Girish

12.2k3 gold badges37 silver badges54 bronze badges

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

4 Comments

Girish Over a year ago

do you want to show custom='input' attribute??, run answer demo

Girish Over a year ago

@Rajeev mutiselect options were not selected, see now

Rajeev Over a year ago

will it work for the elments without custom attribute?

Girish Over a year ago

yes, :input selector is select all form elements, doesn't matter custom attribute

Shushanth Pallegar · Accepted Answer · 2015-06-23 10:45:14Z

1

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


$inputs.each(function() {

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

answered Jun 23, 2015 at 10:45

Shushanth Pallegar

2,8721 gold badge17 silver badges17 bronze badges

Comments

Vladimir · Accepted Answer · 2015-06-30 10:28:21Z

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>

Siamak Ferdos · Accepted Answer · 2015-06-23 10:38:24Z

0

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("++++++++++++")
     }
  }

answered Jun 23, 2015 at 10:38

Siamak Ferdos

3,3096 gold badges35 silver badges60 bronze badges

2 Comments

Rajeev Over a year ago

In your code how to print the custom attribute values?

Siamak Ferdos Over a year ago

You can use attr("yoiur_attr") instead of val()

user2575725 · Accepted Answer · 2015-06-23 10:51:46Z

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>

Collectives™ on Stack Overflow

jquery get all form elements attributes and values

5 Answers 5

4 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related