Javascript - cannot add dynamically button into a form

Question

I've a little problem with functions in javascript. I have a form in which I ask to a user to enter a question and an integer (I've one label and input for the question, one label and input for the integer).

If the user have several questions to ask, I have a button which can allows to create a question.

This is the html code :

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <form id="libre"></form>
    <script type="text/javascript" src="jquery-1.11.0.min.js"> </script>
    <script type="text/javascript" src="q_libre.js"> </script>
  </body>
</html>

And the js file :

function create_question(form,nb) {

      var lbl_q=document.createElement("label");
        lbl_q.setAttribute("id","lbl_q"+nb);
        var output_q=document.createTextNode("Enter your question : ");
        lbl_q.appendChild(output_q);

        var input_q = document.createElement("input");
        input_q.setAttribute("id","input_q"+nb);

        var lbl_w = document.createElement("label");
        lbl_w.setAttribute("id","lbl_w"+nb);
        var output_w = document.createTextNode("Maximum of words for the answer : ");
        lbl_w.appendChild(output_w);

        var input_w = document.createElement("input");
        input_w.setAttribute("id","input_w"+nb);


        form.appendChild(lbl_q);
        form.appendChild(input_q);
        form.appendChild(lbl_w);
        form.appendChild(input_w);

    }



    $(document).ready(function () {

        var nb_q = 0;
        var form=document.getElementById("libre");

        var but_create = document.createElement("button");
        but_create.setAttribute("id","create_b");
        var output_c = document.createTextNode("Create exercise");
        but_create.appendChild(output_c);

        var add_question = document.createElement("button");
        var text_add = document.createTextNode("Add questions");
        add_question.setAttribute("id","add_q");
        add_question.appendChild(text_add);
        add_question.onclick = function () { create_question(form,nb_q);};

        create_question(form,nb_q++);
        form.appendChild(add_question);
        form.appendChild(but_create);

    });

The problem is that the creation of label and input is in a function and when I click on the button "add question", I can see the new label and input but they immediately disappear !

I'm new in the Javascript world so someone have an idea to keep the new label and input ? Is it to have this code in a function ?

Thank's

And why do you include jQuery if you're not going to use it ? — adeneo
– adeneo, Commented Mar 11, 2014 at 17:00
read my answer. I think you should return false in the click event handler — Bellash
– Bellash, Commented Mar 11, 2014 at 17:14
add_question.onclick = function () { create_question(form,nb_q);return false;}; — Ankur Aggarwal
– Ankur Aggarwal, Commented Mar 11, 2014 at 17:16

Hieu Le · Accepted Answer · 2014-03-11 17:09:41Z

2

Inside a form without any input element with submit type, click a button will submit the form. In your case, the form element have no action property, so your page will be reload which cause the newly inserted elements "disappear".

To prevent the form submited when clicking a button, return false in the onclick event handler. Edit this line:

add_question.onclick = function () { create_question(form,nb_q);};

to:

add_question.onclick = function () { create_question(form,nb_q); return false;};

However, you can use jQuery to create new element in an easier way. Just study from its documentation.

answered Mar 11, 2014 at 17:09

Hieu Le

8,4351 gold badge36 silver badges55 bronze badges

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

Comments

Mike Edward Moras · Accepted Answer · 2014-03-11 17:34:48Z

0

You should return false

add_question.onclick = function () { 
    create_question(form,nb_q); 
    return false;
};

edited Mar 11, 2014 at 17:34

Mike Edward Moras

14.3k10 gold badges40 silver badges57 bronze badges

answered Mar 11, 2014 at 17:13

Bellash

8,2776 gold badges57 silver badges95 bronze badges

Collectives™ on Stack Overflow

Javascript - cannot add dynamically button into a form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related