即使我在提交按钮上使用jQuery后,页面也会重新加载

时间:2015-10-27 02:07:54

标签: javascript php jquery html forms

这是索引页面:

<?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

submit.php

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

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

3 个答案:

答案 0 :(得分:1)

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

&#13;
&#13;
$('#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");
   
           
}
&#13;
 <!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>
&#13;
&#13;
&#13;

现在在您的validate.php文件中,如果它返回&#34;输入有效&#34;那么你的jquery将显示responseDiv并将其innerHTML设置为你设置为成功验证html的任何内容。

答案 1 :(得分:0)

从以下位置更改按钮类型:

<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');
}

答案 2 :(得分:0)

在提交按钮上尝试此操作:

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

});

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