Question

所以我有一个程序，它从一个输入字段开始，如果你按加号按钮，它会添加新的输入字段。我也有它所以它给新输入字段一个不同的id。我更喜欢它，所以当我按下计算时，它会将所有输入字段数据的值保存到数组中。我尝试过使用.val（）的for循环，但是没有用。

代码：

＆＃13;

<!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="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>

<!-- when this is pressed i want it to save the input fields data-->
<p id="calculate">Calculate</p>

</body>
</html>

＆＃13;

//JavaScript

$(document).ready(function(){
	var mins = [];
	//where it add the 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");
	});
    	
	// to remove an input field
	$("#minus").click(function(){
		if(idnum >= 2){
			$("#minute" + idnum+ ", #second" + idnum).remove();
			idnum-=1;
		}
	});
    	
   	// i want it to put all of the data from the input fields in an array in that click function
	$("#calculate").click(function(){
    			
	});    	
});

＆＃13;

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

＆＃13;

所有内容都是内联的，因为我试图将其保留为单个文件。不过，为了便于阅读，我发表了评论。

Answer 1

您可以使用$.map()，选择器#append input[id^=minute]，#append input[id^second]来获取input元素后代的所有#append个元素;返回一个包含两个值数组的数组，利用解构赋值来设置变量标识符;例如，minutes，seconds，对应于.value以id或"minute"

开头的元素的"second"对应的数组

$(document).ready(function() {
  var mins = [];

  //where it add the 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");
  });

  // to remove an input field
  $("#minus").click(function() {
    if (idnum >= 2) {
      $("#minute" + idnum + ", #second" + idnum).remove();
      idnum -= 1;
    }
  });

  // i want it to put all of the data 
  // from the input fields in an array 
  // in that click function
  $("#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;
      })]
    });
    // do stuff with `minutes`, `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>
  <!-- ************where the input fields are*******-->
  <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>

  <!-- when this is pressed i want it to save the input fields data-->
  <p id="calculate">Calculate</p>
</body>
</html>

您也可以将Array.from()替换为$.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

如果您将输入字段包装在表单中，则可以使用.serialize()或.serializeArray()一次序列化整个表单。

＆＃13;

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

＆＃13;

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

＆＃13;

如何获取所有输入字段的值jQuery

2 个答案: