JQuery Creating Array from All Inputs and Extracting It

Question

Here is my Fiddle

Here is my Input Code :

<input type="text" id="first" name="first">
<input type="text" id="second" name="second">
<input type="text" id="third" name="third">
<input type="text" id="fourth" name="fourth">
<input type="button" id="driver" name="driver" value="Submit">

Here is my Script :

<script>
    $(document).ready(function() {

        $("#driver").click(function(event) {
            var A = $("#first").val();
            var B = $("#second").val();
            var C = $("#third").val();
            var D = $("#fourth").val();
            console.log(A);
            console.log(B);
            console.log(C);
            console.log(D);

        });
    });
</script>

There was few fiddle which can create just an array in few complex ways i.e.,

$('document').ready(function() {
    var results = [];
    var items = $('[name^=item]');
    $.each(items, function(index, value) {
        value = $(value);
        var jsObject = {};
        jsObject[value.attr('name')] = value.attr('value');
        results.push(jsObject);
    });
    console.log(results);
});

But Is there a simple way to create an Array with all elements and Extract all the values from the from those Array in JQuery ??

what is the structure of the array you are looking for... is it just a array of values? — Arun P Johny
– Arun P Johny, Commented Dec 22, 2014 at 4:43
I mean to get just array of values ( i have given input only as the text, but needed to construct array for any input type) — AngularAngularAngular
– AngularAngularAngular, Commented Dec 22, 2014 at 5:28

Kartikeya Khosla · Accepted Answer · 2014-12-22 04:40:12Z

3

Here is the simplest way :-

<script>
    $(document).ready(function() {
        var arr=[]; //you can make 'arr' as local or global as you want
        $("#driver").click(function(event) {
            event.preventDefault();  //disable default behaviour of #driver
            var A = $("#first").val();
            var B = $("#second").val();
            var C = $("#third").val();
            var D = $("#fourth").val();
            arr.push(A);  //store values in array with .push()
            arr.push(B);
            arr.push(C);
            arr.push(D);
            console.log(arr);  //print array
        });
    });
</script>

answered Dec 22, 2014 at 4:40

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

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

Comments

user2575725 · Accepted Answer · 2014-12-22 06:02:28Z

2

Try using $.map() instead of array.push()

var textboxes;

var extract = function() {
  var arr = textboxes.map(function() {
    return this.value; //textbox value
  }).get(); //get array
  console.log('text boxe values: ', arr);
};

$(function() {
  textboxes = $('input:text'); //get all text boxes
  $('#driver').on('click', extract);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="first" name="first">
<input type="text" id="second" name="second">
<input type="text" id="third" name="third">
<input type="text" id="fourth" name="fourth">
<input type="button" id="driver" name="driver" value="Submit">

answered Dec 22, 2014 at 6:02

user2575725

1 Comment

AngularAngularAngular Over a year ago

Thanks i shall use it too :)

Makaze · Accepted Answer · 2014-12-22 05:39:08Z

1

Why not use a simple selector and each?

$('#driver').on('click', function() {
  var fields = [];

  $('input, select').each(function() {
    if ($(this).is('[type=checkbox]')) {
      if ($(this).is(':checked')) {
        fields.push($(this).val());
      }
    } else if ($(this).is('[type=radio]')) {
      if ($('[name=' + $(this).attr('name') + ']:checked').get(0) === this) {
        fields.push($(this).val());
      }
    } else if (!$(this).is('[type=submit], [type=button]')) {
      fields.push($(this).val());
    }
  });

  console.log(fields);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="first" name="first">
<br />
<input type="checkbox" value="fineprint" />Did you read the print?
<br />
<input type="text" id="second" name="second" />
<br />
<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
<br />
<input type="text" id="third" name="third" />
<br />Test?
<br />
<input type="radio" name="bool" value="yes" checked />Yes
<br />
<input type="radio" name="bool" value="no" />No
<br />
<input type="text" id="fourth" name="fourth" />
<br />
<input type="button" id="driver" name="driver" value="Submit">

edited Dec 22, 2014 at 5:39

answered Dec 22, 2014 at 4:43

Makaze

1,0967 silver badges13 bronze badges

3 Comments

AngularAngularAngular Over a year ago

Suppose if i have any select box or check box, $('input[type=text]').each(function() { this only will work ?

Makaze Over a year ago

No. Those aren't [type=text] elements. If you want to get the value of a different types of inputs, you'll have to use different methods. You only want to get the values of checked checkboxes, for example. Search the site for how to get the values of other types or ask another question for more info.

Makaze Over a year ago

Went ahead and added support for just about everything since your title did imply ALL inputs. Removed buttons and the submit button, though.

Collectives™ on Stack Overflow

JQuery Creating Array from All Inputs and Extracting It

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related