Javascript: Adding fields dynamically

Question

I have a html page which looks like this:

<html>
<head>
<title></title>
<script language="javascript">
    fields = 0;
    function addInput() {
       if ( fields != 3) {
          document.getElementById('text').innerHTML += "<input type='text'         name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name' />";
          fields += 1;'
       } else {
          document.getElementById('text').innerHTML += "<br />More then 3 not allowed.";
          document.form.add.disabled = true;
       }
    }
</script>
</head>
<body>
<form name="form">
    <input type="button" onclick="addInput()" name="add" value="Add More" />
</form>
<div id="text">

</div>
</body>
</html>

This works perfectly fine for me. It adds text fields when the button is clicked. But, I have another select tag which needs to be added dynamically when the button is clicked as well. The select form is as below:

<select id="client_category_name" name="client_category[name]">
   <option value="">Select Category</option>
   <option value="1">internal</option>
   <option value="2">external</option>
   <option value="3">others</option>
</select>

How do we add this select tag alongside the input tag. I am a ruby on rails developer and finding it hard to implement it.

why don't you use jQuery ? it will be much easier.

Bk Santiago
– Bk Santiago

2013-02-19 06:01:03 +00:00
Commented Feb 19, 2013 at 6:01 — Bk Santiago
– Bk Santiago, Commented Feb 19, 2013 at 6:01
Sure, but how do we write the same function using jquery?

Supersonic
– Supersonic

2013-02-19 06:01:51 +00:00
Commented Feb 19, 2013 at 6:01 — Supersonic
– Supersonic, Commented Feb 19, 2013 at 6:01

bikash shrestha · Accepted Answer · 2013-02-19 06:41:43Z

3

Hope this helps:

<html>
<head>
<title></title>
<script >
fields = 0;
function addInput() {
if (fields != 3) {
document.getElementById('text').innerHTML += "<input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name_"+fields+"' />"+
'<select id="client_category_name_'+fields+'" name="client_category[]"><option value="">Select Category</option><option value="1">internal</option><option value="2">external</option><option value="3">others</option></select>';
fields = fields+ 1;
} else {
document.getElementById('text').innerHTML += "<br />More then 3 not allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput();" name="add" value="Add More" />
</form>
<div id="text">

</div>
</body>
</html>

edited Feb 19, 2013 at 6:41

answered Feb 19, 2013 at 6:14

bikash shrestha

4392 silver badges5 bronze badges

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

2 Comments

Supersonic Over a year ago

Thanks for that. Is it possible to dynamically change the id of both the fields when a user adds more. So at first: id = "client_category_name_1" second: id = "client_category_name_2" and at last id = "client_category_name_3" as we are not going to add more then 3. Id should change for both input and select tag?

bikash shrestha Over a year ago

yes. i've edited the code to chage the id aswell.Hope this helps

Bk Santiago · Accepted Answer · 2013-02-19 06:06:39Z

1

Ok assuming you already have JQuery library

$("#text").append("<input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name' />");

same goes on the select and for readable code. you can put it first on a variable

var mySelect ="";
mySelect += '<select id="client_category_name" name="client_category[name]">';
mySelect += '<option value="">Select Category</option>';

etc....

$("#text").append(mySelect);

answered Feb 19, 2013 at 6:06

Bk Santiago

1,5733 gold badges13 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript: Adding fields dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related