Question

我对Javascript一点都不好，所以我来这里寻求帮助。

我所拥有的是一个表单，其中的链接显示“添加其他网址字段”。我想要它，所以当用户点击它时，它将填充默认url字段下的附加字段，具有唯一的输入名称，例如url_input1，如果他们再次单击它以添加另一个url输入，那么输入的名称将是url_input2等。

如何使用Javascript执行此操作？

Answer 1

对于像jQuery这样的JS库来说，这是一个完美的工作。有关此jQuery示例实现，请参阅this。

如果你想使用纯JavaScript和DOM操作来手工制作，你有两个选择：

您可以执行createElement并将其与appendChild（请参阅this或this）或insertBefore（请参阅this或this）相结合，具体取决于插入点的位置。（按照Sonic Soul的建议）
使用innerHTML并通过将控件的HTML传递给它来添加控件，这与我的spike中的jQuery方法非常相似。（如约书亚所述）

选项1比选项2慢。

就个人而言，我会使用jQuery，因为它会抽象一些可能导致一些跨浏览器问题的DOM实现，而且仅仅因为它对于做这样的事情更好，更强大。

Answer 2

查看createElement http://www.adp-gmbh.ch/web/js/elements/createelement.html

var someCounter = 0;
...
var i  = document.createElement('input');
i.type = 'text';
i.id = 'myInput_' + someCounter++;

对于id，您只需将计数器附加到您希望提供的任何ID名称（见上文）

Answer 3

或者，我会说你可以用javascript从头开始编写HTML。我一直遇到document.createElement的问题，所以另一种选择是：

function get_parent_add_input() {
var parent_element = this.parentNode;// here, we get the parent node
var current_innerHTML = String(parent_element.innerHTML);
var new_input_html = '<input type="text" name="inputs[]" />';
parent_element.innerHTML = current_innerHTML + new_input_html;
}

此函数将获取有问题的文本输入的父元素，从而允许您添加到其innerHTML。

至于每次为id添加1，你没有必要。如果您通过PHP捕获表单输入，则只需使用$_POST['inputs']，它将返回名称为 inputs 的所有输入值的数组。

Answer 4

此示例允许您添加和删除动态输入

尝试这样的事情：

   $(document).ready(function() {

    var MaxInputs       = 8; //maximum input boxes allowed
   var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
   var AddButton       = $("#AddMoreFileBox"); //Add button ID

  var x = InputsWrapper.length; //initlal text box count
  var FieldCount=1; //to keep track of text box added

  $(AddButton).click(function (e)  //on add input button click
 {
    if(x <= MaxInputs) //max input box allowed
    {
            FieldCount++; //text box added increment
           //add input box
        $(InputsWrapper).append('<div><input type="text" name="mytext[]"                            
         id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass">&times;</a></div>');
        x++; //text box increment
    }
  return false;
  });

 $("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
                x--; //decrement textbox
            }
      return false;
})

});

Javascript添加动态输入字段

4 个答案: