如何获取用户文本输入用户创建输入的值，jQuery

How to get the value of user text input of user created input, jQuery

本文关键字：输入 用户 创建 jQuery 何获取 文本 获取      更新时间：2023-09-26

我已经创建了一个按钮，允许用户创建一个新的文本输入。我试图获得新创建的输入的文本输入的值。

HTML 

<div class='pop-up-box-radio' Title="Edit Radios">
    <div style="display: inline; float: left; margin-left: 5%;">
        <div style="clear: both;">
            <ul class="new-radios"></ul>
        </div>
        <p style="padding-top: 15px;">
            <input type="button" class="add-radio" value="New Radio" />
        </p>
        <p>
            <input type="button" class="values" value="Values" />
        </p>
        <p class="theValues"></p>
    </div>
</div>
jQuery 

// ADD RADIO
$('.add-radio').click(function(){
    $("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>");
});
// GET VALUE OF INPUT
var newRadio = $('input.added-radio').val();
$('.values').click(function(){
    $("p.theValues").append("<p>" + newRadio + "</p>");
});
// DELETE RADIO
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() {
    var clickedButton = $(this);
    clickedButton.parent().remove();
});

当value按钮被点击时，我得到的唯一响应是'undefined'。

JSfiddle

你需要稍微修改一下你的JS，以便能够找到你找到的新元素。

首先，var newRadio将在浏览器加载时运行，而不是在创建新输入的click函数上运行。您最好的选择是在点击.values按钮时运行它。

其次，.click()找不到动态创建的元素。如果您将其更改为.on('click'函数，它将能够找到动态添加的元素。

第三，也是最后一点，这只会找到一个元素，而不是找到所有的元素。如果您创建一个each()函数并循环执行，您将能够找到所有输入。

// ADD RADIO
$('.add-radio').click(function() {
  $("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>");
});
$('.values').on('click', function() {
  var list = ''; // create list variable
  $('input.added-radio').each(function() { // start each loop
    var curRadio = $(this).val(); // get value of current item
    list += curRadio + ' - '; // append it to the list
  }); // end loop
  $("p.theValues").append("<p>" + list + "</p>"); // append list to the page
});
// DELETE RADIO
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() {
  var clickedButton = $(this);
  clickedButton.parent().remove();
});
li {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pop-up-box-radio' Title="Edit Radios">
  <div style="display: inline; float: left; margin-left: 5%;">
    <div style="clear: both;">
      <ul class="new-radios"></ul>
    </div>
    <p style="padding-top: 15px;">
      <input type="button" class="add-radio" value="New Radio" />
    </p>
    <p>
      <input type="button" class="values" value="Values" />
    </p>
    <p class="theValues"></p>
  </div>
</div>

您的newRadio变量在初始页面加载时抓取$('input.added-radio')的值(未定义，因为尚未添加新字段)

如果您将.val()更新移动到单击函数

中，则JSFiddle可以正常工作。
$('.values').click(function(){
  // GET VALUE OF INPUT
  var newRadio = $('input.added-radio').val();
  $("p.theValues").append("<p>" + newRadio + "</p>");
});
更新JSFiddle

作为题外话，$('input.added-radio').val()只会在多个字段存在时从第一个字段获取值

获取匹配元素集合中第一个元素的当前值…

(来自.val() api)

因此，如果用户单击New Radio两次并在两个字段中都输入文本，那么当单击Values按钮时，只会添加第一个字段中的值。如果通过单击右侧的X来关闭第一个字段，则将使用下一个字段的值。

您当前的实现只会给您第一个动态创建的输入控件的值。因此，您需要遍历每个元素。

$('.values').click(function(){
    $('input.added-radio').each(function(i,op)
    {
    $("p.theValues").append("<p>" + $(this).val() + "</p>");
    });
});

小提琴:http://jsfiddle.net/91e4a7wy/30/

相关文章：