If checkbox is checked add new input box

Question

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.

@RemusRigo - You are asking us? You are the one who supposed to write the code... — Derek 朕會功夫, Mar 06 '14 at 21:00
I have a form and I've asked you how to show/hide a input box, but thanks to JoshC, I know now — Remus Rigo, Mar 06 '14 at 21:02
Don't just edit your question like that, if you really want it deleted then flag it for moderator attention. — The Blue Dog, Mar 06 '14 at 21:16

Josh Crozier · Accepted Answer · 2014-03-07T18:55:03.527

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);
    }
});

score 1 · Answer 2 · answered Mar 06 '14 at 21:08

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();
   }

score 1 · Answer 3 · answered Mar 06 '14 at 21:11

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>

If checkbox is checked add new input box

3 Answers3