Javascript 网站上的动态表单
嗨，我正试图在按下“编辑”按钮时显示表单，然后在按下表单的“保存”按钮后，我想编辑我的数据库并显示新信息。我需要在不刷新页面的情况下执行此操作。我不熟悉jquery，但下面是我到目前为止所写的内容，然而，event.preventDefault（）；函数因某种原因不起作用，窗体操作已运行。任何关于我的代码失败原因的帮助都将不胜感激，谢谢Javascript 网站上的动态表单,javascript,jquery,ajax,forms,Javascript,Jquery,Ajax,Forms,嗨，我正试图在按下“编辑”按钮时显示表单，然后在按下表单的“保存”按钮后，我想编辑我的数据库并显示新信息。我需要在不刷新页面的情况下执行此操作。我不熟悉jquery，但下面是我到目前为止所写的内容，然而，event.preventDefault（）；函数因某种原因不起作用，窗体操作已运行。任何关于我的代码失败原因的帮助都将不胜感激，谢谢 <!doctype html> <html lang="en"> <head> <!-- Irrelevant scr
<!doctype html>
<html lang="en">
<head>
<!-- Irrelevant scripts from the site go here -->
</head>
<body>
<!-- Lots of other code from the site is here -->
<div id="jqueryFunction"></div>
<script text="text/javascript">
function checkEdit(ID){
//Check the fields make sure they're not empty
return true;
}
</script>
<script text="text/javascript">
function editV(ID, titleOld, descOld){
document.getElementById("divForm" + ID).innerHTML =
"<form name=\"editDiv" + ID + "\" id=\"editDiv" + ID + "\" onsubmit=\"return checkEdit(" + ID + ");\" action=\"editvid.php\" method=\"POST\">" +
"<input type=\"hidden\" name=\"divID\" id=\"divID\" value=\"" + ID + "\"/>" +
"<input type=\"text\" name=\"titleNew" + ID + "\" id=\"titleNew" + ID + "\" value=\"" + titleOld + "\"/><br>" +
"<textarea name=\"descNew" + ID + "\" id=\"descNew" + ID + "\">" + descOld + "</textarea><br>" +
"<input type=\"submit\" value=\"Save\" class=\"alt_btn\">" +
"</form>";
document.getElementById("jqueryFunction").innerHTML =
"<script src=\"js/jquery-1.5.2.min.js\" type=\"text/javascript\"><\/script>" +
"<script>" +
"$(function(){" +
"$('form[name=\"editDiv" + ID + "\"]').on('submit', function(event){" +
"event.preventDefault();" +
"var form = this;" +
"$.ajax({" +
"url: $(form).attr('action')," +
"type: \"POST\"," +
"data: {divID:$(form.divID).val(), titleN:$(form.titleNew).val(), descN:$(form.descNew).val()}," +
"success: function (response) {" +
"alert('response');" +
"}" +
"});" +
"});" +
"});" +
"<\/script>";
}
</script>
</body>
函数检查编辑（ID）{
//检查字段，确保它们不是空的
返回true；
}
函数editV（ID，titleOld，descOld）{
document.getElementById（“divForm”+ID）.innerHTML=
"" +
"" +
“
”+
“+descOld+”
”+
"" +
"";
document.getElementById（“jqueryFunction”）.innerHTML=
"" +
"" +
“$（函数（）{”+
$（'form[name=\'editDiv'+ID+“\”]'）。在（'submit'，函数（事件）{+
“event.preventDefault（）；”+
“变量形式=此；”+
“$.ajax（{”+
“url:$（表单）.attr（'action'），”+
类型：\'POST\'，'+
数据：{divID:$（form.divID.val（），titleN:$（form.titleNew.val（），descN:$（form.descNew.val（））+
“成功：功能（响应）{”+
“警报（‘响应’）；”+
"}" +
"});" +
"});" +
"});" +
"";
}
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style>
.editForm {
display:none;
}
</style>
<script>
</script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.edit').click(function() {
$('.editForm').fadeIn();
});
$('a.submit').click(function() {
// get parents id
var parentId = $(this).parent().parent().parent().attr('id');
$.ajax({
type: "POST",
url: "some.php",
data: { divId: parentId, aName: $('.aName').val() }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
});
</script>
<body>
<div id="anId">
<a class="edit">edit</a>
<form class="editForm">
<div>
<input type="text" class="aName" />
<a href="#" class="button submit">Submit</a>
</div>
</form>
</div>
</body>
</html>
试验
.编辑表格{
显示：无；
}
$（文档）.ready（函数（）{
$（'.edit'）。单击（函数（）{
$（'.editForm'）.fadeIn（）；
});
$（'a.submit'）。单击（函数（）{
//获取家长id
var parentId=$（this.parent（）.parent（）.parent（）.attr（'id'）；
$.ajax({
类型：“POST”，
url:“some.php”，
数据：{divId:parentId，aName:$（'.aName'）.val（）}
}).done（函数（msg）{
警报（“保存的数据：“+msg”）；
});
});
});