Using Ajax and PHP to Insert Multiple Form Inputs into a Database

The provided form generates multiple input fields based on user selection. To submit this data to a database using Ajax, several steps are involved:

1. Generate Multiple Input Fields:

The PHP code generates multiple input fields using a loop, as shown in your example:

<?php
$i = 1;
while ($i <= $num_to_enter) {
    $form_output .= "First Name: <input>

2. Create an Ajax Function:

The JavaScript function captures the data from all input fields and sends it to the PHP script:

function MyFunction() {
    var i = 1;
    var x = $('#num_to_enter').val();
    var data = "";
    var errorMessage = false;
    
    // Check if all fields are filled
    while (i <= x) {
        var name = $('#fname' + i).val();
        var lname = $('#lname' + i).val();
        var email = $('#Email' + i).val();
        if (name == "" || lname == "" || email == "") {
            errorMessage = true;
        }
        data += "fname[" + i + "]=" + name + "&lname[" + i + "]=" + lname + "&email[" + i + "]=" + email + "&";
        i++;
    }
    
    if (!errorMessage) {
        $('#SuccessDiv').html('Entering Info. <img src="images/processing.gif" />');
        $.ajax({
            url: 'process.php',
            type: "POST",
            data: data,
            success: function(data) {
                window.setTimeout(function() {
                    $('#SuccessDiv').html('Info Added!');
                    $('#data').css("display","block");
                    $('#data').html(data);
                }, 2000);
            }
        });
    } else {
        alert('Please fill out all fields.');
    }
    return false;
}

3. Process the Ajax Request in PHP:

The process.php script receives the POST data and inserts it into the database:

<?php
$i = 1;
while ($i <= $_POST['num_to_enter']) {
    $fname = $_POST['fname[' . $i . ']'];
    $lname = $_POST['lname[' . $i . ']'];
    $email = $_POST['email[' . $i . ']'];

    // Execute INSERT query into database
    // Set $sql accordingly for your database syntax

    $i++;
}
?>

4. Return a JSON Response:

After successfully inserting the data, the process.php script sends a JSON response to the Ajax function. This response can be used to display a success message, for example.

echo json_encode(array('success' => true));
?>

5. Handle the JSON Response in the Ajax Function:

In the JavaScript Ajax function, the success method handles the JSON response from the PHP script:

success: function(data) {
    if (data.success) {
        // Display a success message
    } else {
        // Display an error message
    }
}

By following these steps, you can successfully submit data from multiple form inputs to a database using Ajax and PHP.

The above is the detailed content of How to Insert Multiple Form Inputs into a Database Using AJAX and PHP?. For more information, please follow other related articles on the PHP Chinese website!