javascript - 即使我在提交按钮上使用 jQuery，页面也会重新加载-6ren

javascript - 即使我在提交按钮上使用 jQuery，页面也会重新加载

转载作者：行者123 更新时间：2023-11-27 23:44:26

这是索引页:

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

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

最佳答案

正如您所说，这是一个工作测试，我不会为您编码，但会告诉您哪里出了问题。首先，您的索引文件和验证文件需要是两个单独的文件。原因是我们将对 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 的内容。

关于javascript - 即使我在提交按钮上使用 jQuery，页面也会重新加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33358812/

文章推荐： javascript - Highcharts map 未呈现，没有错误

文章推荐： javascript - .spread 带有数据重定向

javascript - 在父选项卡(页面)上显示叠加层，直到打开其所有子选项卡(页面)
假设我有父页面。当我单击“打印”时，会打开一个新选项卡(页面)以进行打印预览。我想要的是，当我单击“打印”时，父选项卡(页面)上应显示覆盖层，以停止进一步的工作，直到子选项卡关闭。 Because
javascript - 如何从 HTTPS 页面 POST 数据到 HTTP 页面
我知道这是不可能的，但我想我还是会问这个问题。我有一个 HTTPS 页面，并且正在动态创建一个表单。我想将表单发布到 HTTP 页面。在浏览器不弹出警告的情况下这可能吗？当我在 IE8 上执行此操作
javascript - 将 .aspx 页面 html 渲染/调用到另一个 .aspx 页面
在我的应用程序中，我实现了ajax 4.0客户端模板目前我的模板位于同一个.aspx页面上。 (例如 Main.aspx) 但我想将它们外部化。(即所有 HTML 都会放在另一个页面上) 为此，我使
javascript - 锁定/卡住导航栏/整个 html 页面，直到加载其他 html 页面
我目前正在构建自己的网络应用程序。在此应用程序的标题中有一个导航栏。我将相同的导航栏添加到我的所有 html 页面，以便在页面之间导航时保持可见，并将导航元素设置为事件到我现在所在的页面。我的
iis-7 - Windows 身份验证不适用于经典 ASP 页面(但适用于同一站点中的 ASP.Net 页面)
我们有一个在集成管道下运行的 IIS7 Intranet 站点，该管道主要是 ASP.Net，带有一些传统的经典 ASP 页面。该站点允许匿名访问大多数区域，但使用 Windows 身份验证来保护某些
c# - 如何将长 HTML 文件拆分为单独的相互链接的页面，例如页面 1、页面 2、页面 3
有一个要求，我需要根据 div 标签的高度超过 700 像素的条件将大型 HTML 页面拆分为多个页面。我还可以根据字数拆分页面。下面的示例根据 HTML 标签分割页面，而我需要根据 div 高度
html - 如何在不使用 jquery 的情况下在另一个 html 页面 div 中显示 html 页面
有两个 html 页面，如果在第一个页面中单击特定图像，它将转到第二个 html 页面。如果在第二个 html 页面上的任何地方单击它应该返回到第一页并将第二页完全显示在第一页的一个 div 中 1s
haskell - Servant 中的 Html 页面——如何结合 REST API 和静态 html 页面？
我有一个简单的 hello world Servant 应用程序。我需要向它添加一些静态或动态的 html 页面。我怎样才能做到这一点？在文档中没有提到它。注意我不想在 Haskell 代码中创建 h
javascript - jQuery 将外部 html 页面 <title> 插入另一个 html 页面
我有两个文件 index.html 和 index2.html。这两个文件都在本地机器上的同一目录中(无法访问 PHP 等)。我正在努力 Page Title 使用 jQuery 从 index.h
java - 为一个 Servlet 创建一个动态前端 JSP 页面，同时将 Servlet 的输出显示到 JSP 页面
假设我有一个 JSP 页面 index.jsp User id:
javascript - 页面 A 将值发布到页面 B，页面 B 使用 cURL 向页面 C 发送另一个帖子，并将响应返回到页面 A
我面临着一个对我来说非常陌生的情况。我会尽力让事情变得简单来解释它一步一步来。 1)在页面 A(用户表单)中，我从字段中获取一些值并将其作为 jQuery AJAX POST 发送到页面 B。这是主要
javascript - JQuery 函数点击 html 页面 1 上的按钮，影响 html 页面 2 的列
我正在尝试弄清楚如何从 buttons.html 获取用户按钮点击动态切换第二个列的可见性 userinput.html 。我正在使用 DataTables userinput.html表并认为我有
asp.net-mvc - angularjs 仅带有 cshtml 页面，而不是带有 web api 2 的 html 页面
我有asp。净 mvc4 项目。 Angularjs 已集成。我已经按照以前的要求构建了 HTML 页面和 WEB API 2。现在出于某种原因，我必须使用 CSHTML 页面。以前我只有 web
WordPress 页面 - 未找到页面
我的网站包含大约 18 个不同的页面。以管理员身份登录后，我单击“页面”。我看到了以下内容 All (20) | Mine (19) | Published (19) | Draft (1) No
Haskell "man"页面？
Haskell 中每个函数都有手册页吗？换句话说，我可以在某处输入 man fst 并获取有关该函数的手册或帮助页面吗？我发现大量的功能势不可挡! 我正在使用 GHC 和 GHCi。最佳答案我不知
Github 页面 - 禁用除单个站点之外的所有站点的自定义域重定向？
我一直在用github pages很长一段时间以来，并使用自定义域重定向功能来重定向我的 user website来自 prahladyeri.github.io到我自己的域名 https://www
显示旧代码的 Github 页面
我对 Github 有一个基本的了解:我知道如何创建、添加、提交、推送和克隆存储库。我也开始探索 Github 页面来托管我的项目。我的最新项目于 3 月开始并将其推送到 gh-page。从那以后，我
Airflow Ooops 页面
在尝试查看日志时，Airflow 会抛出一个带有以下消息的 oops 页面: File "/Users/user/.pyenv/versions/3.5.2/lib/python3.5/locale.
GitHub 页面 - 网址重写支持
我已经按照此处列出的步骤 (https://pages.github.com/) 为我正在处理的网站设置了一个 GitHub 页面我设置的站点当前托管在 IIS 下，并使用 URL Rewrite
将域重定向到 Openshift 页面
我想将我的 domain.com 重定向到 openshift 页面 (openshift-app.rhcloud.com)。我已经按照描述完成了 here它有效。唯一的问题是，在任何网站上，我都不会

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 即使我在提交按钮上使用 jQuery，页面也会重新加载