I am trying to build a jQuery function that creates seven input fields when a button is clicked. This should be allowed only once, and not every time the button is pressed.

At the moment I have the below code that creates one text field, but the problem is that every time the button is pressed more text fields are added. By creating these text fields I can use them to add records in my database. For example by clicking the addbutton, the text fields will be created and the user could enter the information.

$("#addbutton").bind("click", function() { 
    var textarea = $('<input type="text" name="firstname">',);
    $('#textfields').append(textarea);
});

Thanks

I am trying to build a jQuery function that creates seven input fields when a button is clicked. This should be allowed only once, and not every time the button is pressed.

At the moment I have the below code that creates one text field, but the problem is that every time the button is pressed more text fields are added. By creating these text fields I can use them to add records in my database. For example by clicking the addbutton, the text fields will be created and the user could enter the information.

$("#addbutton").bind("click", function() { 
    var textarea = $('<input type="text" name="firstname">',);
    $('#textfields').append(textarea);
});

Thanks

• javascript
• jquery

Share Improve this question Follow edited Dec 28, 2015 at 16:29 AGE 3,79233 gold badges4242 silver badges6262 bronze badges asked Dec 28, 2015 at 16:14 user3810730user3810730 10

• 1 Okay, so what's your question? – Praveen Kumar Purushothaman Commented Dec 28, 2015 at 16:15
• 1 Let's clarify: button is clicked, seven input fields are created, clicking again on the button does not create any more input fields. Right? – AGE Commented Dec 28, 2015 at 16:15
• 7 Checkout the .one method for only allowing one click. – tymeJV Commented Dec 28, 2015 at 16:16
• @AGE Clicking again on the button does create addition input fields, and I don't want this. – user3810730 Commented Dec 28, 2015 at 16:16
• @bto.rdz Let's suppose I create the input fields, and then I submit the data with another button, what happens if I want to click again to enter new information? – user3810730 Commented Dec 28, 2015 at 16:18

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 4

You can fire the event handler only once with one(), and just append the buttons you want, I'm using an array of names and $.map to create them

$("#addbutton").one("click", function() {

     var buttons = [
         'firstname',
         'lastname',
         ..... etc
     ];

     $('#textfields').append(
         $.map(buttons, function(_name) {
             return $('<input />', { name : _name })
         })
     );
});

FIDDLE

According to our chat in your ments, you want a button that:

1. On click, it creates seven input fields and appends them to your #textfields element.
2. After the fields are created, the button is not allowed to create any more input fields.

I devised the following solution based upon this interpretation:

$("#addbutton").click(function(){
  for(var i = 0; i < 7; ++i){
    $('#textfields').append('<input type="text" name="firstname">');
  }
  $(this).prop("disabled", true);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addbutton">Click Me</button>
<div id="textfields"></div>

Long story short, the button is disabled after the first click. This prevents you or anyone from doing anything else with the button.

Alternatively you could create a global variable which will act as a flag, to help prevent further input fields from being created, by wrapping the input creation code with an if statement like so: var inputFieldsCreated = false;

$("#addbutton").click(function(){
  if(inputFieldsCreated === false){ 
    for(var i = 0; i < 7; ++i){
      $('#textfields').append('<input type="text" name="firstname">');
    }
    inputFieldsCreated = true;
  }
});

Let me know if this does the job for you in the ments below.

Just because I don't like using JQuery for such easy/simple/short thing, here's the code with pure JavaScript :

document.getElementById("btn").addEventListener("click", onClick, false);

function onClick() {
    var textfield, br;
    for(var i=0 ; i<7 ; i++) {
        textfield = document.createElement("input");
        br = document.createElement("br");
        textfield.id = "txt_"+i;
        document.getElementById("textFields").appendChild(textfield);
        document.getElementById("textFields").appendChild(br);
    }
    this.parentElement.removeChild(this);
}

cou can test it here : https://jsfiddle/v91v7afa/

Of course, instead of deleting the button, you can disable it, but it would be really easy to re-enable it. Or you can remove the listener.

var numText=1;
$("#addbutton").on("click",function(e){
      e.preventDefault();
      numText++;
      $('#textfields').append('<input type="text" name="firstname" />');
      if (numText==7)
          $(this).off('click')

});