Question

我有这个脚本，允许我在不重新加载页面的情况下将数据发送到数据库。表单数据被发送到文件process.php。在流程结束时，在表格的div框内打印一个通知，一切正常

<script type="text/javascript">
    $(document).ready(function(){   
        $(document).on('submit', '.formValidation', function(){
            var data = $(this).serialize();
            $.ajax({
                type : 'POST',
                url  : 'submit.php',
                data : data,
                success :  function(data){                      
                    $(".formValidation").fadeOut(500).hide(function(){
                        $(".result").fadeIn(500).show(function(){
                            $(".result").html(data);
                        });
                    });
                }
            });
            return false;
        });
    });
</script>

Page success.php：

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

print "ok";

通知<div class="result"></div>

的div框

问题：我有很多带有表单的div框，当我打印成功通知时，它会发生在所有<div>中，因为通话始终是{{1 }}

.result

我想要的内容：根据我发送的表单，在自己的div中打印成功通知。

谢谢

编辑：感兴趣的HTML

success: function(data){                        
    $(".formValidation").fadeOut(500).hide(function(){
        $(".result").fadeIn(500).show(function(){
            $(".result").html(data);
        });
    });
}

Answer 1

如果表单位于div中且结果位于表单旁边，则可以执行同级操作：

$form.next(".result").html(data);

或同一父母的其他地方：

$form.parent().find(".result").html(data);

或在你的情况下

$form.find(".result").html(data);

像这样 - 注意我已经删除了所有不必要的隐藏。

$(function() {
  $(document).on('submit', '.formValidation', function(e) {
    e.preventDefault();
    var data = $(this).serialize();
    $form = $(this); // save a pointer to THIS form
    $result = $form.find(".result");
    $.ajax({
      type: 'POST',
      url: 'submit.php',
      data: data,
      success: function(data) {
        $result.html(data);
        $form.fadeOut(500, function() {
          $result.fadeIn(500)
        });
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="myform2" class="formValidation" name="myform2" action="" method="post"></form>
<!-- this is the form for the <div> in html5 -->
<div class="widget-body">
  <div class="widget-main">
    <div>
      <label for="form-field-select-1">Comune</label>
      <select name="comune" class="form-control" id="form-field-select-1" form="myform2">
        <option value="">Seleziona...</option>
      </select>
    </div>

    <hr>
    <div class="widget-body">
      <div class="widget-main">
        <div>

          <input type="text" name="comune" id="comune" value="" placeholder="Aggiungi Comune" form="myform2">
          <input type="submit" name="submit" value="Submit" class="btn btn-sm btn-success" form="myform2">

          <div class="result"></div>
        </div>
      </div>
    </div>
  </div>
</div>

根据我发送的表单在他们自己的div中打印成功通知

1 个答案: