All geek questions in one place

Failed to perform the action specified in the <form> tag

I use jquery to execute a php file, but the problem is that after executing the php file it does not perform the "action" indicated in the tag <form>... Please help me with this! Forgive me if you are mistaken.

Here is the .js file

$(document).ready(function(){

    //execute the function on click
    $("#submit").click(function(e){

        /*jquery to call the url requested 
        and parse the data in json*/
        $.ajax({
            url: "register.php",
            type: "POST",
            data: {
                fname: $("#fname").val(),
                lname: $("#lname").val(),
                email: $("#email").val(),
                password: $("#password").val(),
                mobile: $("#mobile").val()
            },
            dataType: "JSON",
            /*Give out the alert box
            to display the results*/ 
            success: function (json){
                if(json.error){
                    alert(json.error_msg);
                    e.preventDefault();
                }else{
                    alert("Registeration successful!",json.user.email);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert(errorThrown);
                e.preventDefault();
            }
        });
    });

   });

And here comes the .html file

    <html>
        <head>
    <title>jQuery Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src = "register.js"></script>
     </head>

     <body>

        <!--html body-->
        <form name = "register" action = "login.html" id = "register" method = "POST">
            <label>First name:</label>
            <input type = text name = "fname" id = "fname" required>
            <label>Last name:</label>
            <input type = "text" name = "lname" id = "lname" required>
            <label>E-mail:</label>
            <input type = "email" name = "email" id = "email" required>
            <label>Password</label>
            <input type = "password" name = "password" id = "password" required>
            <label>Mobile no:</label>
            <input type = "number" name = "mobile" id = "mobile" required>
            <input type="submit" value="Insert" name="submit" id = "submit">
        </form>
        <div id = "result" align = "right"></div>
    </body>
    </html>
+4
source share
1 answer

delete this line

e.preventDefault();

If you want to prevent the error message from being sent, add this line to the ajax error part,

error: function(jqXHR, textStatus, errorThrown){
     alert(errorThrown);
     e.preventDefault();//<--- add here so that on error, your form is not submitted.
}
+2
source

Source: https://habr.com/ru/post/1619306/

More articles:


All Articles