CODEWITHSUNDEEP
javascripthtml
Mounika Bathina
Mounika Bathina

Reputation: 143

Unable to add DIV element using a button

<!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

Upvotes: 0

Views: 70

Answers (3)

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

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>

Upvotes: 1

Jasdeep Singh
Jasdeep Singh

Reputation: 8301

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>

Upvotes: 2

Mounika Bathina
Mounika Bathina

Reputation: 143

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

Upvotes: 0

Related Questions