Javascript添加动态输入字段

Question

I'm not good with Javascript at all, so I come here to seek assistance.

What I have is a form, with a link that says "Add additional URL field". I want it so when a user clicks that, it will populate an additional field underneath the default url field, with a unique input name, such as url_input1, and if they click it again to add another url input, the name of that input would be url_input2, etc.

How can I do this with Javascript?

Answer 1

This is a perfect job for JS library like jQuery. For a jQuery example implementation of this, see this .

if you want to handcraft this using pure JavaScript and DOM manipulation, you have 2 choices:

1. You can do createElement and combine that with either appendChild (see this or this ) or insertBefore (see this or this ) depending where your insert point is. (as suggested by Sonic Soul)
2. Use innerHTML and add the control by passing the HTML of control into it, which is quite similar to the jQuery approach that is in my spike. (as described by Joshua)

Option 1 is slower than Option 2.

Personally, I'll use jQuery since it will abstract some of DOM implementation that might cause some cross browser issues and simply because it's nicer and very powerful for doing stuffs like this.

Answer 2

look at 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++;

as for id, you can simply append a counter to whatever id name you wish to provide (see above)

Answer 3

Alternatively, I would say you could just write the HTML from scratch with javascript. I've always had problems with document.createElement, so an alternative would be:

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

This function would get the parent element of the text input in question, thus allowing you to add to its innerHTML.

As for adding 1 to the id each time, you have no need. If you're capturing the form input via PHP, you would simply use $_POST['inputs'] , which would return an array of the values of all inputs with the name inputs .

Answer 4

this example alow you to add and remove dynamic inputs

try something like this :

   $(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;
})

});