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

时间:2015-08-18 15:46:32

标签: javascript php ajax

我已阅读并阅读并查看SO上的示例,并试图找到我的问题的答案,但似乎无法找到它,但是,这是我的特定问题的场景:

Main.php

根据搜索有一个搜索表单,它会在css的帮助下在页面左侧发布结果。

当您单击结果时,根据运行的某些SQL查询,它会检查该人是否已完成某个事件。如果他们没有我希望它在右侧发布一个表格来输入一些信息,因为如果它是你的第一次,与另一个php页面

Main.php

搜索表单
-------------------------------------------------- ---
结果发布了...... | Tabset.php w /另一个 ........................... |形式为第一次用户
........................... |
........................... |
........................... |
........................... |

为粗略的ASCII形式艺术道歉,只是想更好地了解最新情况。

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

     }
  });
});

2 个答案:

答案 0 :(得分:0)

您好重新加载的问题是当您按下提交类型按钮时触发提交事件而不是单击 请尝试:

 $(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;
  });
});

答案 1 :(得分:0)

您已定义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;
    });
});