HTML/Javascript printing a form on click event

Question

I have this script on my HTML file

<script type="text/javascript">
    $(document).ready(function addTeacher() {
        $("#addTeacher").click(function addTeacher() {
            $('#conteudo').html("FORM CODE HERE");
        });
    }); 
</script>

The form i want printed on the div #addTeacher:

<form  method="post" action="auth.php" role="form">

    <div class="form-group">
        <input type="text" name="login" id="login" class="form-control" placeholder="Login">
    </div>

    <div class="form-group">
        <input type="password" name="senha" id="senha" class="form-control" placeholder="Senha">
    </div>

    <input type="submit" value="Login" class="btn btn-success" />

</form>

I paste the form code between the quotation marks but when i click the button, nothing happens. What am i doing wrong?

The div code:

<div class="container" id="conteudo">
  <div class="row">
  </div>
</div>

The button:

 <button type="button" id="addTeachers" class="btn btn-primary">Adicionar Professor</button>

Either of the elements referred in the script can't be found from your HTML. — Teemu
– Teemu, Commented May 13, 2014 at 4:35
I'm sorry, i forget to add the div code <div class="container" id="conteudo"> <div class="row"> </div> </div> — Patrick Maia
– Patrick Maia, Commented May 13, 2014 at 4:40
@PatrickMaia Please edit your question to provide the additional HTML that is missing from it. Don't paste it in the comments. — JLRishe
– JLRishe, Commented May 13, 2014 at 4:50

James Mason · Accepted Answer · 2014-05-13 04:58:10Z

1

First, make sure you're referencing the right ID for your button. addTeachers is not the same as addTeacher.

Second, make sure you get your quote marks right and escape your line breaks. Getting either wrong will cause a syntax error.

Here's a working example: http://jsfiddle.net/2AMg4/1/

answered May 13, 2014 at 4:58

James Mason

4,3062 gold badges25 silver badges26 bronze badges

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

Comments

anni · Accepted Answer · 2014-05-13 15:41:30Z

here you can also do this with javascript:

<script type="text/javascript">
    var add = function(){

        var parent = document.getElementById("row");

    var form1 = document.createElement("form");
        form1.setAttribute("method","post");
        form1.setAttribute("action","auth.php");
        form1.setAttribute("role","form");

    var form_groupe = document.createElement("div");
        form_groupe.setAttribute("class","form-groupe");

    var form_groupe2 = document.createElement("div");
        form_groupe.setAttribute("class","form-groupe");



    var login = document.createElement("input");
        login.setAttribute("type","text");
        login.setAttribute("name","login");
        login.setAttribute("id","login");
        login.setAttribute("class","form-controll");
        login.setAttribute("placeholder","login");

    var pass = document.createElement("input");
        pass.setAttribute("type","password");
        pass.setAttribute("name","senha");
        pass.setAttribute("id","senha");
        pass.setAttribute("class","form-controll");
        pass.setAttribute("placeholder","Senha");   

    var submit = document.createElement("input");   
        submit.setAttribute("type","submit");
        submit.setAttribute("name","login");
        submit.setAttribute("class","btn btn-success");

    form_groupe.appendChild(login);
    form_groupe2.appendChild(pass); 
    form1.appendChild(form_groupe);
    form1.appendChild(form_groupe2);    
    form1.appendChild(submit);  
    parent.appendChild(form1);  
};
</script> 

<div class="container" id="conteudo">
  <div class="row" id="row">
  </div>
</div>
 <button type="button" id="addTeachers" class="btn btn-primary" onclick="add();">Adicionar Professor</button>

here is the working code

Collectives™ on Stack Overflow

HTML/Javascript printing a form on click event

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