onclick create html object

Question

I want to make input type text refer to user input, if input 3 it shows 3 new input type text

I try this

<input type='text' id='how_many'><input type='button' id='add' value='add'>
<script>
       function add(){

          var total=$('#how_many).val();

          for(var x=0;x<=total;x++){
             //HOW TO ADD INPUT TYPE TEXT BELOW 
          }

       }
</script>

missing ' change to var total=$('#how_many').val();

Pranav C Balan
– Pranav C Balan

2014-01-28 15:34:21 +00:00
Commented Jan 28, 2014 at 15:34 — Pranav C Balan
– Pranav C Balan, Commented Jan 28, 2014 at 15:34

Shoaib Chikate · Accepted Answer · 2014-01-28 15:52:22Z

2

Probably you are missing '

var total=parseInt($('#how_many').val());


for(var x=0;x<=total;x++){
 $("#mainContainer").append("<input type='text'/>");
}

edited Jan 28, 2014 at 15:52

answered Jan 28, 2014 at 15:35

Shoaib Chikate

8,97112 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mamen Over a year ago

but i want if #add clicked twice it prevent loop / destroy loop

Dillen Meijboom · Accepted Answer · 2014-01-28 15:57:49Z

1

There you go:

<div class="container">
    <input type='text' id='how_many' />
</div>

<input type='button' id='add' value='add' />

<script type="text/javascript">
       $(document).ready(function() {
          $("#add").click(function(e) {
               var $el = $('#how_many'),
              total = $el.val();

              for (var x=0;x<=total;x++){
                  $(".container").append($el.val("").clone().attr("id", "total_" + x));
              }
          });
       });
</script>

Where '.clone()' is a jQuery method which clones the DOM node, '.append()' is a jQuery method to append the newly cloned node to another node.

edited Jan 28, 2014 at 15:57

answered Jan 28, 2014 at 15:35

Dillen Meijboom

9647 silver badges13 bronze badges

3 Comments

j08691 Over a year ago

And what triggers the add function?

Mamen Over a year ago

how to add id in the clone of input type text based from loop for, like id='total_1',id='total_2'

j08691 Over a year ago

Wouldn't it make more sense to more the onlick to the add button instead of the text input? Better yet, just use jQuery to bind it instead of the inline bind?

tymeJV · Accepted Answer · 2014-01-28 15:36:27Z

0

Remember to parse your input, then just create:

var total= parseInt($('#how_many').val());

for(var x=0;x<=total;x++){
     $("yourcontainer").append("<input type='text' />");
}

Trigger the add() function on a blur

$("#how_many").blur(add);

answered Jan 28, 2014 at 15:36

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

j08691 · Accepted Answer · 2014-01-28 15:42:18Z

0

$('#add').click(function () {
    for (i=0;i<$('#how_many').val();i++) {
        $(this).after('<div><input type="text" /></div>')
    }
})

jsFiddle example

answered Jan 28, 2014 at 15:42

j08691

208k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

onclick create html object

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related