即使我在提交按钮上使用 jQuery，页面也会重新加载[重复]答案

【问题标题】：Page getting reloading even after I am using jQuery on submit button [duplicate]即使我在提交按钮上使用 jQuery，页面也会重新加载[重复]
【发布时间】：2015-10-27 02:07:54
【问题描述】：

这是索引页：

<?php
       // Initialize variables to null.
         $nameError ="";
          $emailError ="";
             $genderError ="";
              $websiteError ="";
             // On submitting form below function will execute.


       if(isset($_POST['submit'])){
       if (empty($_POST["name"])) {
          $nameError = "Name is required";
         } else {
         $name = test_input($_POST["name"]);
         // check name only contains letters and whitespace
       if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameError = "Only letters and white space allowed";
      }
         }

          if (empty($_POST["lastname"])) {
         $nameError = "Name is required";
       } else {
        $name = test_input($_POST["lastname"]);
        // check name only contains letters and whitespace
        if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
          $nameError = "Only letters and white space allowed";
         }
     }



        if (empty($_POST["email"])) {
       $emailError = "Email is required";
     } else {
      $email = test_input($_POST["email"]);
        // check if e-mail address syntax is valid or not
     if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) {
       $emailError = "Invalid email format";
   }
         }


       if (empty($_POST["phonenumber"])) {
     $nameError = "phone number is required";
                     } else {
    $name1 = test_input($_POST["phonenumber"]);
      // check name only contains letters and whitespace
     if (!preg_match("/^[0-9 ]*$/",$name1)) {
      $phoneerror = "Only numbers and white space allowed";
       }
     }

        if (empty($_POST["section"])) {
         $selectError = "Choose the required field";
    } else {
          $select = test_input($_POST["section"]);
       }


          if (empty($_POST["section1"])) {
         $selectError = "Choose the required field";
         } else {
         $select = test_input($_POST["section1"]);
       }
        }

           function test_input($data) {
          $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
      return $data;
          }
       ?>

       <!DOCTYPE html>
       <html>
       <head>
         <title>Job Test</title>
         <link href="style.css" rel="stylesheet">
         <script src = "http://code.jquery.com/jquery-1.11.1.min.js">               </script>
       <script src = "script1.js"></script>

       </head>
       <body>
       <div class="maindiv">
       <div class="form_div">
        <div class="title">
       <h2>Find Out More About Computing</h2>
        </div>

       <form method="post" action="index.php">
         Name: <br />
        <input class="input" name="name" type="text" value="" required                  placeholder="Enter name">
      <span class="error">* <?php echo $nameError;?></span>
        <br />
       Last Name: <br />
        <input class="input" name="lastname" type="text" value="" required              placeholder="Enter  last name">
      <span class="error">* <?php echo $nameError;?></span>
              <br />
        E-mail: <br />
      <input class="input" name="email" type="text" value=""  required placeholder="Enter Email">
           <br />
         <span class="error">* <?php echo $emailError;?></span>
         <br />
         Mobile Phone Number: <br />
          <input class="input" name="phonenumber" type="text" value="" required placeholder="Enter  Phone Number">
        <span class="error">* <?php echo @$phoneerror;?></span>
         <br />


           Citizenship: <br />
           <select class="select"  name="section" required  >
     <option value="None" >None</option>
     <option value="Austrilian" >AUSTRALIA</option>
     <option value="india" >INDIA</option>
      <option value="others" >OTHERS</option>
        </select>         
      <span class="error">*<?php echo @$selectError;?></span>

      <br />

      Are You a Permanent Resident of Australia 
          <br />
       <select class="select"  name="section1" required  >
     <option value="None" >None</option>
     <option value="YES" >YES</option>
     <option value="NO" >NO</option>

         </select>        
      <span class="error">*<?php echo @$selectError;?></span>

       <br />


        <button class="submit" id="submit" name="submit" type="button" value="submit">Submit</button>
       </form>
      </div>
       </body>
         </html>

这是index.php形式的html页面

这是提交按钮上的 jQuery 函数。不要重新加载页面并指向submit.php

      $(document).ready(function() {


         $('#submit').click(function(e){
        //  e.preventDefault();
        // var page = $(this).attr('id');
            // $('#content').location.reload('content/submit.php');
       // alert('ok');
             });


       //function submit_form()
         //{
        //   var page = $(this).attr('id');
          window.location.reload('content/submit.php');
           //}

});

这个函数没有运行。当我按下提交按钮时，它会再次重新加载页面 index.php

提交.php

   <div id="content">
   <h2 style="color:#FF0000;"> Thanks For the Submission </h2> 
   </div>

请帮帮我..我被困在这里

【问题讨论】：

标签： javascript php jquery html forms

【解决方案1】：

正如您所说，这是一项工作测试，我不会为您编写代码，但会告诉您哪里出错了。首先，您的索引文件和验证文件需要是 2 个单独的文件。这样做的原因是我们将对 validate.php 文件进行 AJAX 调用，并且您希望它返回一个值而不返回索引页面的其余部分。

$('#submit').click(validateData());
                            
 function httpGet(theUrl){
	//FETCH Data From Server
	xmlhttp=new XMLHttpRequest();
	xmlhttp.open("GET", theUrl , false );
	xmlhttp.send();   
	return xmlhttp.responseText;
}
                 
                            
function validateData(){
    serverResponse="validate.php?"+httpGet$("#myForm").serialize();
    if(serverResonse=="Input Valid"){
        $("#responseDiv").html("HTML FOR SUCESSFULL VALIDATION");
         $("#formDiv").css("display","none");
      
      }else{
         $("#responseDiv").html("VALIDATION ERRORS");
        
        }
  
    $("#responseDiv").css("display","inline");
   
           
}

 <!DOCTYPE html>
       <html>
       <head>
         <title>Job Test</title>
         <link href="style.css" rel="stylesheet">
         <script src = "http://code.jquery.com/jquery-1.11.1.min.js">               </script>
       <script src = "script1.js"></script>

       </head>
       <body>
        
       <div class="maindiv">
         <div id="responseDiv"></div>
       <div id="formDiv" class="form_div">
        <div class="title">
       <h2>Find Out More About Computing</h2>
        </div>

       <form id='myForm'>
         Name: <br />
        <input class="input" name="name" type="text" value="" required                  placeholder="Enter name">
      <span class="error">* <?php echo $nameError;?></span>
        <br />
       Last Name: <br />
        <input class="input" name="lastname" type="text" value="" required              placeholder="Enter  last name">
      <span class="error">* <?php echo $nameError;?></span>
              <br />
        E-mail: <br />
      <input class="input" name="email" type="text" value=""  required placeholder="Enter Email">
           <br />
         <span class="error">* <?php echo $emailError;?></span>
         <br />
         Mobile Phone Number: <br />
          <input class="input" name="phonenumber" type="text" value="" required placeholder="Enter  Phone Number">
        <span class="error">* <?php echo @$phoneerror;?></span>
         <br />


           Citizenship: <br />
           <select class="select"  name="section" required  >
     <option value="None" >None</option>
     <option value="Austrilian" >AUSTRALIA</option>
     <option value="india" >INDIA</option>
      <option value="others" >OTHERS</option>
        </select>         
      <span class="error">*<?php echo @$selectError;?></span>

      <br />

      Are You a Permanent Resident of Australia 
          <br />
       <select class="select"  name="section1" required  >
     <option value="None" >None</option>
     <option value="YES" >YES</option>
     <option value="NO" >NO</option>

         </select>        
      <span class="error">*<?php echo @$selectError;?></span>

       <br />


        < button class="submit" id="submit" name="submit" type="button"             value="submit">Submit</button>
       </form>
      </div>
       </body>

现在在您的 validate.php 文件中，如果它返回“Input Valid”，那么您的 jquery 将显示 responseDiv 并将其 innerHTML 设置为您设置为成功验证 html 的任何内容。

【讨论】：

它仍然无法正常工作，兄弟......并重新加载到同一页面
从你的表单标签中移除你的方法和动作属性。
@komaldeepchahal 您的表单提交 url 是同一页面，因此您实际上将表单提交到它自己的 url。
你确定..这行得通吗？？
应该的。除了您的代码中还有其他问题。 .reload() 函数只接受真或假参数。如果您尝试导航，那么您必须使用 .location="URL" 以及页面中的#content 是什么？

【解决方案2】：

在你的提交按钮上试试这个：

$('#submit').click(function(e){
    e.preventDefault();
    var page = $(this).attr('id');
    $('#content').location.reload('content/submit.php');

});

此代码“e.preventDefault()”尝试停止提交按钮上的默认功能。希望它有效。

【讨论】：

我需要删除表单操作和方法吗？？？
没有不工作.......

【解决方案3】：

从以下位置更改您的按钮类型：

<input class="submit" id="submit" name="submit" type="submit"             value="submit">

到

<button type="button" onclick="submit_form()" class="submit" id="submit" name="submit">Submit</button>

和

function submit_form()
{
     // var page = $(this).attr('id');
     window.location.reload('content/submit.php');
}

【讨论】：

不要忘记 type="button" 几个浏览器默认 type="submit" 位于表单内的所有按钮上。
还是不行，.
看看我修改了什么。
好的，我也检查一下
再试一次...我把$('#content')改成window