Add or Remove form fields on the fly

[rics]

Hello,

I have a form with basicly three fields, as follows:


NAME
PHONE_TYPE - PHONE_NUMBER


The second line have two fields. I have to do something to allow the
user to add or remove more lines on this form, so he could send how
many combinations (phone_type & phone_number) he need to.

For example:


NAME
PHONE_TYPE - PHONE_NUMBER (+)


and then he clicks the + button:


NAME
PHONE_TYPE - PHONE_NUMBER (-)
PHONE_TYPE - PHONE_NUMBER (+)


and so on... If he clicks the - sign, that line is deleted.

How can I do that???

 

[scripts.contact]

Hello,

I have a form with basicly three fields, as follows:

NAME
PHONE_TYPE - PHONE_NUMBER

The second line have two fields. I have to do something to allow the
user to add or remove more lines on this form, so he could send how
many combinations (phone_type & phone_number) he need to.

For example:

NAME
PHONE_TYPE - PHONE_NUMBER (+)

and then he clicks the + button:

NAME
PHONE_TYPE - PHONE_NUMBER (-)
PHONE_TYPE - PHONE_NUMBER (+)

and so on... If he clicks the - sign, that line is deleted.

How can I do that???

something like this:


function add(b){
var
t=document.getElementById("mb").appendChild(b.parentElement.cloneNode(true))
b.innerHTML="-";
b.onclick=function(){
t.parentNode.removeChild(t);
this.onclick=function(){add(this)};
this.innerHTML="+"
}
}


<div id="mb">
<p><input></p>
<p><input><input> <button onclick="add(this)">+</button></p>
</div>

 

[rics]

something like this:

function add(b){
var
t=document.getElementById("mb").appendChild(b.parentElement.cloneNode(true))
b.innerHTML="-";
b.onclick=function(){
t.parentNode.removeChild(t);
this.onclick=function(){add(this)};
this.innerHTML="+"
}
}

<div id="mb">
<p><input></p>
<p><input><input> <button onclick="add(this)">+</button></p>
</div>

Thanks! With your code as a start point I could finaly find a
solution. I new to javascript. I'm beggining to learn it now.

Here's the code that made things work as expected.


function add_del(b){
if (b.innerHTML == "+"){
var
t=document.getElementById("mb").appendChild(b.parentNode.cloneNode(true));
b.innerHTML="-";
} else {
b.parentNode.parentNode.removeChild(b.parentNode);
}
}

<div id="mb">
<p><input></p>
<p><input><input><button onclick="horarios(this)">+</button></p>
</div>