在Jquery / Javascript中的Array中插入Textbox值

时间:2016-05-13 07:55:23

标签: javascript jquery arrays

我有一个文本框,用户可以逐个添加一些值。现在,当用户点击添加按钮时,我想插入用户逐个输入数组的值。我这样做但是得到了错误的结果。阵列的长度没有增加。说如果我输入了2个值,那么数组的长度保持为1.我不知道错误是什么。以下是我的代码: -

HTML

<input type="text" class="form-control input_add_prod_grp" name="input_add_prod_grp" placeholder="Enter Group Name" />

<button class="btn default btn-xs btn_add_input_prod_grp" name="btn_add_input_prod_grp" id="add_group">Add</button>

的Javascript

$(".btn_add_input_prod_grp").click(function(){

var add_input_grp = $("input[name$='input_add_prod_grp']").val();

var newArray = [];
newArray.push('Ungrouped');
$( "input[name='input_add_prod_grp']" ).each(function() {
    newArray.push($( this ).val());

});
console.log(newArray.length);
}); 

现在,如果我输入的值超过1,则数组的长度保持为1.我不知道为什么..请帮帮我..提前致谢..

3 个答案:

答案 0 :(得分:1)

把你带到外面:

var newArray = [];
$(".btn_add_input_prod_grp").click(function(){

   var add_input_grp = $("input[name$='input_add_prod_grp']").val();


  newArray.push(add_input_grp);
  console.log(newArray.length);
}); 

的jsfiddle:https://jsfiddle.net/c19u6fa2/1/

答案 1 :(得分:0)

&#13;
&#13;
var newArray = [];
$(".btn_add_input_prod_grp").click(function() {

  var add_input_grp = $("input[name$='input_add_prod_grp']").val();

  newArray.push('Ungrouped');
  $("input[name='input_add_prod_grp']").each(function() {
    newArray.push($(this).val());

  });
  console.log(newArray);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control input_add_prod_grp" name="input_add_prod_grp" placeholder="Enter Group Name" />

<button class="btn default btn-xs btn_add_input_prod_grp" name="btn_add_input_prod_grp" id="add_group">Add</button>
&#13;
&#13;
&#13;

将初始化置于click事件之外。在内部点击事件中,它总是一遍又一遍地重新初始化。

答案 2 :(得分:0)

当你点击按钮时你正在使newArray为空,所以旧的值正从该数组中删除以避免这种情况你必须将它移动到你的函数外部以及默认值你只有一个输入框你不需要写每个人都可以直接从变量中获取该值

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<div id="contact">
  <i class="fa fa-envelope-o custom1 fa-2x"></i>
  <i class="fa fa-phone custom2 fa-2x"></i>
</div>