Creating Dynamic Textbox , but code not working

Question

I have just started learning java script.I am trying to make Dynamic text box but the my code is not working . Can someone help me in rectifying my mistake??

 <html>
 <head>
 </head>
 <body>
 <script language="javascript">

     function add(){
         var text=document.createElement('input');
         var add=document.getElementById("Myform");
         text.setAttribute("type","text");
         text.setAttribute("name","BookName");
         add.appendChild(text);
     }
 </script>
 <form action="new1.php" id="Myform"> 
 <input type="submit" value="Submit" id="submit" onclick="javascript:add();"/>      <br/>

</form>
</body>
</html>

The text box disappears before I can do anything with it.

Rajkumar R · Accepted Answer · 2016-07-25 08:09:30Z

1

Change the input type as button or other wise it will submit the form.You want the submit button means you have to add one more button for dynamic action.

<input type="button" value="Submit" id="submit" onclick="javascript:add();"/>

edited Jul 25, 2016 at 8:09

answered Jul 13, 2016 at 12:54

Rajkumar R

1,0798 silver badges15 bronze badges

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

Comments

Ricardo Mota · Accepted Answer · 2016-07-13 12:57:06Z

0

You need stop submit like this:

 function add(){
 var text=document.createElement('input');
 var add=document.getElementById("Myform");
 text.setAttribute("type","text");
 text.setAttribute("name","BookName");
 add.appendChild(text);
 }

 <form action="new1.php" id="Myform" onsubmit="event.preventDefault();"> 
 <input type="submit" value="Submit" id="submit" onclick="javascript:add();"/>      <br/>

</form>

answered Jul 13, 2016 at 12:57

Ricardo Mota

1615 bronze badges

Comments

rejo · Accepted Answer · 2016-07-13 12:58:00Z

0

Try this plunker

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <form action="new1.php" id="Myform"> 
 <input type="button" value="Submit" id="submit" onclick="add();"/>      <br/>

</form>
  </body>

</html>

JS

function add(){
 var text=document.createElement('input');
 var add=document.getElementById("Myform");
 text.setAttribute("type","text");
 text.setAttribute("name","BookName");
 add.appendChild(text);
 }

answered Jul 13, 2016 at 12:58

rejo

3,3405 gold badges29 silver badges35 bronze badges

Collectives™ on Stack Overflow

Creating Dynamic Textbox , but code not working

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