Question posted in
You can find the official documentation here.

JQuery post query to two different php files – Jquery ajax

I have one form, which has to be validated firstly with one php and then in case of successful validation recent to another.
Here is my html form

<form id="fr1" action='send.php'>
    <input type="text" name="name" placeholder="name">
    <input type="text" name="mail" placeholder="mail">
    <button type="submit">Send</button>
</form>

JQuery handles the submit event, prevents redirect and validates e-mail

$(document).ready(function(){
    $('#fr1').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: $(this).serialize(),
            success: function(data){
                if (data){
                    $('#fr1').submit();
                }
                else{
                    alert('Invalid Credentials!');
                }
            }
        });
    });
});

Then it’s upload.php’s turn. Here it is…

<?php //upload.php
$mail = $_POST['mail'];
$mail = filter_var($mail, FILTER_VALIDATE_EMAIL);
echo $mail;

and in case of successful validation i’m trying to resend this data to other page with redirection to it.
The above code is maximum simplified version of my project and it is very painful for me to rebuild it – is the JQuery method to solve my problem?

Important point: before redirection there must be a popup window with feedback of success and only after it the redirection.

Tags:

2

Answers


  1. 0

    You set a listener on submit event for the "#fr1" form, that’s when you submit the form, you prevent the default behavior, that’s why the form is not being submitted.

    You can achieve what you need by submitting the form to upload.php using AJAX, all logic should be there for validating/storing data, then will respond by success or failure.

    Example:

    $(document).ready(function(){
    $('#fr1').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: $(this).serialize(),
            success: function(data){
                if (data.success){
                    alert(data.message);
                }
                else{
                    alert('Invalid Credentials!');
                }
            }
        });
    });
});

    Upload.php

    <?php
if (isset($_POST)) {
    $mail = $_POST['mail'];
    if (!filter_var($mail, FILTER_VALIDATE_EMAIL)) {
        $data = ['success' => false, 'message' => 'invalid email'];
    } else {
        $data = ['success' => true, 'message' => 'correct data'];
    }
    echo json_encode($data);
}

    I hope that will help

    Login or Signup to reply.
  2. 0

    As noted in the comments, using

    $("form").submit(function() {
    e.preventDefault();
    $("form").submit();
});

    will hit an infinite loop. The key is to use javascript’s native .submit() instead of jquery’s:

    $("form").submit(function() {
    e.preventDefault();
    $("form")[0].submit();
});

    This will allow you to temporarily intercept the submit, do what you want (validate server-side via ajax, display a popup) and then, when done, let the form do its native POST to your alternative page.

    Here’s an example jsfiddle with a simulated delay before the actual POST (to another page): https://jsfiddle.net/4z5d0ypr/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search