2014-12-03 78 views
-1

我想用一个按钮来创建一个表单,要求用户输入并将其发送到php文件而无需刷新,但是在我将表单附加到html文件并试图提交它之后,java函数没有跑。jQuery追加表格

,我用于追加形式的函数:

function reporterror(){ 
if (document.getElementById("report")){ 
    console.log("Still have report"); 
}else{ 
    $("<form id='report' action='report.php' method='post'><div ><h2 style='text-align:center;'>Report Error</h2><h3>Description:</h3><textarea rows='10' cols='60' name='report' id='description' placeholder='No more than 500 words' style='border-radius:10px;border:1px solid #000;'></textarea><input type='submit' style='border-radius:5px;'></input><input type='button' onclick='reportclose()' value='Close' style='border-radius:5px;'></input></div></form>").appendTo("#content"); 
} 

};

是didnt运行的函数:

$(document).ready(function() { 
$("#report").on("submit",function(event){ 
    event.preventDefault(); 
    if (document.getElementById("description").value==""){ 
     $(".warning").remove(); 
     $("#description").after("<p class='warning' style='color:red'>Description is required</p>"); 
     console.log("yes"); 
    }else{ 

     $.ajax({ 
       type:"POST", 
       url:"report.php", 
       data:$("#report").serialize(), 
       success:function(){ 
        console.log("Great"); 
        document.getElementById("report").innerHTML="<h2>Thank You for helping us to improve!</h2><br><p>Your message have been successfully sented to this awesome website!</p><input type='button' onclick='reportclose()' value='Close' style='border-radius:5px;'></input>"; 
       } 
     }) 

    } 
}); 

})

这是它看起来像现在:http://cs20p.site11.com/

+0

我想你需要委托onsubmit事件:http://learn.jquery.com/events/event-delegation/但你怎么称'reporterror()'方法? – 2014-12-03 20:54:18

回答

0

尝试$("#report").on("submit",function(event){

改变这一行$(document).on("submit", ".report", function(event){

和这$("<form id='report'$("<form class='report' id='report'

问题出现,因为您使用id而不是类。 Id元素可能只有一个

+0

问题出现是因为您使用了id而不是class。 Id元素可以只有一个 – Oleg 2014-12-03 21:00:04