Discovering the data from every input field using jQuery

Question

Discovering the data from every input field using jQuery

So, I've created a program that starts with one input field. By pressing the plus button, it adds new input fields with different IDs. When I press calculate, I want to save all the input field values into an array. I attempted using a for loop with .val() but it didn't work.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <title></title>
    </head>
    <body>
<!-- ************where the input fields are*******-->
<div id="newfields">
<p style="display:inline-block; margin-bottom:0px;">
        <input type='text' class='minutes' id="minute1"/>
        <input type='text' class='vidseconds' id="second1"/>
</p>
<div id="addremove">
        <button id="plus">+</button>
        <button id="minus">-</button>
</div>
</div>

<!-- Save data when this is pressed -->
<p id="calculation">Calculate</p>

</body>
</html>

//JavaScript

$(document).ready(function(){
var mins = [];
// Add new input field
var idnum = 1;
$("#plus").click(function(){
idnum+=1;
var newInput = "<p><input type='text' class='minutes' id='minute"+idnum+"' /><input type='text' class='vidseconds'         id='second"+idnum+"'/></p>";
$(newInput).appendTo("#newfields");
});
    
// Remove an input field
$("#minus").click(function(){
if(idnum >= 2){
$("#minute" + idnum+ ", #second" + idnum).remove();
idnum-=1;
}
});
    
   // Put input field data in an array on click
$("#calculation").click(function(){
    
});    
});

/*StyleSheet */

#newfields {
display: inline-block;
}

#addremove {
display: inline-block;
}

button {
border-style: none;
background-color: #C0C0C0;
width: 24px;
height: 24px;
}

Everything is inline because I'm aiming to keep it as a single file. Comments have been added for readability.

javascript jquery html css

Answer 1

Answer №1

To retrieve all input elements that are descendants of the #append element, you can utilize $.map(), selectors #append input[id^=minute], and #append input[id^second]. This will return an array containing two arrays of values. You can then use destructuring assignment to assign variable identifiers such as minutes and seconds for arrays corresponding to .value of elements where id starts with "minute" or "second"

$(document).ready(function() {
  var mins = [];

  // Add a new input field
  var idnum = 1;
  $("#plus").click(function() {
    idnum += 1;

    var input = "<p><input type='text' class='minutes' id='minute" 
                + idnum 
                + "' /><input type='text' class='vidseconds' id='second" 
                + idnum 
                + "'/></p>";
    $(input).appendTo("#append");
  });

  // Remove an input field
  $("#minus").click(function() {
    if (idnum >= 2) {
      $("#minute" + idnum + ", #second" + idnum).remove();
      idnum -= 1;
    }
  });

  // Store data from input fields in an array 
  $("#calculate").click(function() {
    var [minutes, seconds] = $.map([$("#append input[id^=minute]")]
                             , $("#append input[id^=second]")]
      , function(el) {
      return [$.map(el, function(elem) {
        return elem.value;
      })];
    });
    // Perform actions using `minutes` and `seconds` variables
    console.log("minutes:", minutes, "seconds:", seconds);
  });
});

#append {
  display: inline-block;
}
#plusnminus {
  display: inline-block;
}
button {
  border-style: none;
  background-color: #C0C0C0;
  width: 24px;
  height: 24px;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <title></title>
</head>

<body>
  <!-- Input fields section -->
  <div id="append">
    <p style="display:inline-block; margin-bottom:0px;">
      <input type='text' class='minutes' id="minute1" />
      <input type='text' class='vidseconds' id="second1" />
    </p>

    <div id="plusnminus">
      <button id="plus">+</button>
      <button id="minus">-</button>
    </div>

  </div>

  <!-- Save input fields data when this button is clicked-->
  <p id="calculate">Calculate</p>
</body>
</html>

You can also use Array.from() instead of $.map()

var [minutes, seconds] = Array.from([$("#append input[id^=minute]")]
                                   , $("#append input[id^=second]")]
                         , function(el) {
                             return Array.from(el, function(elem) {
                               return elem.value;
                             });
                         });

Answer 2

To retrieve all input elements that are descendants of the #append element, you can utilize $.map(), selectors #append input[id^=minute], and #append input[id^second]. This will return an array containing two arrays of values. You can then use destructuring assignment to assign variable identifiers such as minutes and seconds for arrays corresponding to .value of elements where id starts with "minute" or "second"

$(document).ready(function() {
  var mins = [];

  // Add a new input field
  var idnum = 1;
  $("#plus").click(function() {
    idnum += 1;

    var input = "<p><input type='text' class='minutes' id='minute" 
                + idnum 
                + "' /><input type='text' class='vidseconds' id='second" 
                + idnum 
                + "'/></p>";
    $(input).appendTo("#append");
  });

  // Remove an input field
  $("#minus").click(function() {
    if (idnum >= 2) {
      $("#minute" + idnum + ", #second" + idnum).remove();
      idnum -= 1;
    }
  });

  // Store data from input fields in an array 
  $("#calculate").click(function() {
    var [minutes, seconds] = $.map([$("#append input[id^=minute]")]
                             , $("#append input[id^=second]")]
      , function(el) {
      return [$.map(el, function(elem) {
        return elem.value;
      })];
    });
    // Perform actions using `minutes` and `seconds` variables
    console.log("minutes:", minutes, "seconds:", seconds);
  });
});

#append {
  display: inline-block;
}
#plusnminus {
  display: inline-block;
}
button {
  border-style: none;
  background-color: #C0C0C0;
  width: 24px;
  height: 24px;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <title></title>
</head>

<body>
  <!-- Input fields section -->
  <div id="append">
    <p style="display:inline-block; margin-bottom:0px;">
      <input type='text' class='minutes' id="minute1" />
      <input type='text' class='vidseconds' id="second1" />
    </p>

    <div id="plusnminus">
      <button id="plus">+</button>
      <button id="minus">-</button>
    </div>

  </div>

  <!-- Save input fields data when this button is clicked-->
  <p id="calculate">Calculate</p>
</body>
</html>

You can also use Array.from() instead of $.map()

var [minutes, seconds] = Array.from([$("#append input[id^=minute]")]
                                   , $("#append input[id^=second]")]
                         , function(el) {
                             return Array.from(el, function(elem) {
                               return elem.value;
                             });
                         });

Answer 3

Answer №2

To efficiently serialize all input fields within a form, you can utilize the .serialize() or .serializeArray() methods.

$(function() {
  $('#my-button').on('click', function() {
    var values = $('#my-form').serializeArray();
    console.log(values);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  <input type="text" name="input1" value="first field"><br/>
  <input type="text" name="input2" value="second field"><br/>
  <input type="text" name="input3" value="third field"><br/>
</form>

<button id="my-button">Get All Values</button>

Answer 4

To efficiently serialize all input fields within a form, you can utilize the .serialize() or .serializeArray() methods.

$(function() {
  $('#my-button').on('click', function() {
    var values = $('#my-form').serializeArray();
    console.log(values);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  <input type="text" name="input1" value="first field"><br/>
  <input type="text" name="input2" value="second field"><br/>
  <input type="text" name="input3" value="third field"><br/>
</form>

<button id="my-button">Get All Values</button>

Discovering the data from every input field using jQuery

Answer №1

Answer №2

Similar questions

Using Vue.js, learn how to target a specific clicked component and update its state accordingly

How to properly position HTML elements and center text within paragraphs with inputs

The external function in HTML Form's onsubmit attribute is failing to execute

Submitting values to a different page in PHP using jQuery AJAX

Guide on implementing image tag and source in Django template language system

Invoke another component to display within a React.js application

Is the iPhone height incorrect using jQuery?

415 error returned from REST API during Ajax file upload operation

Encountering a 'Object is not a function' issue while attempting to implement Page Object with Protractor

Use Jquery to smoothly scroll to the top offset of

Seamless Exploration with Google StreetView

Occasionally, the NodeJs server will freeze up and require a forced stop via ctrl+c to

Guide on diverting response from an ajax request

Is it possible to utilize Vue.js' v-if directive to validate if a certain value is present within an array

Utilizing Javascript to export modules and call multiple functions simultaneously

Avoid potential issues caused by cancelled asynchronous requests affecting the application's status by using the watchEffect() function

Changing color of entire SVG image: a step-by-step guide

Implementing a Masonry layout within an ASP UpdatePanel

Mastering the 'wing' corner effect using only CSS

How can I transfer a JavaScript value to PHP for storage in an SQL database?