CODEWITHSUNDEEP
javascriptjqueryarrays
AngularAngularAngular
AngularAngularAngular

Reputation: 3769

JQuery Creating Array from All Inputs and Extracting It

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 ??

Upvotes: 1

Views: 78

Answers (3)

user2575725
user2575725

Reputation:

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">

Upvotes: 2

Makaze
Makaze

Reputation: 1086

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">

Upvotes: 1

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18893

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>

Upvotes: 3

Related Questions