动态添加/删除输入字段并在单独的 div 中预览字段值

Posted 2023-02-25

【中文标题】动态添加/删除输入字段并在单独的 div 中预览字段值

【英文标题】：Add/Remove Input Fields Dynamically and preview field values in separate div

【发布时间】：2016-04-19 15:26:57

【问题描述】：

我正在构建一个调查，我需要能够在另一个 div 中预览动态输入字段的创建。

例如，我在这里创建文本输入（非常简单）并在单独的 div 中创建单选按钮：

$('#p_scnt, #p_scnt_' + i +'').live('click', function() 
            $('<p><label for="p_scnts"><input type="text" size="20" id="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="removeObject">Remove</a></p>').appendTo(scntDiv);
            $('<p><input type="radio" value="' + crunchValue + '">' + crunchValue + '</p>').appendTo(crunchville);
            i++;
            return false;
    );

http://jsfiddle.net/crunchfactory/tZPg4/15947/

我不确定如何获取这些值，因此显然是“未定义”。

三件事：

我想从文本框中获取值，因为它们被键入到单独的 div 中的值。

我想在文本框中单击以创建一个新的文本框，它，a) 似乎只在顶部 2 中工作，并且 b) 如果一个框有一个空值，不要在其他 div。

谢谢！

【问题讨论】：

ID 不应该与 cloning 相同，而您是 live 相当老的使用 on 代替。根据您的要求不清楚

如果是点击我会使用$('element').click()而不是on

【参考方案1】：

我想从文本框中获取值，因为它们被键入到 单独 div 中的值。

我想这就是你的意思:)

html

<button id="btn-add">Add</button>

<div id="source"></div>
<div id="preview"></div>

javascript

// --- Main functions --- //
function _createTextInput() 
  var inputWrapper = document.createElement('div');
  var inputElement = document.createElement('input');
  var removeBtn    = document.createElement('button');

  $(removeBtn)
    .html("Remove")
    .addClass("btn-remove-input-wrapper");

  $(inputWrapper)
    .addClass('input-wrapper')
    .append(inputElement)
    .append(removeBtn);

  return inputWrapper;


function _createRadioInput() 
  var radioWrapper = document.createElement('div');
  var radioElement = document.createElement('input');
  var radioLabel   = document.createElement('label');

  $(radioWrapper)
    .append(radioElement)
    .append(radioLabel);

  radioElement.type = 'radio';
  radioElement.name = 'group';
  return radioWrapper;


// --- Helper functions --- //

function getIndex(me) 
  return $(me).parent().index();


function getRadioElement(me) 
  return $('#radio div:nth-child(' + (getIndex(me) + 1) + ')');


// --- Event handlers --- //

$('#btn-add').click(function() 
  $('#source').append(_createTextInput());
  $('#radio').append(_createRadioInput());
);

$(document).on('click', '.btn-remove-input-wrapper', function() 
  getRadioElement(this).remove();
  $(this).parent().remove();
);

$(document).on('keyup', '.input-wrapper input', function() 
  var index = getIndex(this);
  var inputText = $(this).val();
  getRadioElement(this).children('label').html(inputText);
);

DEMO

【讨论】：

这很有趣，但是在这种情况下，例如，我可能会创建 3 个文本框，每个文本框都有文本（文本 1、文本 2、文本 3）。然后，在另一个 div 中，我将插入，例如 text 1, text 2, 文本 3。有道理？ :) 谢谢！

@crunch 啊好吧，我想我明白了。您是否希望项目符号在打字时也实时更新？

是的！ :) 这就是我使用 '.appendTo(div);' 的原因而不是 $('#div').val($('#otherdiv').val());

@crunch 有道理。几个小时后我回家看看能不能做点什么。这似乎是一个有趣的实验:)

@crunch 我想我明白了！ :D codepen.io/Tomasito665/pen/grKLKd 如果这是你要找的，我会更新答案

【参考方案2】：

由于 live 已被弃用，我将使用这种格式：

$(document).on("click",'#p_scnt, #p_scnt_' + i,function()
//
);

然后给每个 INPUT 一个文本输入类（或其他）

$(document).on("keyup",".text-input",function()
   $("div").html($(this).val());
);

上面的代码需要为正确的 div 更新，但它会获取每个输入字段的类型并将其放入 div 的 HTML 中。

【讨论】：

这是评论还是答案？

我更新了我的答案。对on的更改是为了修复OP中UNDEFINED的问题，第二次更新将从输入字段中获取文本。