使用Ajax提交没有刷新页面的表单，仍在刷新我的页面

Question

我已经阅读并阅读了有关SO的示例，并试图找到我的问题的答案，但似乎找不到，但是，这是我特定问题的场景：

Main.php

在顶部有一个搜索表单，基于搜索，它在CSS的帮助下将结果发布在页面的左侧。

当您单击某个结果时，它会基于运行的某些sql查询进行检查，以查看该人员是否已完成某个事件。 如果他们不是我希望它在右侧的表单上输入一些信息，因为这是您的第一次，那是另一个php页面

Main.php

搜索表格
-------------------------------------------------- ---
结果发布... | 带另一个的Tabset.php
.................................... | 初次使用者表格
.................................... |
.................................... |
.................................... |
.................................... |

为粗略的ASCIIish类型的艺术而道歉，只是为了更好地了解正在发生的事情。

Tabset.php

所以在tabset php页面中，我有以下代码：

    <div id="main_form">
        <h3>Please enter the following:</h3>
        <FORM id="form1" METHOD="POST">
            <INPUT TYPE = "text" id = "someVAR1"  placeholder="someVAR1"/> / 
            <INPUT TYPE = "text" id = "someVAR2"  placeholder="someVAR2"/>
            <INPUT TYPE = "submit" id = "submit" VALUE = "ok"/>
        </FORM>
    </div>
    <?php

    if($_POST)
    {
        $someVAR1=$_POST['someVAR1'];
        $someVAR2=$_POST['someVAR2'];
    }

refreshform.js

$(document).ready(function() {
  $("#submit").click(function(e) {
    e.preventDefault();
    var someVAR1= $("#someVAR1").val();
    var someVAR1= $("#someVAR2").val();

    if(someVAR1=='' || someVAR2=='')
    {
      alert("Some Fields are Blank....!!! Please enter something!!!");
    }
    else
    {
      $.ajax({
        type: "POST",
        url: "Tabset.php",
        success: function(){
          $('#form1').fadeOut(200).hide();
          $('.success').fadeIn(200).show();
          $('.error').fadeOut(200).hide();
          $('#form1')[0].reset();
        }
      });
    }
    return false;
  });
});

当我单击提交按钮时，它没有捕获到字段为空并且仍然刷新了我的main.php页面

任何帮助将不胜感激...

我也对我的JS进行了尝试，结果相同：

$(document).ready(function(){  
  $("#submit").click(function(){
    var someVAR1= $("#someVAR1").val();
    var someVAR2= $("#someVAR2").val();
    //alert(sBP);

    if(someVAR1==''|| someVAR2==''){
      alert("Some Fields are Blank....!!! Please enter something!!!");    
    }
    else{
      alert("Resetting data now...");
      $('#form')[0].reset(); //To reset form fields

     }
  });
});

Answer 1

嗨，您的重载问题是当您按下提交类型按钮时，触发了提交事件，而不是单击“请尝试：

 $(document).ready(function() {
  $("#submit").submit(function(e) {
    e.preventDefault();
    var someVAR1= $("#someVAR1").val();
    var someVAR1= $("#someVAR2").val();

    if(someVAR1=='' || someVAR2=='')
    {
      alert("Some Fields are Blank....!!! Please enter something!!!");
    }
    else
    {
      $.ajax({
        type: "POST",
        url: "Tabset.php",
        success: function(){
          $('#form1').fadeOut(200).hide();
          $('.success').fadeIn(200).show();
          $('.error').fadeOut(200).hide();
          $('#form1')[0].reset();
        }
      });
    }
    return false;
  });
});

Answer 2

您有someVAR1定义了一些someVAR1 。 最好使用=== 。 小提琴： http : //jsfiddle.net/Twisty/3o9bjhyg/

$(document).ready(function () {
    $("#submit").click(function (e) {
        e.preventDefault();
        var someVAR1 = $("#someVAR1").val();
        var someVAR2 = $("#someVAR2").val();

        if (someVAR1 === '' || someVAR2 === '') {
            alert("Some Fields are Blank....!!! Please enter something!!!");
        } else {
            $.ajax({
                type: "POST",
                url: "Tabset.php",
                success: function () {
                    $('#form1').fadeOut(200).hide();
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                    $('#form1')[0].reset();
                }
            });
        }
        return false;
    });
});