Jan 18, 2018 Awais Liaqat

Create Dynamic Input Fields Using JQuery And PHP
6   0   82   Programming - JQuery

Facebook   Twitter   Google   Email
post-img
 

Introduction

Creating dynamic inputs using jquery and POST data to a php File. You can click on a button and create new input fields to add data and send it to php file.


Creating a HTML FORM

First we need to create a simple html form.

<!DOCTYPE html>
<html>
    <head>
        <title>Dynamic Inputs Using Jquery and PHP</title>
    </head>
<body>
    <form method="POST" action="save.php">
        <input type="text" name="first_name">
        <input type="text" name="last_name">
        <input type="text" name="user_name">
        <input type="button" value="Add New">
        <br>
        <input type="submit" value="Save" name="submit">
    </form>
</body>
</html>

We just create a form with method POST and three input fields of type text

We just added a button with value "Add New" that will be used for creating dynamic inputs.

After that on new line we created another submit button to submit form to PHP file this will be useful for later use.

Set form action to your php file that handle the request. in my case i am create a file save.php.

Now give id to input type button to make it accessable in jquery. you can access it with different paramenters but we will go with id

<input type="button" value="Add New" id="add_new">


Now create a form that we will duplicate everytime we click on add new button but we need to hide it. you can create it anywhere in body tag.

<div id="duplicate_form" style="display: none">
    <input type="text" name="first_name">
    <input type="text" name="last_name">
    <input type="text" name="user_name">
    <br>
</div>

Give submit button an id to insert data before submit button. so that it is included in form tag.

<input type="submit" value="Save" name="submit" id="submit_button">

To create dynamic input you need to create array of input. To create input array add [] at the end of every input name attribute.

Don't forget to add this in duplicate form inputs.

<input type="text" name="first_name[]">
<input type="text" name="last_name[]">
<input type="text" name="user_name[]">

Jquery

Now its time for some jquery. include jquery file from cdn or download it from offical jquery website.

Download Jquery: https://jquery.com/download/

Use any of the CDN below

// Google CDN
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
// Microsoft CDN
<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>

First create a click event on button. there are multiple method to perform this. but we use one of the below.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).on("click", "#add_new", function(){
        // your code here.
    });
</script>

After creating a successful on click event on button. duplicate the input and insert it before the submit button.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).on("click", "#add_new", function(){
        $("#submit_button").before($("#duplicate_form").html());
    });
</script>

To make it more simplify we divide the code into more statments.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).on("click", "#add_new", function(){
        var duplicate = $("#duplicate_form").html(); // get duplicate input into variable data
        $("#submit_button").before(data); // insert data before the submit button
    });
</script>

Complete HTML and JQuery Code (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Inputs Using Jquery and PHP</title>
</head>
<body>
    <form method="POST" action="save.php">
        <input type="text" name="first_name[]">
        <input type="text" name="last_name[]">
        <input type="text" name="user_name[]">
        <input type="button" value="Add New" id="add_new">
        <br>
        <input type="submit" value="Save" name="submit" id="submit_button">
    </form>
    <div id="duplicate_form" style="display: none">
        <input type="text" name="first_name[]">
        <input type="text" name="last_name[]">
        <input type="text" name="user_name[]">
        <br>
    </div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).on("click", "#add_new", function(){
        $("#submit_button").before($("#duplicate_form").html());
    });
</script>
</html>

Run the Code

Now its time to send data to PHP

Creating a PHP File (save.php)

<?php
for($i = 0; $i < count($_POST['first_name']); $i++){
    echo $_POST['first_name'][$i];
    echo "---";
    echo $_POST['last_name'][$i];
    echo "---";
    echo $_POST['user_name'][$i];
    echo "<br><br>";
}
?>

we just created a loop that will run till the number of elements in array of $_POST['first_name'];

then simple use echo to print it or use them to store into database.


Conclusions

We have learnt how to create dynamic inputs using jquery and how to handle dynamic inputs in HTML and PHP. You can save this data to database with insert query.

Is this helpful?   Yes   No

Facebook   Twitter   Google   Email
Click to copy
Successfully copy the link to share

Leave a Comment


Comments (0)


Thank you for your feedback
You are now following
Request Sent! Wait for Approval
Removed From Following
Something wents wrong!
Thank you for your comment