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 ie,
$('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 ??
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>
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">
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.