jQuery函数问题
[英]jQuery function problems
问题描述
我无法正确执行此jquery函数。 当我单击“提交”表单时，仅显示前两个警报，然后重新加载页面。 因此，我再次单击表单的提交并重新加载了页面，然后显示其余的警报（从第三个警报开始），然后该功能运行正常。
结论：我需要单击两次表单提交而不是一次来执行该功能。
任何想法？ 谢谢。
JS代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
alert("enters script");
$(function () {
alert("enters jquery function");
$(".submit").click(function () {
alert("enters click submit function");
var name = $("#name").val();
var date = $("#date").val();
var dataString = 'name=' + name + '&date=' + date;
alert("saved variables");
if (name == '' || date == '') {
alert("enters if");
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
} else {
alert("enters else");
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function () {
alert("enters success");
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
refresh();
}
});
}
return false;
});
});
</script>
HTML代码：
<form method="post" name="form">
<ul>
<li>
Name <input id="name" name="name" type="text" />
</li>
<li>
Date <input id="date" name="date" type="date" />
</li>
</ul>
<div >
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div>
</form>
4 个解决方案
解决方案1
0 2014-02-14 17:05:52
使用event.preventdefault停止提交页面
解决方案2
0 2014-02-14 17:06:28
您的问题是使用submit按钮，它们具有一些默认行为，而不是您作为事件添加的行为。
替换为：
<input type="submit" value="Submit" class="submit" />
与：
<input type="button" value="Submit" class="submit" />
这个你工作的演示
除了将“提交”按钮更改为常规按钮之外，您还可以通过禁用默认行为并在表单节点上添加onsubmit来修复代码：
<form method="post" name="form" onsubmit="return false;">
<!--your stuff-->
</form>
解决方案3
0 2014-02-14 17:26:55
尝试这个：
<script type="text/javascript">
$（document）.ready（function（）{
$（“。submit”）。click（function（）{alert（“ en del en la funcion del clic del Submit”）;
var nombre = $("#nombre").val();
var fecha = $("#fecha").val();
var dataString = 'nombre='+ nombre + '&fecha=' + fecha;
alert("variables guardadas");
if(nombre=='' || fecha=='')
{
alert("entra en el if");
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
alert("entra en el else");
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function()
{
alert("entra en el success");
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
refresca();
}
});
}
return false;
});
}）;
解决方案4
0 已采纳 2014-02-17 20:03:24
首先，感谢大家的帮助。
最后，主要问题来自代码的其他部分。 在通过“ join.php”进行mysql插入后，我使用pjax（ https://github.com/thybag/PJAX-Standalone ）将表单替换为其他html文档（在本例中为page1.html）。 而且我没有正确调用jquery函数。
说明：您从page1.html开始，然后单击“转到第2页”（这将div“ content”替换为page2.html的正文）。 然后填写表格并提交。 当您单击提交时，激活jquery函数（将mysql.join.php插入其中），最后再次替换div“内容”。
解决方案（可行）：
page1.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="pjax-standalone.js"></script>
<script type="text/javascript">
pjax.connect({
'container': 'content',
'beforeSend': function(){console.log("before send");},
'complete': function(){console.log("done!");
if($("#button_pg_2").length)
{
$( document ).ready(function()
{
$(".submit").click(function()
{
var nombre = $("#name").val();
var fecha = $("#date").val();
var dataString = 'name='+ name + '&date=' + date;
if(name=='' || date=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax(
{
type: "POST",
url: "join.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
replace();
}
});
}
return false;
});
});
}
}
});
</script>
<script type="text/javascript">
function replace()
{
pjax.invoke('page1.html', 'content');
}
</script>
</head>
<body>
<div id="header">
This div never changes
</div>
<div id="content">
<a href="page2.html" data-pjax="content">Go To Page 2</a>
</div>
</body>
</html>
page2.html
<html>
<body>
<form method="post" name="form">
<ul>
<li>
Name <input id="name" name="name" type="text" />
</li>
<li>
Date <input id="date" name="date" type="date" />
</li>
</ul>
<div >
<input type="button" id="button_pg_2" value="submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div>
</form>
</body>
</html>
jQuery函数问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.