How to Add Unlimited Fields in Form Using JavaScript and Store Into Database With PHP

Explanation

Here we created a function named add_field to append a text field at the second last position in the form.

Note: Here, we set every field name as text_field[], which submits all text field data as an array.

Read Also: How to Remove On-Page Errors in PHP

Step 2: Create a save_data.php file to store the data in the database

<?php
    $conn = mysqli_connect("localhost","USER_NAME","PASSWORD","DATABASE_NAME");
    
    $data = $_POST['text_field'];
    $data = implode(",",$data);
    
    $query = "INSERT INTO `test`(`data`) VALUES ('$data')";
    if(mysqli_query($conn,$query)){
        echo "Success: Data successfully inserted";
    }else{
        echo "Error: Could not insert data into table";
    }
?>

Explanation

• Here we first stored the submitted array data in a PHP array variable named $data.
• After that, we used an inbuilt PHP function implode(), which converts an array into a PHP string.
• Finally, we saved our string data to our data table.

DOWNLOAD CODE

Conclusion

Creating unlimited dynamic fields is very easy using JavaScript. Even more, we learned a way to store that dynamic data into a database using some simple functions of PHP.

I hope now you have a complete understanding of dynamic field insertion and data storing techniques.

Enjoy Coding 🙂