web-dev-qa-db-fra.com

Soumission de formulaire sans actualisation de page

Peut-être que quelqu'un peut m'aider avec ce petit problème que j'ai. J'essaie de soumettre ce formulaire sans actualiser la page. Mais il va sauter le post et aller directement à l'appel ajax. Je pense que je manque de comprendre le preventDefault (). J'ai effectué une recherche en ligne mais je suis incapable de localiser ce dont j'ai besoin pour cela. Votre aide serait grandement appréciée ou indiquerait la soumission d’un autre formulaire.

HTML ci-dessous:

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

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
javascriptphpjqueryajaxforms
32
Hugo

Attrapez simplement l'événement submit et évitez cela, puis 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);
            }
        });
    });
});
40
adeneo
<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>
16
Ankit Aranya
<!-- index.php -->
    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
    <form id="myForm">
        <input type="text" name="fname" id="fname"/>
        <input type="submit" name="click" value="button" />
    </form>
    <script>
    $(document).ready(function(){

         $(function(){
            $("#myForm").submit(function(event){
                event.preventDefault();
                $.ajax({
                    method: 'POST',
                    url: 'submit.php',
                    dataType: "json",
                    contentType: "application/json",
                    data : $('#myForm').serialize(),
                    success: function(data){
                        alert(data);
                    },
                    error: function(xhr, desc, err){
                        console.log(err);
                    }
                });
            });
        });
    });
    </script>
    </body>
    </html>
<!-- submit.php -->
<?php
$value ="call";
header('Content-Type: application/json');
echo json_encode($value);
?>
2
Nikit Barochiya

Le problème est la méthode 'POST' que votre formulaire soumet en utilisant la méthode "post" et dans le AJAX vous utilisez "GET".

1
Carlos Sandoval