小贝子编程

将数据从引导动态字段插入 MySQL 表



>我正在使用以下链接添加具有不同名称的字段，以便在引导中创建动态字段。现在我想将这些动态字段中的数据插入到 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] => 
            )


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

我已经将 book[0].title 更改为 title[]，并且与所有其他字段名称相同。此外，目标.php的代码已更改为 

    <?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] => )

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium