HTML/Javascript在点击事件时打印表单

HTML/Javascript printing a form on click event

本文关键字：事件 打印 表单 Javascript HTML      更新时间：2023-09-26

我的HTML文件中有这个脚本

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

我想要打印在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>

我将表单代码粘贴在引号之间，但是当我点击按钮时，什么也没有发生。我做错了什么?

div代码:

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

按钮:

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

首先，确保您为按钮引用了正确的ID。addTeachers和addTeacher不一样

第二，确保引号正确并转义换行符。任何一个错误都会导致语法错误

下面是一个工作示例:http://jsfiddle.net/2AMg4/1/

这里你也可以使用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>

这里是working code

相关文章：