If checkbox is checked add new input box [duplicate] - html

Question

This question already has answers here:
Show box or input box on checked box
(2 answers)
Closed 8 years ago.
I have a form like this
<form >
<input type="text" placeholder="First Name" required id="fname" name="fname"/>
<input type="text" placeholder="Last Name" required id="lname" name="lname"/>
<input type="checkbox" placeholder="Maiden Name" id="Maiden Name" name="chkname"/>
<input type="hidden" placeholder="Maiden Name" id="mname" name="mname"/>
...
</form>
and if the checkbox is checked then the maiden name input box should be visible, can anyone help me with this.

Answer 1

In this instance, it's possible to do this without JavaScript, just use the :checked pseudo class:
EXAMPLE HERE
#mname {
display:none;
}
#maidenname:checked ~ #mname {
display:block;
}
Use either the general sibling combinator, ~, or the adjacent sibling combinator +, to change the display of the input element when the checkbox element is toggled. This of course assumes that the checkbox precedes the input element in the DOM.
If you would rather use JavaScript, you could use the following:
JS EXAMPLE HERE
var checkbox = document.getElementById('maidenname');
var input = document.getElementById('mname');
checkbox.addEventListener('click', function () {
if (input.style.display != 'block') {
input.style.display = 'block';
} else {
input.style.display = '';
}
});
Alternatively, if you would rather add an input element to the DOM (as your title implies), rather than changing the visibility of it, you could use something like this:
ALTERNATIVE JS EXAMPLE HERE
var checkbox = document.getElementById('maidenname');
checkbox.addEventListener('click', function () {
if (document.getElementById('mn')) {
document.getElementById('mn').remove();
} else {
var input = document.createElement("input");
input.id = 'mn';
input.type = 'text';
input.placeholder = 'Maiden Name';
document.body.appendChild(input);
}
});

Answer 2

you should not use maiden name input box as type="hidden". Use it as below:
<input type="text" style=" display:none" placeholder="Maiden Name" id="mname" name="mname"/>
Call function to toggle display on click of checkbox:
<input onchange="showHideControl();" type="checkbox" placeholder="Maiden Name" id="Maiden Name" name="chkname"/>
Toggle maiden name input box:
function showHideControl()
{
$('#mname').toggle();
}

Answer 3

You can do it using pure javascript, like so:
<form id=frmMain name=frmMain>
<input type="text" placeholder="First Name" required id="fname" name="fname"/>
<input type="text" placeholder="Last Name" required id="lname" name="lname"/>
<input type="checkbox" placeholder="Maiden Name" id="chkname" name="chkname" onclick=javascript:document.frmMain.mname.hidden=!document.frmMain.chkname.checked; />
<input type="input" hidden=true placeholder="Maiden Name" id="mname" name="mname"/>
...
</form>