Question

我有这个基本的HTML页面，并且有一个表格可以将数据上传到MySQL数据库。

还有一个JavaScript将数据传递给process.php文件。在这个文件中，我有一个INSERT查询。我使用这个脚本是因为我不想在提交时重新加载页面。

现在我有两个问题：

1）当我将数据发送到MySQL表（点击提交按钮）时，第一次插入 1 data = 1记录，这是正确的。如果我在输入表单字段中插入新数据，则 1 data = 2条记录相等。第三次，3条记录等......

但是如果我用POST打印print_r($_POST)传递的内容，我总是有一个数据数组( [comune] => foo )。

我也尝试使用unset()但没有成功。

2）当我第一次点击提交按钮时，没有动作，我必须点击两次。

这是带有JS脚本的HTML页面：

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta charset="utf-8" />
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
      <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
      <script type="text/javascript">

        $(document).ready(function(){
          $(".formValidation").validate({
            debug: false,
            rules: {
              name: "required",
              email: {
                required: true,
                email: true
              }
            },
            messages: {
              name: "Please let us know who you are.",
              email: "A valid email will help us get in touch with you.",
            },
            submitHandler: function(form) {
              // do other stuff for a valid form
              $('.formValidation').on('submit', function () {
                $.post('process.php', $(this).serialize(), function(data){
                  $('#results').html(data);
                });
              })
            }
        });
      }); 
    </script>
 </head>
 <body>
    <div class="row">
      <div class="col-xs-12">
        <form id="myform2" class="formValidation" name="myform2" action="" method="post"></form>
        <div class="col-xs-12 col-sm-4">
          <div class="widget-box">
            <div class="widget-body">
              <div class="widget-main">
                <div>
                  <label for="form-field-select-1">form</label>
                </div>
                <hr>
                <div class="widget-body">
                  <div class="widget-main">
                    <div>
                      <input type="text" name="comune" id="comune" value="" placeholder="Add something" form="myform2">
                      <input type="submit" name="submit" value="Submit" class="btn btn-sm btn-success" form="myform2">
                      <p id="result"></p>
                      <div id="results"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </body>
</html>

和process.php

foreach( $_POST as $key => $value ) {
  $sql = "INSERT INTO tbl_".$key."(nome_".$key.") VALUES ('$value')";
  $result = dbQuery($sql);
  unset($key);
  unset($value);
}

Answer 1

您有太多的提交处理程序。

只需在插件的submitHandler回调选项中执行ajax。

在内部，它已经在执行on('submit')所以第一次单击它时...您编写的用于执行ajax的处理程序已创建但尚未发送

下次它实际发送表单两次并添加另一个提交处理程序。第三次点击会发送3次并添加另一个提交处理程序等等

submitHandler: function(form) { // fires only when valid                      
     $.post('process.php', $(form).serialize(), function(data) {
        $('#results').html(data);
     });
}

Answer 2

您的提交处理程序逐个堆叠..每次对php文件的请求都会增加，导致在数据库中多次插入。

使用

submitHandler: function (form) {
                        $.post('process.php', $(this).serialize(), function (data) {
                            $('#results').html(data);
                        });
                        return false;
                }

希望这有帮助

使用JS在MySQL数据库中插入数据

2 个答案: