Question

我有两个表单使用AJAX将数据发布到另一个页面，第一个表单很好地发布了数据，但是第二个表单刷新了页面

我尝试将第二种形式的JavaScript放置在另一个文件中，或使用标签放置在标头中，但这无济于事。

JavaScript代码：

$(document).ready(function(){
var form = $('#form1');   
form.submit(function(event){

    var data1= $('#data1').val(); 
    var data2= $('#data2').val(); 

    $.post('includes/page2.inc.php', {data1: data1, data2: data2}, function(data){
        $('#div').html(data);
    });
}
event.preventDefault();
});

    var form2 = $('#form2');
    form2.submit(function(event){
        var data3= $('#data3').val(); 
        var data4= $('#data4').val(); 
        $.post('page2.inc.php', {data3: data3, data4: data4}, function(data){
            $('#div').html(data);
        });
    }
event.preventDefault();
});
});

HTML：

<form id="form1" action = "" method = "POST">
        <div class="container">
            <div class="form-row">
                <div class="col-3" >
                    <label style="padding: 2px;">Option 1</label>
                    <select class="custom-select" id="data1" name="select1">
                        <option selected>Choose...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
            </div><br>
            <div class="form-row modmarginleft">
                <div class="col-3">
                    <label style="padding: 2px;">Option 2</label>
                    <select class="custom-select" id="data2" name="select2">
                        <option selected>Choose...</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
            </div><br>
            <div class="btn1">
                <button type="submit" name="btn1" class="btn btn-danger" style="margin: 10px;" value="">Next</button>
            </div>
        </div>
    </form>


<form id = "form2" action = "" method = "POST">
        <div class="form-row ">
            <div class="col-3" style="padding:10px;">
                <label class="checkbox-inline"><input id="data3" type="checkbox" value="">  Option 1</label>
            </div>
            <div class="col-3" style="padding:10px;">
                <label class="checkbox-inline"><input id="data4" type="checkbox" value="">  Option 2</label>
            </div>
        </div><br>
        <div class="btn1">
            <button type="submit" name="btn2" id = "btn13" class="btn btn-danger" style="margin: 10px;" value="">Next</button>
        </div>
    </form>

我希望'form2'在提交后不进行发布，而当前正在执行，第一个表单提交而没有发布 if 我删除了第二个表单的代码，但如果我包括了。

我忘了在帖子中提及，我不知道这是否重要，但第二种形式在另一个文件中。

编辑：通过将文档（page2.php）绑定到第二个表单的提交来解决问题

Answer 1

使用jquery .on()事件处理程序观察submit事件。触发事件后，请阻止事件的默认操作，并在DOM树上停止事件冒泡（传播）。

以下是示例：

$(function() {
  const events = {
    submit: 'submit'
  };
  const $form1 = $('#form1');
  const $form2 = $('#form2');
  
  $form1.on(events.submit, function(event) {
  
    // Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
    event.stopPropagation(); 
    
    // Default action of the event will not be triggered.
    event.preventDefault(); 
    
    fakeAjax().then(function(res) {
      console.log('Submited 1', res);
    });
  });
  
  $form2.on(events.submit, function(event) {
  
    // Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
    event.stopPropagation(); 
    
    // Default action of the event will not be triggered.
    event.preventDefault(); 
    
    fakeAjax().then(function(res) {
      console.log('Submited 2', res);
    });
  });
  
  // ignore this, just to demonstrate ajax call
  function fakeAjax() {
    const deferred = $.Deferred();
    const timeout = setTimeout(function(){
      deferred.resolve({
        data: {
          dummy1: 'Dummy 1'
        }
      });
      clearTimeout(timeout);
    }, 1000);
    return deferred.promise();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form1" method="POST">
  <div class="container">
    <div class="form-row">
      <div class="col-3" >
        <label>
          Option 1
        </label>
        <select class="custom-select" id="data1" name="select1">
          <option selected>Choose...</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
      
    <br>
      
    <div class="form-row modmarginleft">
      <div class="col-3">
        <label>
          Option 2
        </label>
        <select class="custom-select" id="data2" name="select2">
          <option selected>Choose...</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>
    </div>
        
    <br>
    
    <div class="btn1">
      <button type="submit" name="btn1" class="btn btn-danger">
        Next
      </button>
    </div>
  </div>
</form>

<br>
<br>

<form id="form2" method="POST">
  <div class="form-row">
    <div class="col-3">
      <label class="checkbox-inline">
        <input id="data3" type="checkbox" value="">
        Option 1
      </label>
    </div>
    <div class="col-3">
      <label class="checkbox-inline">
        <input id="data4" type="checkbox" value=""> 
        Option 2
      </label>
    </div>
  </div>
        
  <br>
        
  <div class="btn1">
    <button type="submit" name="btn2" id="btn13" class="btn btn-danger">
      Next
    </button>
  </div>
</form>

Answer 2

form2无法正常工作，因为它在您的$(document).ready函数之外。

此外，event.preventDefault()应该在每个表单的Submit函数中。总体而言，您的代码应如下所示

$(document).ready(function(){
    var form = $('#form1');
    form.submit(function(event){
        event.preventDefault();
        var data1= $('#data1').val();
        var data2= $('#data2').val();

        $.post('includes/page2.inc.php', {data1: data1, data2: data2}, function(data){
            $('#div').html(data);
        });

    });

    var form2 = $('#form2');
    form2.submit(function(event){
        event.preventDefault();  
         var data3= $('#data3').val();
        var data4= $('#data4').val();
        $.post('page2.inc.php', {data3: data3, data4: data4}, function(data){
            $('#div').html(data);
        });

    });
});

即使禁用AJAX表单发布

2 个答案: