phpmysqltwitter-bootstrapformvalidation-plugin

inserting data to mysql table from bootstrap dynamic fields

I am using the following link Adding fields with different names 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

I tried for the below code

$link = mysqli_connect("172.16.8.52", "userid", "pwd", "DB_AD");

if($link === false){
echo "<script language=\"JavaScript\">\n";
echo "alert('Cannot connect');\n";
echo "</script>";
 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 "<script language=\"JavaScript\">\n";
echo "alert('details Added successfully!');\n";
echo "window.location=' http://10.50.4.20/footer.php'";
echo "</script>";
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
  echo "<script language=\"JavaScript\">\n";
echo "alert('Username or Password was incorrect!');\n";
echo "window.location=' http://10.50.4.20/Index.php'";
echo "</script>";
}

 // close connection
 mysqli_close($link);
?>

FORM CODE

$(document).ready(function() {

  var titleValidators = {
      row: '.col-sm-3', // The title is placed inside a <div class="col-xs-4"> 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();
  });


});
<!doctype html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Boostrap Validator</title>


  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">
  <link href="css/animate.min.css" rel="stylesheet">



  <!-- jQuery v1.9.1 or higher 


		<!-- Path to Bootstrap JS -->
  <script type="text/javascript" src="jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <!-- FormValidation plugin and the class supports validating Bootstrap form -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
</head>




<form id="bookForm" method="post" action="mysql.php" class="form-horizontal">
  <div class="form-group">

    <div class="col-sm-3">
      <input type="text" class="form-control" name="book[0].title" placeholder="IP Address" />
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="isbn" name="book[0].isbn" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
    </div>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="book[0].price" placeholder="Serial No" />
    </div>
    <div class="col-sm-1">
      <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
      </button>
    </div>
  </div>

  <!-- The template for adding new field -->
  <div class="form-group hide" id="bookTemplate">
    <div class="col-sm-3 ">
      <input type="text" class="form-control" name="title" placeholder="IP Address" />
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" name="isbn" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
    </div>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="price" placeholder="Serial No" />
    </div>
    <div class="col-sm-1">
      <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
      </button>
    </div>
  </div>

  <div class="form-group">
    <div class="col-xs-5 ">
      <button type="submit" name="submit1"  class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

Now i have added this code for mysql.php

                        <!DOCTYPE html>
            <html>
            <head>
                <title>BootstrapValidator demo</title>
               <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
            </head>
            <body>
                <div class="container">
                    <div class="row">
                        <h2>Form data</h2>
                        <hr/>
                        <p>This is a simple page showing the data you have just submitted</p>
                        <pre><?php print_r($_POST); ?></pre>
                    </div>
                </div>
            </body>
            </html>

and when i am clicking on the submit button i am getting following output.

      Array
     (
        [book] => Array
      (
        [0] => 3X20586
      )

        [title] => 
         [isbn] => 
            [price] => 
         [submit1] => 
            )
Solution 

  • $(document).ready(function() {




  $('#bookForm')
    .formValidation({
      framework: 'bootstrap',

      icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        'title[]': {
          // The task is placed inside a .col-xs-6 element
          row: '.col-sm-3', // The title is placed inside a <div class="col-xs-4"> element
          validators: {
            notEmpty: {
              message: 'The IP Address is required'
            },
            ip: {
              message: 'Please enter a valid IP address'
            }


          }

        },
        'isbn[]': {
          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",

            }

          }
        },


        'price[]': {
          row: '.col-sm-3',
          validators: {
            notEmpty: {
              message: 'The Serial No is required'
            },

          }
        }
      }
    })



  // Add button click handler
  .on('click', '.addButton', function() {

    var $template = $('#bookTemplate'),
      $clone = $template
      .clone()
      .removeClass('hide')
      .removeAttr('id')

    .insertBefore($template);

    // Update the name attributes


    // Add new fields
    // Note that we also pass the validator rules for new field as the third parameter
    $('#bookForm')
      .formValidation('addField', $clone.find('[name="title[]"]'))
      .formValidation('addField', $clone.find('[name="isbn[]"]'))
      .formValidation('addField', $clone.find('[name="price[]"]'))
  })

  // Remove button click handler
  .on('click', '.removeButton', function() {
    var $row = $(this).closest('.form-group');


    // Remove fields
    $('#bookForm')
      .formValidation('removeField', $row.find('[name="title[]"]'))
      .formValidation('removeField', $row.find('[name="isbn[]"]'))
      .formValidation('removeField', $row.find('[name="price[]"]'))
    $row.remove();
  })

  //twitter bootstrap script

});
    <!doctype html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Boostrap Validator</title>


  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">
  <link href="css/animate.min.css" rel="stylesheet">



  <!-- jQuery v1.9.1 or higher 


		<!-- Path to Bootstrap JS -->
  <script type="text/javascript" src="jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <!-- FormValidation plugin and the class supports validating Bootstrap form -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
</head>

<form id="bookForm" method="post" action="target.php" class="form-horizontal" autocomplete="off">
  <div class="form-group">

    <div class="col-sm-3">
      <input type="text" class="form-control" name="title[]" placeholder="IP Address" />
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" name="isbn[]" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
    </div>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="price[]" placeholder="Serial No" />
    </div>
    <div class="col-sm-1">
      <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
      </button>
    </div>
  </div>

  <!-- The template for adding new field -->
  <div class="form-group hide" id="bookTemplate">
    <div class="col-sm-3 ">
      <input type="text" class="form-control" name="title[]" placeholder="IP Address" />
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" name="isbn[]" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
    </div>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="price[]" placeholder="Serial No" />
    </div>
    <div class="col-sm-1">
      <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
      </button>
    </div>
  </div>

  <div class="form-group">
    <div class="col-xs-5 ">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

    I have changed book[0].title to title[] and same way all other field names. Also the code of the target.php has been changed to 

        <?php
            //var_dump($_POST);

            print_r($_POST['title']);
        echo '<br/>';
            print_r($_POST['isbn']); 
        echo '<br/>';
            print_r($_POST['price']);

            die;        


            ?>

     Output when clicked on submit 
     Array ( [0] => 10.50.5.196 [1] => 10.50.5.16 [2] => ) 
     Array ( [0] => kvb2012 [1] => kvb2012 [2] => ) 
     Array ( [0] => 3X [1] => 3Y [2] => )