Question

我使用php，mysql和ajax来显示联系表单，但问题是输出“1 record inserted”会显示在下一页上。我希望在提交时显示在同一页面上。

以下是代码

validation.html

<html>
<head>
    <title>Contact Form</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script type="text/javascript" language="javascript">

 //  <script type="text/javascript">

$(document).ready(function(){ 
    $("#myButton").click(function() { 
    alert("Hii");
        $.ajax({
        cache: false,
        type: 'POST',
        url: 'validation.php',
        data: $("#contact").serialize(),
        success: function(d) {
            $("#record").html(d);
        }
        });
    }); 
});

</script>
    </head>
    <body>
    <form method="post" id="contact" action="validation.php">
    Name: <input type="text" name="name"> <br>
    E-mail: <input type="text" name="email"> <br>
    Password: <input type="text" name="pass"> <br>
    Mobile: <input type="number" name="mobile"> <br>
    <br>
    <input type="submit" value="SUBMIT" id="mybutton"/>
    </form>
    <div id="record">Record has been inserted</div>
    </body>
</html>

任何人都可以指出我如何继续这样做或者需要进行哪些更改？

Answer 1

这是因为当您点击#myButton时，您正在提交表单并重定向您。

只需阻止默认操作。

$("#myButton").click(function(event) { 
event.preventDefault();
alert("Hii"); //what is this for???
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'validation.php',
    data: $("#contact").serialize(),
    success: function(d) {
        $("#record").html(d);
    }
    });
});

Answer 2

你正在提交按钮，只需更改

<input type="button" id="myButton">Submit</input>
OR
<button id="myButton">Submit</button>

它会调用你的ajax请求。

Answer 3

目前，您的按钮会提交表单，因为它是Submit-Button。如果您不想提交表单，有几种方法，但这两种方法是最好的：

// Use prevent default
$("#myButton").click(function(e) { // This 'e' is important
  e.preventDefault()
  # rest of the function here
});

或者您可以使用链接标记（仅使用占位符href）替换您的提交按钮，如下所示：

<html>
  <head>
    <title>Contact Form</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" language="javascript">

    <script type="text/javascript">
      // Actual Javascript code here
    </script>
  </head>
  <body>
    <form method="post" id="contact" action="validation.php">
    Name: <input type="text" name="name"> <br>
    E-mail: <input type="text" name="email"> <br>
    Password: <input type="text" name="pass"> <br>
    Mobile: <input type="number" name="mobile"> <br>
    <br>
    <a href="#" id="mybutton">SUBMIT</a>
    </form>
    <div id="record">Record has been inserted</div>
  </body>
</html>

最好的情况是将两者结合起来。

Answer 4

打开另一个页面，因为当您点击#myButton时，您的表单会执行提交过程有一些方法可以解决这个问题。

1.在表单标记中添加属性：

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

或
2.通过返回false：

来设置按钮以防止提交过程

$(document).ready(function(){ 
    $("#myButton").click(function() { 
        alert("Hii");
        $.ajax({
        cache: false,
        type: 'POST',
        url: 'validation.php',
            data: $("#contact").serialize(),
            success: function(d) {
                $("#record").html(d);
            }
        });
        return false;
    }); 
});

Answer 5

尝试调用输入元素

的函数onclick事件

<input type="submit" value="SUBMIT" id="mybutton" onclick="return myFunction()"/>

然后调用此函数

function myFunction()
{
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'validation.php',
    data: $("#contact").serialize(),
    success: function(d) {
        $("#record").html(d);
    }
    });
  return false;
}

也替换此

<form method="post" id="contact" action="validation.php">

与

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

应该对你有所帮助！感谢。

Answer 6

试试这个

 <input type="button" id="myButton">Submit</input>

OR 提交

在同一网页上显示结果

6 个答案: