Jquery表单在div中不工作_Jquery_Forms_Html

Jquery表单在div中不工作

jquery forms html

Jquery表单在div中不工作,jquery,forms,html,Jquery,Forms,Html,我有一个简单的表单，它将数据发送到一个php文件，这个文件用表单的数据更新数据库。当在页面中单击href链接加载表单时，表单正常工作，但当在div中使用jquery load（）加载表单时（此页面加载在另一个页面中嵌套的div中），表单不再发送数据、刷新文本输入或保持焦点。我尝试过“提交”、“直播”和“直播查询”，但在那个div中似乎都不起作用 <head> <script type="text/javascript" src="jquery.js"></scrip

我有一个简单的表单，它将数据发送到一个php文件，这个文件用表单的数据更新数据库。当在页面中单击href链接加载表单时，表单正常工作，但当在div中使用jquery load（）加载表单时（此页面加载在另一个页面中嵌套的div中），表单不再发送数据、刷新文本输入或保持焦点。我尝试过“提交”、“直播”和“直播查询”，但在那个div中似乎都不起作用

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$('.linkpage').live('click', function(e) {           
    var url = $(this).attr('href');
    $('#main').load(url);
    e.preventDefault();
});

$("form#DataToDB").livequery(function() {
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');
        $.ajax({ 
        type: "POST",  
        url: "updateDB.php",
        data: "User="+ escape(User) +"& Message="+ escape(Message),
        dataType: "html",
        scriptCharset: "utf-8",
        success: function() {
        alert("Message sent");
        }
        });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

});
</script>
</head>

<body>

<div id="menu">
<a href="Page1.php" class="linkpage">Page1</a>
<a href="Page2.php" class="linkpage">Page2</a>
</div>

<div id="main">
</div>

</body>


$（文档）.ready（函数（）{
$（'.linkpage'）.live（'click'，函数（e）{
var url=$（this.attr（'href'）；
$（'#main'）.load（url）；
e、 预防默认值（）；
});
$（“form#DataToDB”）.livequery（function（）{
var User=$（'#User'）.attr（'value'）；
var Message=$（'#Message'）.attr（'value'）；
$.ajax（{
类型：“POST”，
url:“updateDB.php”，
数据：“User=“+escape（User）+”和Message=“+escape（Message），
数据类型：“html”，
脚本字符集：“utf-8”，
成功：函数（）{
警报（“已发送消息”）；
}
});
$（“#Message”）.attr（“value”，“value”）；
$（'input#Message'）.focus（）；
返回false；
});
});

这是包含表单的页面（Page1.php或Page2.php），嵌套在上一页的“main”div中：

<form id="DataToDB" name="DataToDB">
<input type="hidden" name="User" id="User">
<input type="text" name="Message" id="Message">
<input type="submit" name="Send" value="Send">
</form>

我可以问一下jquery脚本中的错误在哪里吗

提前感谢

首先，您有一张未关闭的表格。将

放在表单的末尾

DataToDB

<form id="DataToDB" name="DataToDB">
<input type="hidden" name="User" id="User">
<input type="text" name="Message" id="Message">
<input type="submit" name="Send" value="Send">
</form>

单击“提交”按钮时，您将看到警报。

请尝试以下代码：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"              type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {

$("#DataToDB").submit(function() {
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');
    $.ajax({ 
    type: "POST",  
    url: "updateDB.php",
    data: "User="+ escape(User) +"& Message="+ escape(Message),
    dataType: "html",
    scriptCharset: "utf-8",
    success: function() {
    alert("Message sent");
    }
    });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

});
</script>
</head>

<body>

<div id="menu">
<a href="Page1.php" class="linkpage">Page1</a>
<a href="Page2.php" class="linkpage">Page2</a>
</div>

<div id="main">
<form id="DataToDB" name="DataToDB">
    <input type="hidden" name="User" id="User">
    <input type="text" name="Message" id="Message">
    <input type="submit" name="Send" value="Send">
</form>        
</div>

</body>


$（文档）.ready（函数（）{
$（“#DataToDB”）.submit（函数（）{
var User=$（'#User'）.attr（'value'）；
var Message=$（'#Message'）.attr（'value'）；
$.ajax（{
类型：“POST”，
url:“updateDB.php”，
数据：“User=“+escape（User）+”和Message=“+escape（Message），
数据类型：“html”，
脚本字符集：“utf-8”，
成功：函数（）{
警报（“已发送消息”）；
}
});
$（“#Message”）.attr（“value”，“value”）；
$（'input#Message'）.focus（）；
返回false；
});
});

啊。。。简单。将其插入Page1.php Page2.php

<form id="DataToDB" name="DataToDB">
<input type="hidden" name="User" id="User">
<input type="text" name="Message" id="Message">
<input type="submit" name="Send" value="Send">
</form>

<script type="text/javascript">

$("#DataToDB").submit(function() {                          
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');

$.ajax({ 
    type: "POST",  
    url: "updateDB.php",
    data: "User="+ escape(User) +"& Message="+ escape(Message),
    dataType: "html",
    scriptCharset: "utf-8",
    success: function() {
    alert("Message sent");
    }
    });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

</script>


$（“#DataToDB”）.submit（函数（）{
var User=$（'#User'）.attr（'value'）；
var Message=$（'#Message'）.attr（'value'）；
$.ajax（{
类型：“POST”，
url:“updateDB.php”，
数据：“User=“+escape（User）+”和Message=“+escape（Message），
数据类型：“html”，
脚本字符集：“utf-8”，
成功：函数（）{
警报（“已发送消息”）；
}
});
$（“#Message”）.attr（“value”，“value”）；
$（'input#Message'）.focus（）；
返回false；
});

发现有一个不相关的HTML“错误”导致表单无法提交，即在修复后，初始代码和建议都起作用。

您是否想省略结束表单标签

？不，这是一个输入错误，我已经更正了。谢谢你提醒我。我已经试过了。提交；当它在div外部时工作得很好，但当它在div内部时，当表单用jquery load（）加载到div内部后就不再工作了。代码可以工作，但我需要将主div中的内容加载到该div内的另一个页面上。Page1.php和Page2.php将包含该表单。我更新了代码，以便清楚地知道我需要做什么。

<form id="DataToDB" name="DataToDB">
<input type="hidden" name="User" id="User">
<input type="text" name="Message" id="Message">
<input type="submit" name="Send" value="Send">
</form>

<script type="text/javascript">

$("#DataToDB").submit(function() {                          
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');

$.ajax({ 
    type: "POST",  
    url: "updateDB.php",
    data: "User="+ escape(User) +"& Message="+ escape(Message),
    dataType: "html",
    scriptCharset: "utf-8",
    success: function() {
    alert("Message sent");
    }
    });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

</script>