CODEWITHSUNDEEP
javascripthtml
Patrick Maia
Patrick Maia

Reputation: 49

HTML/Javascript printing a form on click event

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>

Upvotes: 0

Views: 101

Answers (2)

anni
anni

Reputation: 288

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

Upvotes: 0

James Mason
James Mason

Reputation: 4296

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/

Upvotes: 1

Related Questions