php - ブートストラップ動的フィールドからmysqlテーブルにデータを挿入する

Question

次のリンクを使用しています ブートストラップで動的フィールドを作成するために、異なる名前のフィールドを追加しています。これらの動的フィールドから mysql にデータを挿入したいと思います。始め方がいまいち理解できません。皆さん、私を助けてくれませんか

以下のコードを試しました

$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);
?>

フォームコード

$(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>

今、私は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>

送信ボタンをクリックすると、次の出力が得られます。

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

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