Unable to add DIV element using a button

Question

<!DOCTYPE html>
<html>
<head></head>
<body>
<form method="POST" action="act.php">
    <p>Click the button to create a DIV element with some text, and append it to DIV.</p>

<div id="myDIV">
MATHS PAPER
</div>

<button onclick="myFunction()">Add Question</button>
<input type="submit" value="Create"> </input>

<script>
function myFunction() {
  var para = document.createElement("DIV");
  para.innerHTML = "<div style='background-color:lightgreen'>QUESTION<div><input type='text' id='q1' placeholder='enter question'></div><div></input><input type='text' placeholder='enter option1 here'></input></div><div></input><input type='text' placeholder='enter option2 here'></input></div></div>";
  document.getElementById("myDIV").appendChild(para);
}
</script>

</form>

</body>
</html>

How to make this code work? I observed on removing form tag, it is working. But I want it to be in form tag, so that I can post those questions and options, and save it in a database.

reference: https://www.w3schools.com/jsref/met_document_createelement.asp

type="button" for button element should solve your problem. — Rayon
– Rayon, Commented Mar 2, 2020 at 5:17

Jasdeep Singh · Accepted Answer · 2020-03-02 05:18:36Z

You should specify the button type else it will take by default as type="submit". So specify it as type="button" (noraml button) and the form will not submit as it was doing previously.

<!DOCTYPE html>
<html>

<head></head>

<body>
  <form method="POST" action="act.php">
    <p>Click the button to create a DIV element with some text, and append it to DIV.</p>

    <div id="myDIV">
      MATHS PAPER
    </div>

    <button type="button" onclick="myFunction()">Add Question</button>
    <input type="submit" value="Create" />

    <script>
      function myFunction() {
        var para = document.createElement("DIV");
        para.innerHTML = "<div style='background-color:lightgreen'>QUESTION<div><input type='text' id='q1' placeholder='enter question'></div><div></input><input type='text' placeholder='enter option1 here'></input></div><div></input><input type='text' placeholder='enter option2 here'></input></div></div>";
        document.getElementById("myDIV").appendChild(para);
      }
    </script>

  </form>

</body>

</html>

Ritesh Khandekar · Accepted Answer · 2020-03-02 05:18:54Z

1

Your code is working fine but form sends data on target page when you click on button

Use event.preventDefault() to stop form submission

<form method="POST" action="act.php">
<p>Click the button to create a DIV element with some text, and append it to DIV.</p>

<div id="myDIV">
MATHS PAPER
</div>

<button onclick="myFunction()">Add Question</button>
<input type="submit" value="Create"> </input>

<script>
function myFunction() {
  event.preventDefault();
  var para = document.createElement("DIV");
  para.innerHTML = "<div style='background-color:lightgreen'>QUESTION<div><input type='text' id='q1' placeholder='enter question'></div><div></input><input type='text' placeholder='enter option1 here'></input></div><div></input><input type='text' placeholder='enter option2 here'></input></div></div>";
  document.getElementById("myDIV").appendChild(para);
}
</script>

</form>

answered Mar 2, 2020 at 5:18

Ritesh Khandekar

4,0153 gold badges17 silver badges31 bronze badges

1 Comment

cloned Over a year ago

better solution is to not use a submit button at all and just use a regular button.

Mounika Bathina · Accepted Answer · 2020-03-02 05:16:49Z

0

write it after closing the form tag but inside the body tag

<button onclick="myFunction()">Add Question</button>

---solved by Perisetla Pavan Kalyan

or

<button onclick="myFunction()" formaction="#">Add Question</button>

reference

answered Mar 2, 2020 at 5:16

Mounika Bathina

1434 silver badges14 bronze badges

Collectives™ on Stack Overflow

Unable to add DIV element using a button

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related