没有页面刷新的表单提交

Question

没有页面刷新的表单提交

Hug*_*ugo 33 javascript php forms ajax jquery

也许有人可以帮我解决我遇到的这个小问题.我试图在没有页面刷新的情况下提交此表单.但它会跳过帖子并直接转到ajax调用.我想我想念了preventDefault().我在网上搜索但无法找到我需要的东西.非常感谢您的帮助或指向另一个表单提交.

HTML下面:

<!DOCTYPE html>
 <html>
<head>
<title>AJAX | Project</title>
 <link href="project.css" rel="stylesheet"/>
 <script src="jquery.js"></script>

  </head>
 <body>


<div id="mainCon">

  <h1>Contact Book</h1>
<div id="form_input">
<form id="myform" method="post"    action="addrecord.php">

    <label for="fullname">Name:</label>
    <input type="text" name="fullname" id="fullname"/><span id="NameError">   </span>
    <br/>
    <label for="phonenumber">Phone Number:</label>
    <input type="text" id="phonenumber" name="phonenumber"><span   id="PhoneError"></span>

    <br />

<input id="buttton" type="submit" onClick="addnumber()" value="Add Phone   Number"/>
    <input type="button" id="show" value="the Results"/>
 </form>


</div>

    <div id="form_output">


    </div>


</div>
 <script src="project.js"></script>
 <script type="text/javascript">

 function addnumber(){

 var Fullname = document.getElementById("fullname").value;
var Phonenumber = document.getElementById("phonenumber").value;



 if(Fullname == ""){
document.getElementById("NameError").innerHTML = "Please Enter a valided Name";
}

if(Phonenumber == ""){
document.getElementById("PhoneError").innerHTML = "Please Enter a valided Name";
}

}

</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

jQuery的

$("document").ready(function () {
    $("#buttton").click(function () {
        $('#myform').submit(function (e) {
            e.preventDefault();
            $.ajax({
                url: "listrecord.php",
                type: "GET",
                data: "data",
                success: function (data) {
                    $("#form_output").html(data);
                },
                error: function (jXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            }); // AJAX Get Jquery statment
        });
    }); // Click effect     
}); //Begin of Jquery Statement

Run Code Online (Sandbox Code Playgroud)

Answer 1

ade*_*neo 40

只需捕获提交事件并阻止它,然后执行ajax

$(document).ready(function () {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') || window.location.pathname,
            type: "GET",
            data: $(this).serialize(),
            success: function (data) {
                $("#form_output").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ank*_*nya 16

<script type="text/javascript">
    var frm = $('#myform');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });

        ev.preventDefault();
    });
</script>

<form id="myform" action="/your_url" method="post">
    ...
</form>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，5 月前
查看次数：	129152 次
最近记录：	6 年，11 月前