Dynamically Add Input Fields And Submit To Database With jQuery and PHP -2

I am sure you all would love this tutorial as it was requested from many of our awesome readers. You would have seen our tutorial on How to Dynamically Add Input Fields And Submit To Database With jQuery and PHP. I received a good response for this tutorial, people asked how it would work if we have a form in which we have one user and he can enter as many hobbies he wants. So once we enter all the info in DB how would we know which hobbies belong to which user? You can say this tutorial is version 2 of our previous tutorial on how to dynamically add input field and submit to database. In this part 2 we have just extended the functionality so now each user can enter any number of hobbies through novomatic slot the form and just retrieve them in a tabular manner with pagination.

submit-dynamic-data

                                  [sociallocker]DOWNLOAD CODE[/sociallocker]

We have our simple form in index.php:

&lt;/p&gt;<br />&lt;div class='demosign' style="float:left;"&gt;<br /><%%KEEPWHITESPACE%%> &lt;form name='signup' id='signup'&gt;<br /><%%KEEPWHITESPACE%%> &lt;div class='row'&gt;<br /><%%KEEPWHITESPACE%%> &lt;p&gt;&lt;label for='username'&gt;Username&lt;/label&gt;<br /><%%KEEPWHITESPACE%%> &lt;input type='text' name='username' id='username' value='' placeholder='Enter User name' /&gt;&lt;/p&gt;<br /><%%KEEPWHITESPACE%%> &lt;/div&gt;<br /><%%KEEPWHITESPACE%%> &lt;div class='row'&gt;<br /><%%KEEPWHITESPACE%%> &lt;p&gt;&lt;label for='hobby1'&gt;Hobby #1&lt;/label&gt;<br /><%%KEEPWHITESPACE%%> &lt;input type='text' name='hobby[]' id='hobby1' value='' placeholder='Enter Hobby' /&gt;&lt;/p&gt;<br /><%%KEEPWHITESPACE%%> &lt;div id='hobby_div'&gt;<br /><%%KEEPWHITESPACE%%> &lt;/div&gt;<br /><br /><%%KEEPWHITESPACE%%> &lt;/div&gt;<br /><%%KEEPWHITESPACE%%> &lt;p class='form-error'&gt;&lt;/p&gt;<br /><%%KEEPWHITESPACE%%> &lt;div class='row'&gt;<br /><%%KEEPWHITESPACE%%> &lt;input type='button' id='formsubmit' class='submit' value='Submit' /&gt;<br /><%%KEEPWHITESPACE%%> &lt;input type='button' id='addmore' class='submit' value='Add More Hobby' /&gt;<br /><%%KEEPWHITESPACE%%> &lt;/div&gt;<br /><%%KEEPWHITESPACE%%> &lt;/form&gt;<br />&lt;/div&gt;<br />&lt;p style="text-align: justify;"&gt;

We have JS file script.js, this file reads all the data from all hobbies fields and create a comma separated list of all values and pass it to DbManipute.php via ajax.

Below is our code for script.js:

<br /><br />$count = 1;<br /><%%KEEPWHITESPACE%%> $(function(){<br /><%%KEEPWHITESPACE%%> $.ajax({<br /><%%KEEPWHITESPACE%%> url:"DbManipute.php",<br /><%%KEEPWHITESPACE%%> type:"POST",<br /><%%KEEPWHITESPACE%%> data:"actionfunction=showData&amp;page=1",<br /><%%KEEPWHITESPACE%%> cache: false,<br /><%%KEEPWHITESPACE%%> success: function(response){<br /><br /><%%KEEPWHITESPACE%%> $('#demoajax').html(response);<br /><br /><%%KEEPWHITESPACE%%> }<br /><br /><%%KEEPWHITESPACE%%> });<br /><%%KEEPWHITESPACE%%> $('#demoajax').on('click','.page-numbers',function(){<br /><%%KEEPWHITESPACE%%> $page = $(this).attr('href');<br /><%%KEEPWHITESPACE%%> $pageind = $page.indexOf('page=');<br /><%%KEEPWHITESPACE%%> $page = $page.substring(($pageind+5));<br /><%%KEEPWHITESPACE%%> $.ajax({<br /><%%KEEPWHITESPACE%%> url:"DbManipute.php",<br /><%%KEEPWHITESPACE%%> type:"POST",<br /><%%KEEPWHITESPACE%%> data:"actionfunction=showData&amp;page="+$page,<br /><%%KEEPWHITESPACE%%> cache: false,<br /><%%KEEPWHITESPACE%%> success: function(response){<br /><br /><%%KEEPWHITESPACE%%> $('#demoajax').html(response);<br /><br /><%%KEEPWHITESPACE%%> }<br /><br /><%%KEEPWHITESPACE%%> });<br /><%%KEEPWHITESPACE%%> return false;<br /><%%KEEPWHITESPACE%%> });<br /><br /><%%KEEPWHITESPACE%%> $('#addmore').click(function(){<br /><%%KEEPWHITESPACE%%> $count++;<br /><%%KEEPWHITESPACE%%> $hobby = $("&lt;p id='hobbyblck"+$count+"'&gt;&lt;label for='hobby1'&gt;Hobby #"+$count+"&lt;/label&gt;&lt;input type='text' name='hobby[]' id='hobby"+$count+"' value='' placeholder='Enter Hobby' /&gt;&lt;/p&gt;");<br /><%%KEEPWHITESPACE%%> $('#hobby_div').append($hobby);<br /><%%KEEPWHITESPACE%%> });<br /><%%KEEPWHITESPACE%%> $('#formsubmit').click(function(){<br /><%%KEEPWHITESPACE%%> $usr = $('#username');<br /><%%KEEPWHITESPACE%%> $hobbyval='';<br /><%%KEEPWHITESPACE%%> if($usr.val()==''){<br /><%%KEEPWHITESPACE%%> $('.form-error').html('enter username');<br /><%%KEEPWHITESPACE%%> return false;<br /><%%KEEPWHITESPACE%%> }<br /><%%KEEPWHITESPACE%%> if($count&gt;0){<br /><%%KEEPWHITESPACE%%> for(var i=1;i&lt;=$count;i++){<br /><%%KEEPWHITESPACE%%> $hobby = $('#hobby'+i);<br /><%%KEEPWHITESPACE%%> $hob = $hobby.val();<br /><%%KEEPWHITESPACE%%> $hob = $hob.replace(/,/g,'');<br /><%%KEEPWHITESPACE%%> if($hob==''){<br /><%%KEEPWHITESPACE%%> $('.form-error').html('enter Hobby #'+i);<br /><%%KEEPWHITESPACE%%> return false;<br /><%%KEEPWHITESPACE%%> }<br /><%%KEEPWHITESPACE%%> else{<br /><%%KEEPWHITESPACE%%> $('.form-error').val('');<br /><%%KEEPWHITESPACE%%> $hobbyval += $hob+' ,';<br /><%%KEEPWHITESPACE%%> }<br /><%%KEEPWHITESPACE%%> }<br /><%%KEEPWHITESPACE%%> }<br /><%%KEEPWHITESPACE%%> $indx = $hobbyval.lastIndexOf(',');<br /><%%KEEPWHITESPACE%%> $hobbyval = $hobbyval.substring(0,$indx);<br /><%%KEEPWHITESPACE%%> $hobbyval = $hobbyval.trim();<br /><%%KEEPWHITESPACE%%> $data = "username="+$usr.val()+"&amp;hobby="+$hobbyval+"&amp;actionfunction=saveData";<br /><%%KEEPWHITESPACE%%> $.ajax({<br /><%%KEEPWHITESPACE%%> url:"DbManipute.php",<br /><%%KEEPWHITESPACE%%> type:"POST",<br /><%%KEEPWHITESPACE%%> data:$data,<br /><%%KEEPWHITESPACE%%> cache: false,<br /><%%KEEPWHITESPACE%%> success: function(response){<br /><%%KEEPWHITESPACE%%> for(var i=2;i&lt;=$count;i++){<br /><%%KEEPWHITESPACE%%> $('#hobbyblck'+i).remove();<br /><%%KEEPWHITESPACE%%> }<br /><%%KEEPWHITESPACE%%> $('#demoajax').html(response);<br /><%%KEEPWHITESPACE%%> $usr.val('');<br /><%%KEEPWHITESPACE%%> $('#hobby1').val('');<br /><%%KEEPWHITESPACE%%> $count = 1;<br /><%%KEEPWHITESPACE%%> }<br /><%%KEEPWHITESPACE%%> });<br /><%%KEEPWHITESPACE%%> });<br /><br /><%%KEEPWHITESPACE%%> $(document).on('click','.user_view',function(){<br /><%%KEEPWHITESPACE%%> $('.user_hobby').html('');<br /><%%KEEPWHITESPACE%%> $id = $(this).attr('id');<br /><%%KEEPWHITESPACE%%> $data = 'hobbyid='+$id+"&amp;actionfunction=getHobby";<br /><%%KEEPWHITESPACE%%> $.ajax({<br /><%%KEEPWHITESPACE%%> url:"DbManipute.php",<br /><%%KEEPWHITESPACE%%> type:"POST",<br /><%%KEEPWHITESPACE%%> data:$data,<br /><%%KEEPWHITESPACE%%> cache: false,<br /><%%KEEPWHITESPACE%%> success: function(response){<br /><%%KEEPWHITESPACE%%> $('#hobby_view_'+$id).html(response);<br /><%%KEEPWHITESPACE%%> }<br /><%%KEEPWHITESPACE%%> });<br /><%%KEEPWHITESPACE%%> });<br />});<br /><br />

Please download the source code and set it up in your local server. Its easy to setup and see it running and working. I hope this tutorial would help you in a way or other. You can suggest any improvements in comments. Please share this easy tutorial and also please like our FB page and show your love.

8 thoughts on “Dynamically Add Input Fields And Submit To Database With jQuery and PHP -2”

  1. Thanks for this great tutorial. May someday I can use this on my personal website. But where is the database code?

    Cheers

  2. Thank you so much for this tutorial. I greatly appreciate it. Where is the download button located?

    1. Once you like or share the article using the box given below the image. You will be able to see the download link.

      Thanks:
      InfoTuts

  3. sir it’s great tutorial so i want to need, how to print data from database

    in pdf and ms-word files plz. help me sir and how can i do this?

Comments are closed.