Bootstrap - 表单未在模式内提交

Posted 2023-05-08

【中文标题】Bootstrap - 表单未在模式内提交

【英文标题】：Bootstrap - Form not submitting inside a modal

【发布时间】：2018-09-03 08:37:26

【问题描述】：

我有一个在模态框内的表单，它没有提交我的 php 操作。当我将表单置于模态之外时，它会按照我的意愿提交，但是一旦在模态中提交变得无响应，这是代码 我正在使用：

div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" 
     aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myLargeModalLabel">

  <div class="modal-dialog modal-lg">
<div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add A New Appointment</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">



<form id="submit_form">
                     <div class="row">
                         <div class="col">
                        <label>Name</label>  
                            <input type="text" name="fname" id="fname" class="form-control" /> 
                             </div>
                      <div class="col">                         
                        <label>Date</label>  
                            <input type="date" name="datepicker" id="datepicker" class="form-control" />
                         </div> 
                                                  </div>                                                  


                        <div class="form-group">
                            <label class="CustomLabel">Appointment Information</label>  
                     <textarea name="notes" id="notes" class="form-control"></textarea>  
                     </div> 
                     <input type="button" name="submit" id="submit" class="btn btn-info" value="Add Appointment" />  
                     <span id="error_message" class="text-danger"></span>  
                     <span id="success_message" class="text-success"></span>  
                </form> 

javascript：

 $(document).ready(function()  
  $('#submit').click(function() 
  var name = $('#fname').val();  
       var message = $('#notes').val();  
       if(name == '' || message == '')  
         
            $('#error_message').html("All Fields are required");  
         
       else  
     
            $('#error_message').html('');  
            $.ajax(  
                 url:"insert.php",  
                 method:"POST",  
                 data:fname:name, notes:message,  
                 success:function(data)  
                      $("form").trigger("reset");  
                      $('#success_message').fadeIn().html(data);  
                      setTimeout(function()  
                           $('#success_message').fadeOut("Slow");  
                      , 2000);  
                      
               );  
              
        );  
    );  

【参考方案1】：

看到这个工作小提琴Working Fiddle of your Code

<form id="submit_form">
  <div class="row">
    <div class="col">
      <label>Name</label>
      <input type="text" name="fname" id="fname" class="form-control" />
    </div>
    <div class="col">
      <label>Date</label>
      <input type="date" name="datepicker" id="datepicker" class="form-control" />
    </div>
  </div>


  <div class="form-group">
    <label class="CustomLabel">Appointment Information</label>
    <textarea name="notes" id="notes" class="form-control"></textarea>
  </div>
  <input type="button" name="submit" id="submit" class="btn btn-info" value="Add Appointment" />
  <span id="error_message" class="text-danger"></span>
  <span id="success_message" class="text-success"></span>
</form>

JS 代码

$(document).ready(function() 
  $('#submit').click(function() 
    var name = $('#fname').val();
    var message = $('#notes').val();
    if (name == '' || message == '') 
      $('#error_message').html("All Fields are required");
     else 
      $('#error_message').html('');
      $.ajax(
        url: "insert.php",
        method: "POST",
        data: 
          fname: name,
          notes: message
        ,
        success: function(data) 
          $("form").trigger("reset");
          $('#success_message').fadeIn().html(data);
          setTimeout(function() 
            $('#success_message').fadeOut("Slow");
          , 2000);
        
      );
    
  );
);

我没有看到任何问题，除了未加载 jquery 引用。这可以在浏览器的开发者控制台中看到

【讨论】：

嗨，我也在使用引导程序，我想知道这是否会导致问题？

保持 jquery 作为页面的第一个脚本。查看starter模板的来源link

嗨，我尝试在我的 中添加 jquery 脚本，但提交按钮上仍然没有任何操作？