Ajax 表单 onsubmit 停止刷新答案

【问题标题】：Ajax form onsubmit stop refreshAjax 表单 onsubmit 停止刷新
【发布时间】：2014-05-07 19:06:19
【问题描述】：

我有一个页面让我们称之为“X.php”，我使用它调用另一个页面“Y.php”和 xmlhttp.open() 函数。

目前我在 Y.php 页面中有一个表单，我想阻止它刷新，因为一旦我点击提交按钮，我的表单就会消失。

我在 X.php 页面中尝试使用 Jquery 'event.preventDefault()'，但还是没有用。

有人知道解决办法吗？

while($row = mysql_fetch_array($query)) {

            echo "    <h2>Update your personal settings</h2>

            <form action='' id='target' method='POST'>
                Surname: <input type=text name='lid_voornaam' value='".$row['lid_voornaam']."'><br/>
                Name: <input type=text name='lid_naam' value='".$row['lid_naam']."'><br/>
                Email: <input type=text name='lid_email' value='".$row['lid_email']."'><br/>    
                <input type='submit' value='Whatever' id='test1'/> 
            </form>";
    }

Java 脚本：

<script type="text/javascript">
$(document).ready(function(){
   $("#test1").click(function(event){
    event.preventDefault();
  });

});

【问题讨论】：

您忘记发布 javascript
我的错，我添加了 JS

标签： php ajax forms

【解决方案1】：

在您的表单标签中。添加onSubmit="return false;

<form action='' id='target' method='POST' onSubmit="return false;>
   Surname: <input type=text name='lid_voornaam' value='".$row['lid_voornaam']."'><br/>
   Name: <input type=text name='lid_naam' value='".$row['lid_naam']."'><br/>
   Email: <input type=text name='lid_email' value='".$row['lid_email']."'><br/>    
   <input type='submit' value='Whatever' id='test1'/> 
</form>

正如@andrew 提到的。您的 php 脚本将生成多个 <form> 标签，它们都有相同的 id id='target'。这可能会导致您的页面出现问题，因为这不是有效的 html

【讨论】：

【解决方案2】：

我原以为您发布的 javascript 应该可以实际工作。

但如果这是您的实际代码，我怀疑它会失败，因为所有表单上的所有提交按钮都有 id='test1' 并且 id 应该是唯一的

试试这样：

$i=0;

while($row = mysql_fetch_array($query)) {

            echo "    <h2>Update your personal settings</h2>

            <form action='' id='target."$i++".' method='POST'>
                Surname: <input type=text name='lid_voornaam' value='".$row['lid_voornaam']."'><br/>
                Name: <input type=text name='lid_naam' value='".$row['lid_naam']."'><br/>
                Email: <input type=text name='lid_email' value='".$row['lid_email']."'><br/>    
                <input type='submit' value='Whatever' id='test1'/> 
            </form>";
    }

和

 $("form").submit(function(event){
    var id = $(this).attr('id').split('target')[1];
    alert('form ' +id+ ' clicked');
    event.preventDefault();
  });

【讨论】：

感谢您的帮助，andrew，但不幸的是，每个表单都有唯一的 ID。我将尝试使用 return false 并尝试在调用 return false 之前放置一个函数。