Move an input into a form using Javascript

Question

I am trying to move an element inside a form and then change the display to block. I am getting the display to change but can't seem to move it, this is the code I am using

<form action="testsubmit.php">
    <div id="placehere">
    </div>
    <input type="submit" value="submit">
</form>

<div id="input1" style="display:none">
<input type="text" name="test" id="input1">
</div>

<button onclick="test()">Click me</button>


<script>
function test(){
    document.getElementById('input1').appendChild(document.getElementById('placehere'));
    document.getElementById('input1').style.display = 'block';
}
</script>

Your code works fine, are you trying to display the field next to the button by any chance? — Nadir
– Nadir, Commented Mar 7, 2016 at 14:56
Not quite, it needed to be above the submit button, I had the id's the wrong way round — Lewis Smith
– Lewis Smith, Commented Mar 7, 2016 at 14:56

Fabrizio Calderan · Accepted Answer · 2016-03-07 15:03:52Z

4

the insertion has to be done in the other way round

document.getElementById('placehere').appendChild(
     document.getElementById('input1')
);

The DOM insertion via appendChild() is in fact <parentNode>.appendChild(<node>)

Then, to show the element javascript is not necessary. just hide the input by default via CSS, and show it when it is inside the form element

#input1 { display: none }
#placehere #input1 { display: block }

edited Mar 7, 2016 at 15:03

answered Mar 7, 2016 at 14:52

Fabrizio Calderan

124k26 gold badges172 silver badges183 bronze badges

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

Comments

Scott Marcus · Accepted Answer · 2016-03-07 14:52:45Z

2

Have you tried:

     document.getElementById('placehere').appendChild(document.getElementById('input1'));

answered Mar 7, 2016 at 14:52

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Comments

user3062282 · Accepted Answer · 2016-03-07 15:00:26Z

0

Try this code

<form action="testsubmit.php">
    <div id="placehere"></div>
    <input type="submit" value="submit">
</form>

<div style="display:none">
<input type="text" name="test" id="input_text">
</div>

<button onclick="test()">Click me</button>


<script>
function test(){
    document.getElementById('placehere').appendChild(document.getElementById('input_text'));
    document.getElementById('input_div').style.display = 'block';
}
</script>

answered Mar 7, 2016 at 15:00

user3062282

Collectives™ on Stack Overflow

Move an input into a form using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related