ajax and php to enter multiple forms input to database

Here is a simple demo of AJAX:

HTML

<form method="POST" action="process.php" id="my_form">
    <input type="text" name="firstname[]">
    <input type="text" name="firstname[]">
    <input type="text" name="firstname[]">
    <input type="text" name="firstname[custom1]">
    <input type="text" name="firstname[custom2]">
    <br><br>
    <input type="submit" value="Submit">
</form>

jQuery

// listen for user to SUBMIT the form
$(document).on('submit', '#my_form', function(e){

    // do not allow native browser submit process to proceed
    e.preventDefault();

    // AJAX yay!
    $.ajax({
        url: $(this).attr('action') // <- find process.php from action attribute
        ,async: true // <- don't hold things up
        ,cache: false // <- don't let cache issues haunt you
        ,type: $(this).attr('method') // <- find POST from method attribute
        ,data: $(this).serialize() // <- create the object to be POSTed to process.php
        ,dataType: 'json' // <- we expect JSON from the PHP file
        ,success: function(data){

            // Server responded with a 200 code

            // data is a JSON object so treat it as such
            // un-comment below for debuggin goodness
            // console.log(data);

            if(data.success == 'yes'){
                alert('yay!');
            }
            else{
                alert('insert failed!');
            }
        }
        ,error: function(){
            // There was an error such as the server returning a 404 or 500
            // or maybe the URL is not reachable
        }
        ,complete: function(){
            // Always perform this action after success() and error()
            // have been called
        }
    });
});

PHP process.php

<?php
/**************************************************/
/* Uncommenting in here will break the AJAX call */
/* Don't use AJAX and just submit the form normally to see this in action */

// see all your POST data
// echo '<pre>'.print_r($_POST, true).'</pre>';

// see the first names only
// echo $_POST['firstname'][0];
// echo $_POST['firstname'][1];
// echo $_POST['firstname'][2];
// echo $_POST['firstname']['custom1'];
// echo $_POST['firstname']['custom2'];

/**************************************************/

// some logic for sql insert, you can do this part

if($sql_logic == 'success'){

    // give JSON back to AJAX call
    echo json_encode(array('success'=>'yes'));
}
else{

    // give JSON back to AJAX call
    echo json_encode(array('success'=>'no'));
}
?>

Leave a Comment