title: Multiple Textbox Fields using JQuery, Ajax, PHP and MySQL
body: <p>I'm done with the codes and its working.</p>
  
  <pre><code> &lt;form name="registration" id="registration" action="" method="post"&gt;
      &lt;div id="reg_names"&gt;
         &lt;div class="control-group"&gt;
              &lt;label&gt;Name&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;select name="prefix[]" id="prefix"&gt;
                      &lt;option value="Mr"&gt;Mr&lt;/option&gt;
                      &lt;option value="Ms"&gt;Ms&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;input type="text" name="fullname[]" id="fullname" /&gt;                   
              &lt;/div&gt;
         &lt;/div&gt;
  
         &lt;div class="control-group"&gt;
              &lt;label"&gt;Position&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" name="position[]" id="position" /&gt;                               
              &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt; &lt;!-- end of reg_names --&gt;
  
      &lt;div id="reg_names_ext"&gt;&lt;/div&gt;
  
      &lt;div class="add_delegate"&gt;
          &lt;p&gt;&lt;a href="javascript:void(0)" class="add"&gt;Add a delegate&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="control-group"&gt;
          &lt;div class="controls"&gt;
              &lt;a class="submit" id="register" href="javascript:void(0)"&gt;SUBMIT&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;    
  
   &lt;/form&gt;
  </code></pre>
  
  <p>The codes in ADD A DELEGATE button as shown below:</p>
  
  <pre><code>var Registration = {
  
    removeElement: function(element){
       $('#' + element).remove();
    }
  
  }
  
  $(document).ready(function(){       
  
      var i = 1;
      $('.add').click(function(){
          $( "#reg_names" ).clone().appendTo( "#reg_names_ext" );
          $('#reg_names_ext').find('#reg_names').each(function(){
              $(this).attr('id', 'reg_names' + i).find('input').val('');
              $('#reg_names' + i).prepend('&lt;hr&gt;');
              $('#reg_names' + i).append('&lt;a href="javascript:Registration.removeElement(\'reg_names' + i + '\')" id="remove"&gt;Remove&lt;/a&gt;');
          });
      i++;
      });
  
  });
  </code></pre>
  
  <p>Here's my code for submit button:</p>
  
  <pre><code>$(document).ready(function(){
  
    $('#register').click(function(){
  
       var dataString = {};
  
       var prefix = $('select[name="prefix[]"]').map(function(){ return this.value }).get();
       var fullname = $('input[name="fullname[]"]').map(function(){ return this.value }).get();
       var position = $('input[name="position[]"]').map(function(){ return this.value }).get();
  
       for(var i=0; i &lt; fullname.length; i++)
      { 
          dataString[i] = {
              'prefix'    : prefix[i],
              'fullname'  : fullname[i],
              'position'  : position[i]
          }
      }   
  
      $.ajax({
           type: "POST",
           url: "insert.php",
           dataType: "json",
           data: { "data" : JSON.stringify(dataString) },
           success: function(data){   
                if(data==true){
                    $('#registration')[0].reset();
                    alert("Congratulations!");
                }else{
                    $('#registration')[0].reset();
                    alert("The system found an error");   
                }                             
           }          
      });
  
    });
  
  });
  </code></pre>
  
  <p>Here's my connection.php code:</p>
  
  <pre><code>&lt;?php
  
  function connect($sql){
  
    $host = "localhost";
    $username = "admin";
    $password = "";
    $db_name = "sample";
  
    $db = mysql_connect($host,$username,$password) or die('Cannot connect to server.');
    mysql_select_db($db_name, $db) or die('Database does not exist.');
    $result=mysql_query($sql,$db);
    return $result;
  }
  
  ?&gt;
  </code></pre>
  
  <p>Here's my insert.php code</p>
  
  <pre><code>&lt;?php
  
  //Start session
  session_start();
  
  //database connection
  require_once 'connection.php';
  
  $data = json_decode($_POST['data'], true);
  
  foreach($data as $key =&gt; $value) {
  
      $prefix    = strtoupper($data[$key]['prefix']);
      $fullname  = strtoupper($data[$key]['fullname']);
      $position  = strtoupper($data[$key]['position']);
  
      $values[]  = "('$prefix','$fullname','$position')";
  }
  
  $query_values = implode(',', $values);
  
  $result = connect( "INSERT INTO `data` (prefix, fullname, position) VALUES $query_values " );
  
  if($result){
     echo json_encode(true);
  }else{
     echo json_encode(false);
  }
  
  ?&gt;
  </code></pre>
  
  <p>I WISH IT WILL HELP FOR FUTURE PROGRAMMERS.. HEHEHE :)
  I'M HAPPY TO HELP..</p>