Question

我使用下面的代码自动提交表单而不刷新，但问题是当我在表单字段中使用手动提交按钮并提交它只是工作正常但自动提交刷新。我想提交表单并将数据存储在mysql中。手动提交和自动submissin数据存储，但页面刷新与自动提交，我不想

<script type="text/javascript">
window.onload = function() {
  setTimeout('document.form1.submit()',10000);
}
</script>

<script type="text/javascript" >
$(function() {
$(".button").click(function() {

var searchBox = $("#searchBox").val();
var dataString = 'searchBox='+ searchBox ;
if(searchBox=='')
{
   $('.success').fadeOut(200).hide();
   $('.error').fadeOut(200).show();
}
else
{
   $.ajax({
   type: "POST",
   url: "ytitest1.php",
   data: dataString,
   success: function(){
   $('.success').fadeIn(200).show();
   $('.error').fadeOut(200).hide();
}
});
}
return false;
});
});


 </script>

这是实时链接http://way2enjoy.com/try/k/ytitest1.php

我只想要自动提交，但页面不应该刷新

Answer 1

你的.click函数应该有e参数然后添加

e.preventDefault();

在你的职能部门

$(function() {
$(".button").click(function(e) {
e.preventDefault(); 
var searchBox = $("#searchBox").val();
var dataString = 'searchBox='+ searchBox ;
if(searchBox=='')
{
   $('.success').fadeOut(200).hide();
   $('.error').fadeOut(200).show();
}
else
{
   $.ajax({
   type: "POST",
   url: "ytitest1.php",
   data: dataString,
   success: function(){
   $('.success').fadeIn(200).show();
   $('.error').fadeOut(200).hide();
}
});
}
});
});

Answer 2

    <script type="text/javascript" >
    $(function() {
        $("form").submit(function() {
            var searchBox = $("#searchBox").val();
            var dataString = 'searchBox='+ searchBox ;
            if(searchBox=='')
            {
                $('.success').fadeOut(200).hide();
                $('.error').fadeOut(200).show();
            }
            else
            {
                $.ajax({
                    type: "POST",
                    url: "ytitest1.php",
                    data: dataString,
                    success: function(){
                        $('.success').fadeIn(200).show();
                        $('.error').fadeOut(200).hide();
                    }
                });
            }
            return false;
        });
    });
     </script>

当您自动提交表单onsubmit事件被触发时，不要单击

Answer 3

这就是您所需要的，我已经包含了整个代码供您参考。

这个例子将表单本身绑定到ajax调用，当它被调用时，表单操作什么都不做，只处理jquery。适用于自动呼叫或手动呼叫。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </head>
    <body>
        <form id="myform" name="myform" action="#NULL" method="POST">
            <input type="text" name="myname">
            <input type="submit">
        </form>

        <script>
            $(document).ready(function() {
               setTimeout(function() {
                   $('#myform').submit();
               }, 1000);
               $('#myform').submit(function(e) {
                  e.preventDefault();
                  window.alert('Do work here.'); 
               }); 
            });
        </script>
    </body>
</html>

以下是jQuery .submit（）处理程序的文档：http://api.jquery.com/submit/，其中包含有关.preventDefault（）的信息。

ajax jquery自动表单提交问题

3 个答案: