title: inserting data to mysql table from bootstrap dynamic fields
body: <p>I am using the following link   <a href="http://formvalidation.io/examples/adding-dynamic-field/" rel="nofollow">Adding fields with different names</a> for creating dynamic fields in bootstrap. Now I want to insert data from these dynamic fields to mysql. I am not able to understand how to start with. Could you guys help me out </p>
  
  <p>I tried for the below code</p>
  
  <pre><code>$link = mysqli_connect("172.16.8.52", "userid", "pwd", "DB_AD");
  
  if($link === false){
  echo "&lt;script language=\"JavaScript\"&gt;\n";
  echo "alert('Cannot connect');\n";
  echo "&lt;/script&gt;";
   die("ERROR: Could not connect. " . mysqli_connect_error());
  }
  
  
  $first_name = mysqli_real_escape_string($link, $_POST['book[0].title']);
  $last_name = mysqli_real_escape_string($link, $_POST['book[0].isbn']);
  $email_address = mysqli_real_escape_string($link, $_POST['book[0].price']);
  
  // attempt insert query execution
  $sql = "INSERT INTO sys_det (IPAddress, AssetTag, SerialNo) VALUES       ('$first_name', '$last_name', '$email_address')";
  if(mysqli_query($link, $sql)){
  echo "Records added successfully.";
  echo "&lt;script language=\"JavaScript\"&gt;\n";
  echo "alert('details Added successfully!');\n";
  echo "window.location=' http://10.50.4.20/footer.php'";
  echo "&lt;/script&gt;";
  } else{
  echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
    echo "&lt;script language=\"JavaScript\"&gt;\n";
  echo "alert('Username or Password was incorrect!');\n";
  echo "window.location=' http://10.50.4.20/Index.php'";
  echo "&lt;/script&gt;";
  }
  
   // close connection
   mysqli_close($link);
  ?&gt;
  </code></pre>
  
  <p>FORM CODE</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    var titleValidators = {
        row: '.col-sm-3', // The title is placed inside a &lt;div class="col-xs-4"&gt; element
        validators: {
          notEmpty: {
            message: 'The IP Address is required'
          },
          ip: {
            message: 'Please enter a valid IP address'
          }
  
  
        }
      },
      isbnValidators = {
  
        row: '.col-sm-4',
        validators: {
          notEmpty: {
            message: 'The Asset Tag is required'
          },
  
          stringLength: {
            max: 15,
            message: 'Asset tag length should be 15'
          },
  
          regexp: {
            regexp: /^[A-Za-z0-9 ]*$/,
            message: "No special characters allowed",
  
          }
          //  isbn: {
          //    message: 'The Asset Tag is not valid'
          //}
        }
      },
      priceValidators = {
        row: '.col-sm-3',
        validators: {
          notEmpty: {
            message: 'The Serial No is required'
          },
          // numeric: {
          //   message: 'The Serial No must be a alphanumeric number'
          //}
        }
      },
      bookIndex = 0;
  
    $('#bookForm')
      .formValidation({
        framework: 'bootstrap',
        live: 'enabled',
        icon: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          'book[0].title': titleValidators,
          'book[0].isbn': isbnValidators,
          'book[0].price': priceValidators
        }
      })
  
  
  
    // Add button click handler
    .on('click', '.addButton', function() {
      bookIndex++;
      var $template = $('#bookTemplate'),
        $clone = $template
        .clone()
        .removeClass('hide')
        .removeAttr('id')
        .attr('data-book-index', bookIndex)
        .insertBefore($template);
  
      // Update the name attributes
      $clone
        .find('[name="title"]').attr('name', 'book[' + bookIndex + '].title').end()
        .find('[name="isbn"]').attr('name', 'book[' + bookIndex + '].isbn').end()
        .find('[name="price"]').attr('name', 'book[' + bookIndex + '].price').end();
  
      // Add new fields
      // Note that we also pass the validator rules for new field as the third parameter
      $('#bookForm')
        .formValidation('addField', 'book[' + bookIndex + '].title', titleValidators)
        .formValidation('addField', 'book[' + bookIndex + '].isbn', isbnValidators)
        .formValidation('addField', 'book[' + bookIndex + '].price', priceValidators);
    })
  
    // Remove button click handler
    .on('click', '.removeButton', function() {
      var $row = $(this).parents('.form-group'),
        index = $row.attr('data-book-index');
  
      // Remove fields
      $('#bookForm')
        .formValidation('removeField', $row.find('[name="book[' + index + '].title"]'))
        .formValidation('removeField', $row.find('[name="book[' + index + '].isbn"]'))
        .formValidation('removeField', $row.find('[name="book[' + index + '].price"]'));
  
      // Remove element containing the fields
      $row.remove();
    });
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;Boostrap Validator&lt;/title&gt;
  
  
    &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet"&gt;
    &lt;link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"&gt;
    &lt;link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet"&gt;
    &lt;link href="css/styles.css" rel="stylesheet"&gt;
    &lt;link href="css/animate.min.css" rel="stylesheet"&gt;
  
  
  
    &lt;!-- jQuery v1.9.1 or higher 
  
  
    &lt;!-- Path to Bootstrap JS --&gt;
    &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- FormValidation plugin and the class supports validating Bootstrap form --&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  
  
  &lt;form id="bookForm" method="post" action="mysql.php" class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
  
      &lt;div class="col-sm-3"&gt;
        &lt;input type="text" class="form-control" name="book[0].title" placeholder="IP Address" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;input type="text" class="form-control" id="isbn" name="book[0].isbn" placeholder="Asset Tag(KVBXXXX1DESXXXX)" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;input type="text" class="form-control" name="book[0].price" placeholder="Serial No" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-1"&gt;
        &lt;button type="button" class="btn btn-default addButton"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- The template for adding new field --&gt;
    &lt;div class="form-group hide" id="bookTemplate"&gt;
      &lt;div class="col-sm-3 "&gt;
        &lt;input type="text" class="form-control" name="title" placeholder="IP Address" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;input type="text" class="form-control" name="isbn" placeholder="Asset Tag(KVBXXXX1DESXXXX)" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;input type="text" class="form-control" name="price" placeholder="Serial No" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-1"&gt;
        &lt;button type="button" class="btn btn-default removeButton"&gt;&lt;i class="fa fa-minus"&gt;&lt;/i&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;div class="col-xs-5 "&gt;
        &lt;button type="submit" name="submit1"  class="btn btn-default"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now i have added this code for mysql.php</p>
  
  <pre><code>                        &lt;!DOCTYPE html&gt;
              &lt;html&gt;
              &lt;head&gt;
                  &lt;title&gt;BootstrapValidator demo&lt;/title&gt;
                 &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&gt;
              &lt;/head&gt;
              &lt;body&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row"&gt;
                          &lt;h2&gt;Form data&lt;/h2&gt;
                          &lt;hr/&gt;
                          &lt;p&gt;This is a simple page showing the data you have just submitted&lt;/p&gt;
                          &lt;pre&gt;&lt;?php print_r($_POST); ?&gt;&lt;/pre&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  
  <p>and when i am clicking on the submit button i am getting following output.</p>
  
  <pre><code>      Array
       (
          [book] =&gt; Array
        (
          [0] =&gt; 3X20586
        )
  
          [title] =&gt; 
           [isbn] =&gt; 
              [price] =&gt; 
           [submit1] =&gt; 
              )
  </code></pre>