How to get multiple values on("input") and store them in an array-CodePudding

I am creating an installation script, before executing the script I want to test entered credentials. I want to get these values directly before posting, then post through ajax to check if credentials works fine. I am stuck at storing them in array since these values changes everytime they get updated and array gets filled with trash data.

What would be the best method to store final or latest data in an array before posting them?

var host = '',
db = '',
user = '',
pass = '';

$("#host").on("input", function() {
   host = $(this).val();
   arr.push(host);
   
   $("#host_r").text($(this).val()); //just to debug
   console.log(arr);
});

$("#db").on("input", function() {
   db = $(this).val();
   arr.push(db);

   $("#db_r").text($(this).val()); //just to debug
   console.log(arr);

});

$("#user").on("input", function() {
   user = $(this).val();
   arr.push(user);

   $("#user_r").text($(this).val()); //just to debug
   console.log(arr);

});

$("#pass").on("input", function() {
   pass = $(this).val();
   arr.push(pass);
   
   $("#pass_r").text($(this).val()); //just to debug
   console.log(arr);
});

var arr = new Array;



console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="host" id="host" required>
<input name="db" id="db" required>
<input name="user" id="user" required>
<input name="pass" id="pass" required>

<br/>
Host
<div id="host_r"></div>
DB
<div id="db_r"></div>
User
<div id="user_r"></div>
Pass
<div id="pass_r"></div>
Array
<div id="array"></div>

CodePudding user response：

The input event happens on each character that the user types, so you'll got lots of extra values in the array, with all the incomplete values that the user typed along the way. Also, the order of the array will depend on the order that the user filled in the fields.

You should add a separate submit button, and fill in the array with all the inputs at once when the user clicks this. Then you'll get the final values and they'll be in a consistent order.

var host = '',
db = '',
user = '',
pass = '';

$("#host").on("input", function() {
   host = $(this).val();
   
   $("#host_r").text($(this).val()); //just to debug
});

$("#db").on("input", function() {
   db = $(this).val();

   $("#db_r").text($(this).val()); //just to debug
});

$("#user").on("input", function() {
   user = $(this).val();

   $("#user_r").text($(this).val()); //just to debug
});

$("#pass").on("input", function() {
   pass = $(this).val();
   
   $("#pass_r").text($(this).val()); //just to debug
});

var arr;

$("#submit").click(function() {
  arr = [host, db, user, pass];
  console.log(arr);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="host" id="host" required>
<input name="db" id="db" required>
<input name="user" id="user" required>
<input name="pass" id="pass" required>
<br>
<button id="submit">Done</button>
<br/>
Host
<div id="host_r"></div>
DB
<div id="db_r"></div>
User
<div id="user_r"></div>
Pass
<div id="pass_r"></div>
Array
<div id="array"></div>

CodePudding user response：

Currently, this just shows an empty array on the console, because the input events are not fired at the time of the console.log(). You have to store the values on the input events and log to the console after that.

Example

var arr = new Array(4);

var host = '',
  db = '',
  user = '',
  pass = '';

$("#host").on("input", function() {
  host = $(this).val();
  arr[0] = host;
  console.log(arr); //just to debug
  $("#host_r").text($(this).val()); //just to debug
});

$("#db").on("input", function() {
  db = $(this).val();
  arr[1] = db;
  console.log(arr); //just to debug
  $("#db_r").text($(this).val()); //just to debug

});

$("#user").on("input", function() {
  user = $(this).val();
  arr[2] = user;
  console.log(arr); //just to debug
  $("#user_r").text($(this).val()); //just to debug

});

$("#pass").on("input", function() {
  pass = $(this).val();
  arr[3] = pass;
  console.log(arr); //just to debug
  $("#pass_r").text($(this).val()); //just to debug
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="host" id="host" required>
<input name="db" id="db" required>
<input name="user" id="user" required>
<input name="pass" id="pass" required>

<br/> Host
<div id="host_r"></div>
DB
<div id="db_r"></div>
User
<div id="user_r"></div>
Pass
<div id="pass_r"></div>
Array
<div id="array"></div>

CodePudding user response：

To DRY this up you can put all the fields in a <form> element. You can then call serializeArray() on that form when it's submit, which you can send in an AJAX request.

You can also turn the logic which puts the field's values in to a related div by matching them by name to id in to a single line.

Try this:

$('form').on('submit', e => {
  e.preventDefault();
  let arr = $(e.target).serializeArray();
  console.log(arr);
  
  // send the array in an AJAX request here...
});


// for debugging, show values in the DOM
$('.field').on('input', e => $('#'   e.target.name).text(e.target.value));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<form>
  <input name="host"  required />
  <input name="db"  required />
  <input name="user"  required />
  <input name="pass"  required />
  <button type="submit">Submit</button>
</form>

<br/> 
Host <div id="host"></div>
DB <div id="db"></div>
User <div id="user"></div>
Pass <div id="pass"></div>

CodePudding user response：

Maybe try using serializeArray(). It will give you an object with name:value pairs. To get only values as array you may use map(). See the button click action.

$('input').keyup(function(){
   var arr = $("#form").serializeArray();
   $('#res').html('');
     $.each(arr, function(i, field){
        $("#res").append(field.name   ": "   field.value   "<br />");
     });
});

$('#get_values').click(function(){
  var myobj = $("#form").serializeArray();
  var myarr = myobj.map(x => x.value);
  console.log(myarr);
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<input name="host" id="host" required>
<input name="db" id="db" required>
<input name="user" id="user" required>
<input name="pass" id="pass" required>
</form>
<br />
<button id="get_values">Get Values</button>
<br />
<div id="res" style="height:100px"></div>