Fatal编程技术网
  • javascript/
  • Javascript 为什么提交表单后我的页面会刷新？

Javascript 为什么提交表单后我的页面会刷新？

javascript php html forms

Javascript 为什么提交表单后我的页面会刷新？,javascript,php,html,forms,Javascript,Php,Html,Forms,问题 我将尝试在不使事情复杂化的情况下包含尽可能多的信息，但我有一个问题，当我提交表单时，页面会刷新，从而关闭打开表单的选项卡。然后，用户需要再次单击选项卡以查看反馈 背景信息。 我有一个使用JavaScript打开和关闭“选项卡”（div）的网页，在其中一个选项卡上，我有一个表单，将用户输入的数据发布到php脚本，然后将数据发送到电子邮件地址，然后重定向回原始页面。但是，当脚本重定向回页面时，选项卡将关闭，从而使用户重新单击选项卡以再次打开它，以查看来自脚本的自动反馈 我检查的内容 我已经检查

问题

我将尝试在不使事情复杂化的情况下包含尽可能多的信息，但我有一个问题，当我提交表单时，页面会刷新，从而关闭打开表单的选项卡。然后，用户需要再次单击选项卡以查看反馈

背景信息。

我有一个使用JavaScript打开和关闭“选项卡”（div）的网页，在其中一个选项卡上，我有一个表单，将用户输入的数据发布到php脚本，然后将数据发送到电子邮件地址，然后重定向回原始页面。但是，当脚本重定向回页面时，选项卡将关闭，从而使用户重新单击选项卡以再次打开它，以查看来自脚本的自动反馈

我检查的内容

我已经检查过了，它不是导致刷新的重定向，因为当表单发布到自身时仍然会发生这种情况

有人有什么想法吗

这是表单的HTML，位于查询“选项卡”中。

           <div class='content one'>
      <div id="contact-form" class="clearfix">
        <P>Quick And Easy!</P>
        <br/>
        <P>Fill out our super swanky contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry.</P>
        <br/>
        <?php
            //init variables
            $cf = array();
            $sr = false;

            if(isset($_SESSION['cf_returndata'])){
                $cf = $_SESSION['cf_returndata'];
                $sr = true;
            }
            ?>
        <ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
          <li id="info">There were some problems with your form submission:</li>
          <?php 
                if(isset($cf['errors']) && count($cf['errors']) > 0) :
                    foreach($cf['errors'] as $error) :
                ?>
          <li><?php echo $error ?></li>
          <?php
                    endforeach;
                endif;
                ?>
        </ul>
        <p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'invisible' : ''; ?>">Now sit back and relax while we go to work on your behalf, we'll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or isaaclayne@southwestcarfinder.co.uk</p>
         <form method="POST" action="process.php">
          <label for="enquiry">Make: </label>
           <select id="make" name="make">
             <option value="Ford" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['make'] == 'Ford') ? "selected='selected'" : '' ?>>Ford</option>
             <option value="BMW" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['make'] == 'BMW') ? "selected='selected'" : '' ?>>BMW</option>
             <option value="Vauxhall" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['make'] == 'Vauxhall') ? "selected='selected'" : '' ?>>Vauxhall</option>
           </select>
           <label for="Model">Model: <span class="required">*</span></label>
           <input type="text" id="model" name="model" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['model'] : '' ?>" placeholder="Model of Car" required autofocus />
           <label for="name">Name: <span class="required">*</span></label>
           <input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required autofocus />
           <label for="email">Email Address: <span class="required">*</span></label>
           <input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required />
           <label for="telephone">Telephone: </label>
           <input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />
           <label for="Budget">Your Budget: </label>
           <select id="enquiry" name="enquiry">
             <option value="300 or less" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'General') ? "selected='selected'" : '' ?>>£300 or less</option>
             <option value="400 or more" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Sales') ? "selected='selected'" : '' ?>>£400</option>
             <option value="500 or more" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Support') ? "selected='selected'" : '' ?>>£500 or more</option>
           </select>
           <label for="message">Additional Info: <span class="required">*</span></label>
           <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>
           <span id="loading"></span>
           <input type="submit" value="Find My Car!" id="submit-button" />
           <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
         </form>
         <?php unset($_SESSION['cf_returndata']); ?>
       </div>
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
       <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-    1.5.1.min.js"%3E%3C/script%3E'))</script> 
       <script src="js/plugins.js"></script> 
       <script src="js/script.js"></script> 
       <!--[if lt IE 7 ]>
     <script src="js/libs/dd_belatedpng.js"></script>
     <script> DD_belatedPNG.fix('img, .png_bg');</script>

     <![endif]--> 
     </div>



 又快又简单




 请填写下面的超级时尚联系表与我们联系！请提供尽可能多的信息，以便我们帮助您进行查询。




提交表单时，您正在发出POST请求。POST请求在默认情况下通过浏览器发送给服务器的HTTP请求进行传输，因此浏览器需要加载新数据以刷新站点


如果希望浏览器不刷新，则需要在客户端使用Javascript执行AJAX请求。您可以使用jQuery来完成此操作。
提交表单时，您正在发出POST请求。POST请求在默认情况下通过浏览器发送给服务器的HTTP请求进行传输，因此浏览器需要加载新数据以刷新站点

如果希望浏览器不刷新，则需要在客户端使用Javascript执行AJAX请求。您可以使用jQuery来实现这一点。
试试这个


$('form').submit(function(e)
{
e.preventDefault();
})


试试这个


$('form').submit(function(e)
{
e.preventDefault();
})



谢谢@saman和@gpopoteur

你的答案很好，很有用，只是我的测试服务器不起作用

这就是我们最终要做的


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"    type="text/javascript"></script><script>

$('#form1').submit(function(e)
{
event.preventDefault();
 $.ajax({
     type : 'POST',
     url : 'process.php',
     data : $(this).serialize(),
     success : function(response) {

     }
   });
});




$（'#form1'）。提交（函数（e）
{
event.preventDefault（）；
$.ajax({
键入：“POST”，
url:'process.php'，
数据：$（this）.serialize（），
成功：功能（响应）{
}
});
});



我确实发现脚本没有返回任何内容。E.I是否有任何验证信息或返回的数据？没有太大问题，我会创造一个解决办法。再次感谢
谢谢@saman和@gpopoteur

你的答案很好，很有用，只是我的测试服务器不起作用

这就是我们最终要做的


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"    type="text/javascript"></script><script>

$('#form1').submit(function(e)
{
event.preventDefault();
 $.ajax({
     type : 'POST',
     url : 'process.php',
     data : $(this).serialize(),
     success : function(response) {

     }
   });
});




$（'#form1'）。提交（函数（e）
{
event.preventDefault（）；
$.ajax({
键入：“POST”，
url:'process.php'，
数据：$（this）.serialize（），
成功：功能（响应）{
}
});
});



我确实发现脚本没有返回任何内容。E.I是否有任何验证信息或返回的数据？没有太大问题，我会创造一个解决办法。再次感谢
为什么您希望它不会刷新页面？如果希望在不刷新页面的情况下向服务器提交数据，则需要使用AJAX。默认情况下，标准的
表单
调用标准的
POST
会加载新页面上下文。表单的行为是这样的-它们刷新页面。如果您不想刷新，那么应该在提交时绑定ajax调用，并防止常见行为。或者我遗漏了什么？我猜我没有正确地回答问题，没有正确地思考，我应该知道表格会刷新。我的问题的真正目的是试图消除/停止刷新的后果。我将研究您提到的Ajax方法David。谢谢。你为什么希望它不会刷新页面？如果希望在不刷新页面的情况下向服务器提交数据，则需要使用AJAX。默认情况下，标准的
表单
调用标准的
POST
会加载新页面上下文。表单的行为是这样的-它们刷新页面。如果您不想刷新，那么应该在提交时绑定ajax调用，并防止常见行为。或者我遗漏了什么？我猜我没有正确地回答问题，没有正确地思考，我应该知道表格会刷新。我的问题的真正目的是试图消除/停止刷新的后果。我将研究您提到的Ajax方法David。谢谢。好吧，看来使用你提到的代码，表单就完全停止工作了，HTML5验证也停止了，而且它是deff，没有发布到Php脚本中。不过我会更深入地研究这个函数。好吧，似乎使用您提到的代码，表单根本停止工作，HTML5验证已经停止，并且它没有发布到Php脚本中。不过我会更深入地研究这个函数。好的，谢谢你的回复。非常有用，我会试试你现在提到的。好的，谢谢你的回复。非常有用，我将试试你现在提到的。