1个提交表单中的3个提交按钮中没有一个有效

Question

场景：

• Bootstrap 4表单具有
  • 底部的1个提交按钮
  • 2个模式，每个模式中都有一个提交按钮。

工作中的提交按钮：

• 主要提交按钮起作用。
  
• Add new contractor modal 提交按钮有效。
  

进行提交：

• Add new contractor contact modal 提交按钮不起作用。
  

我在这里输入了短代码，但是按钮不起作用在最底部，您无法看到它，因为错误消息将其切断。

这里是jsfiddle版本。

	//Add new contractor
	$("#contractor").change(function () {
      if ($(this).val() === 'addnewcon') {
        $('#addnewconmodal').modal({show: true});
      } else if ($(this).val() !== 'addnewcon') {
        $('#addnewconmodal').modal({show: false});
    }

    });

    //Add new contractor contact
  	$("#contact").change(function () {
        if ($(this).val() === 'addnewcontact') {
          $('#addnewcontactmodal').modal({show: true});
        } else if ($(this).val() !== 'addnewcontact') {
          $('#addnewcontactmodal').modal({show: false});
      }

      });


//Ajax call to get selected contractor

  $("#contractor").on('change',function() {
    var conselected = $(this).val();
    if(conselected != "") {
      $.ajax({
        url:"ajax.php",
        data:{consel_id:conselected},
        type:'POST',
        success:function(response) {
          console.log(response);
          var resp = $.trim(response);
          $("#contact").html(resp);
          console.log(resp);
          $("#contact").selectpicker('refresh');
        }
      });
    } else {
      $("#contact").html("<option value=''>------- Select --------</option>");
    }
  });
//Ajax add new contractor
$(".cont_add").click(function() {
  $(".selectpicker").selectpicker('refresh');
});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
if(isset($_POST['add_job'])){
  $req_fields = array('location','contractor','length', 'groundc' );
  validate_fields($req_fields);
  if(empty($errors)){
    $j_location  	= remove_junk($db->escape($_POST['location'])); 	//checked
    $j_startdate   = remove_junk($db->escape($_POST['startdate']));	//checked
    $n_startdate	  = date('Y-m-d', strtotime($j_startdate));
    $j_address 	= remove_junk($db->escape($_POST['address'])); 		//checked
    $j_contractor  = remove_junk($db->escape($_POST['contractor'])); 	//checked
    $j_contractor_contact = remove_junk($db->escape($_POST['contact'])); //checked
    $j_length   	= remove_junk($db->escape($_POST['length']));		//checked
    $j_groundc  	= remove_junk($db->escape($_POST['groundc']));		//checked
    $j_jobstatus 	= remove_junk($db->escape($_POST['jobstatus']));    //checked
    $j_driller 	= remove_junk($db->escape($_POST['driller']));		//checked
    $j_boresize 	= remove_junk($db->escape($_POST['boresize']));
    $j_pipesize 	= remove_junk($db->escape($_POST['pipesize']));
    $j_belowinvert = remove_junk($db->escape($_POST['belowinvert']));
    $j_grade 		= remove_junk($db->escape($_POST['grade']));
    $j_centers 	= remove_junk($db->escape($_POST['centers']));
    $j_centraliser = remove_junk($db->escape($_POST['centraliser']));
    $j_notes 		= remove_junk($db->escape($_POST['notes']));
    $date    		= make_date();

    if(!isset($_POST['startdate']) || empty($_POST['startdate'])) {
      $n_startdate = 'NULL';

    } else {
      $j_startdate   = remove_junk($db->escape($_POST['startdate']));
      $n_startdate	  = date('Y-m-d H:i:s', strtotime($j_startdate));
      $n_startdate = sprintf("'%s'", $n_startdate);
    }

    $query  = "INSERT INTO job (job_status_id, start_date, date_added, location, address, driller_id, contractor_id, bore_size,
      head_id, cutters_id, pipe_size, length, ground_conditions, shield_size, depth, below_invert, grade, centers, hydrant,
      hydrant_type, vacuum_hose, centralisers, notes)";
      $query	 .= "VALUES ('{$j_jobstatus}', {$n_startdate}, '{$date}', '{$j_location}', '{$j_address}', '{$j_driller}', '{$j_contractor}', '{$j_boresize}', '{$j_pipesize}', '{$j_length}', '{$j_groundc}', '{$j_belowinvert}', '{$j_centers}',  '{$j_centraliser}', '{$j_notes}')";
      if($db->query($query)){
        $session->msg('s',"Job added ");
        redirect('add_job.php', false);
      } else {
        $session->msg('d',' Sorry failed to added!');
        redirect('jobs.php', false);
      }

    } else{
      $session->msg("d", $errors);
      redirect('add_job.php',false);
    }

  } elseif(isset($_POST['add_cont'])){

   $req_fields = array('n_contractor_name');
   validate_fields($req_fields);
   if(empty($errors)){
           $name   = remove_junk($db->escape($_POST['n_contractor_name']));
        $query = "INSERT INTO contractor (";
        $query .="Name";
        $query .=") VALUES (";
        $query .=" '{$name}'";
        $query .=")";
        if($db->query($query)){
          //sucess
          $session->msg('s',"New contractor has been creted! ");
          redirect('add_job.php', false);
        } else {
          //failed
          $session->msg('d',' Sorry failed to add contractor!');
          redirect('add_job.php', false);
        }
   } else {
     $session->msg("d", $errors);
      redirect('add_job.php',false);
   }
 } elseif(isset($_POST['add_new_contact'])){

  $req_fields = array('n_contractor_contact_name', 'n_contractor_contact_number', 'n_contractor_contact_id');
  validate_fields($req_fields);

  if(empty($errors)){
          $contact_name   = remove_junk($db->escape($_POST['n_contractor_contact_name']));
          $contact_number   = remove_junk($db->escape($_POST['n_contractor_contact_number']));
          $contact_id = remove_junk($db->escape($_POST['n_contractor_contact_id']));
       $query = "INSERT INTO contractor_contact (Name, Number, contractor_id)";
       $query .="VALUES ('{$contact_name}','{$contact_number}','{$contact_id}')";
       if($db->query($query)){
         //sucess
         $session->msg('s',"New contractor has been creted! ");
         redirect('add_job.php', false);
       } else {
         //failed
         $session->msg('d',' Sorry failed to add contractor!');
         redirect('add_job.php', false);
       }
  } else {
    $session->msg("d", $errors);
     redirect('add_job.php',false);
  }
}



  ?>
  <?php include_once('layouts/header.php'); ?>
  <div class="row">
    <div class="col-md-12">
      <?php echo display_msg($msg); ?>
    </div>
  </div>
  <form method="post" action="add_job.php" class="clearfix">

<!-- Buttons At bottom -->
    <div class="row" id="addbuttons">
      <div class="col-md-12 col-md-offset-1">
        <div class="panel-group">
          <div class="panel panel-default">
            <div class="panel-heading">
              <strong>
                <span class="glyphicon glyphicon-th"></span>
                <span></span>
              </strong>
            </div>
                <div class="row justify-content-center">
                  <div class="col-md-2">
                    <button type="button" name="goback" onclick="goBack()" class="btn btn-danger">Back</button>
                    <button type="submit" name="add_job" class="btn btn-success">Add job</button>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
<!-- Modal add new contractor -->
                          <div id="addnewconmodal" class="modal fade" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h4 class="modal-title" id="myModalLabel">Add new contractor</h4>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                  <form method="post" id="insert_new_contractor">
                                    <input type="hidden" value="add" name="action" id="action">
                                  <div class="col-md-5">
                                    <div class="form-group">
                                      <label for="form_n_contractor_name">Contractor's name</label>
                                      <input id="form_n_contractor_name" type="text" name="n_contractor_name" class="form-control" placeholder="Contractor's name">
                                      <div class="help-block with-errors"></div>
                                    </div>
                                  </div>
                                </form>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                  <button type="submit" class="btn btn-primary add_cont" id="add_cont" name="add_cont">Save</button>
                                </div>
                              </div>
                            </div>
                          </div>
<!-- Modal add new contractor -->
<!-- Modal add new contractor contact -->
                          <div id="addnewcontactmodal" class="modal fade" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h4 class="modal-title" id="myModalLabel">Add new contact</h4>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                  <form method="post" id="insert_new_contractor_contact">
                                    <input type="hidden" value="add" name="action" id="action">
                                    <div class="col-md-5">
                                      <div class="form-group">
                                        <label for="form_n_contractor_contact_id">Contractor ID</label>
                                        <input id="form_n_contractor_contact_id" type="hidden number" name="n_contractor_contact_id" class="form-control" value="<?php echo $con['ID'] ?>">
                                        <div class="help-block with-errors"></div>
                                      </div>
                                    </div>
                                  <div class="col-md-5">
                                    <div class="form-group">
                                      <label for="form_n_contractor_contact_name">Contractor's name</label>
                                      <input id="form_n_contractor_contact_name" type="text" name="n_contractor_contact_name" class="form-control" placeholder="Contractor's name">
                                      <div class="help-block with-errors"></div>
                                    </div>
                                  </div>
                                  <div class="col-md-5">
                                    <div class="form-group">
                                      <label for="form_n_contractor_contact_number">Contractor's number</label>
                                      <input id="form_n_contractor_contact_number" type="tel" name="n_contractor_contact_number" class="form-control" placeholder="Contractor's number">
                                      <div class="help-block with-errors"></div>
                                    </div>
                                  </div>
                                </form>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                  <button type="submit" class="btn btn-primary add_new_contact" id="add_new_contact" name="add_new_contact">Save</button>
                                </div>
                              </div>
                            </div>
                          </div>
<!-- Modal add new contractor contact -->
  </form>

Answer 1

以下是您的两个摘要的组合。我用script标签将第一行括起来，然后删除最后一行});。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
if(isset($_POST['add_job'])){
  $req_fields = array('location','contractor','length', 'groundc' );
  validate_fields($req_fields);
  if(empty($errors)){
    $j_location  	= remove_junk($db->escape($_POST['location'])); 	//checked
    $j_startdate   = remove_junk($db->escape($_POST['startdate']));	//checked
    $n_startdate	  = date('Y-m-d', strtotime($j_startdate));
    $j_address 	= remove_junk($db->escape($_POST['address'])); 		//checked
    $j_contractor  = remove_junk($db->escape($_POST['contractor'])); 	//checked
    $j_contractor_contact = remove_junk($db->escape($_POST['contact'])); //checked
    $j_length   	= remove_junk($db->escape($_POST['length']));		//checked
    $j_groundc  	= remove_junk($db->escape($_POST['groundc']));		//checked
    $j_jobstatus 	= remove_junk($db->escape($_POST['jobstatus']));    //checked
    $j_driller 	= remove_junk($db->escape($_POST['driller']));		//checked
    $j_boresize 	= remove_junk($db->escape($_POST['boresize']));
    $j_pipesize 	= remove_junk($db->escape($_POST['pipesize']));
    $j_belowinvert = remove_junk($db->escape($_POST['belowinvert']));
    $j_grade 		= remove_junk($db->escape($_POST['grade']));
    $j_centers 	= remove_junk($db->escape($_POST['centers']));
    $j_centraliser = remove_junk($db->escape($_POST['centraliser']));
    $j_notes 		= remove_junk($db->escape($_POST['notes']));
    $date    		= make_date();

    if(!isset($_POST['startdate']) || empty($_POST['startdate'])) {
      $n_startdate = 'NULL';

    } else {
      $j_startdate   = remove_junk($db->escape($_POST['startdate']));
      $n_startdate	  = date('Y-m-d H:i:s', strtotime($j_startdate));
      $n_startdate = sprintf("'%s'", $n_startdate);
    }

    $query  = "INSERT INTO job (job_status_id, start_date, date_added, location, address, driller_id, contractor_id, bore_size,
      head_id, cutters_id, pipe_size, length, ground_conditions, shield_size, depth, below_invert, grade, centers, hydrant,
      hydrant_type, vacuum_hose, centralisers, notes)";
      $query	 .= "VALUES ('{$j_jobstatus}', {$n_startdate}, '{$date}', '{$j_location}', '{$j_address}', '{$j_driller}', '{$j_contractor}', '{$j_boresize}', '{$j_pipesize}', '{$j_length}', '{$j_groundc}', '{$j_belowinvert}', '{$j_centers}',  '{$j_centraliser}', '{$j_notes}')";
      if($db->query($query)){
        $session->msg('s',"Job added ");
        redirect('add_job.php', false);
      } else {
        $session->msg('d',' Sorry failed to added!');
        redirect('jobs.php', false);
      }

    } else{
      $session->msg("d", $errors);
      redirect('add_job.php',false);
    }

  } elseif(isset($_POST['add_cont'])){

   $req_fields = array('n_contractor_name');
   validate_fields($req_fields);
   if(empty($errors)){
           $name   = remove_junk($db->escape($_POST['n_contractor_name']));
        $query = "INSERT INTO contractor (";
        $query .="Name";
        $query .=") VALUES (";
        $query .=" '{$name}'";
        $query .=")";
        if($db->query($query)){
          //sucess
          $session->msg('s',"New contractor has been creted! ");
          redirect('add_job.php', false);
        } else {
          //failed
          $session->msg('d',' Sorry failed to add contractor!');
          redirect('add_job.php', false);
        }
   } else {
     $session->msg("d", $errors);
      redirect('add_job.php',false);
   }
 } elseif(isset($_POST['add_new_contact'])){

  $req_fields = array('n_contractor_contact_name', 'n_contractor_contact_number', 'n_contractor_contact_id');
  validate_fields($req_fields);

  if(empty($errors)){
          $contact_name   = remove_junk($db->escape($_POST['n_contractor_contact_name']));
          $contact_number   = remove_junk($db->escape($_POST['n_contractor_contact_number']));
          $contact_id = remove_junk($db->escape($_POST['n_contractor_contact_id']));
       $query = "INSERT INTO contractor_contact (Name, Number, contractor_id)";
       $query .="VALUES ('{$contact_name}','{$contact_number}','{$contact_id}')";
       if($db->query($query)){
         //sucess
         $session->msg('s',"New contractor has been creted! ");
         redirect('add_job.php', false);
       } else {
         //failed
         $session->msg('d',' Sorry failed to add contractor!');
         redirect('add_job.php', false);
       }
  } else {
    $session->msg("d", $errors);
     redirect('add_job.php',false);
  }
}



  ?>
  <?php include_once('layouts/header.php'); ?>
  <div class="row">
    <div class="col-md-12">
      <?php echo display_msg($msg); ?>
    </div>
  </div>
  <form method="post" action="add_job.php" class="clearfix">

<!-- Buttons At bottom -->
    <div class="row" id="addbuttons">
      <div class="col-md-12 col-md-offset-1">
        <div class="panel-group">
          <div class="panel panel-default">
            <div class="panel-heading">
              <strong>
                <span class="glyphicon glyphicon-th"></span>
                <span></span>
              </strong>
            </div>
                <div class="row justify-content-center">
                  <div class="col-md-2">
                    <button type="button" name="goback" onclick="goBack()" class="btn btn-danger">Back</button>
                    <button type="submit" name="add_job" class="btn btn-success">Add job</button>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
<!-- Modal add new contractor -->
                          <div id="addnewconmodal" class="modal fade" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h4 class="modal-title" id="myModalLabel">Add new contractor</h4>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                  <form method="post" id="insert_new_contractor">
                                    <input type="hidden" value="add" name="action" id="action">
                                  <div class="col-md-5">
                                    <div class="form-group">
                                      <label for="form_n_contractor_name">Contractor's name</label>
                                      <input id="form_n_contractor_name" type="text" name="n_contractor_name" class="form-control" placeholder="Contractor's name">
                                      <div class="help-block with-errors"></div>
                                    </div>
                                  </div>
                                </form>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                  <button type="submit" class="btn btn-primary add_cont" id="add_cont" name="add_cont">Save</button>
                                </div>
                              </div>
                            </div>
                          </div>
<!-- Modal add new contractor -->
<!-- Modal add new contractor contact -->
                          <div id="addnewcontactmodal" class="modal fade" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h4 class="modal-title" id="myModalLabel">Add new contact</h4>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                  <form method="post" id="insert_new_contractor_contact">
                                    <input type="hidden" value="add" name="action" id="action">
                                    <div class="col-md-5">
                                      <div class="form-group">
                                        <label for="form_n_contractor_contact_id">Contractor ID</label>
                                        <input id="form_n_contractor_contact_id" type="hidden number" name="n_contractor_contact_id" class="form-control" value="<?php echo $con['ID'] ?>">
                                        <div class="help-block with-errors"></div>
                                      </div>
                                    </div>
                                  <div class="col-md-5">
                                    <div class="form-group">
                                      <label for="form_n_contractor_contact_name">Contractor's name</label>
                                      <input id="form_n_contractor_contact_name" type="text" name="n_contractor_contact_name" class="form-control" placeholder="Contractor's name">
                                      <div class="help-block with-errors"></div>
                                    </div>
                                  </div>
                                  <div class="col-md-5">
                                    <div class="form-group">
                                      <label for="form_n_contractor_contact_number">Contractor's number</label>
                                      <input id="form_n_contractor_contact_number" type="tel" name="n_contractor_contact_number" class="form-control" placeholder="Contractor's number">
                                      <div class="help-block with-errors"></div>
                                    </div>
                                  </div>
                                </form>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                  <button type="submit" class="btn btn-primary add_new_contact" id="add_new_contact" name="add_new_contact">Save</button>
                                </div>
                              </div>
                            </div>
                          </div>
<!-- Modal add new contractor contact -->
  </form>

<script>
//Add new contractor
	$("#contractor").change(function () {
      if ($(this).val() === 'addnewcon') {
        $('#addnewconmodal').modal({show: true});
      } else if ($(this).val() !== 'addnewcon') {
        $('#addnewconmodal').modal({show: false});
    }

    });

    //Add new contractor contact
  	$("#contact").change(function () {
        if ($(this).val() === 'addnewcontact') {
          $('#addnewcontactmodal').modal({show: true});
        } else if ($(this).val() !== 'addnewcontact') {
          $('#addnewcontactmodal').modal({show: false});
      }

      });


//Ajax call to get selected contractor

  $("#contractor").on('change',function() {
    var conselected = $(this).val();
    if(conselected != "") {
      $.ajax({
        url:"ajax.php",
        data:{consel_id:conselected},
        type:'POST',
        success:function(response) {
          console.log(response);
          var resp = $.trim(response);
          $("#contact").html(resp);
          console.log(resp);
          $("#contact").selectpicker('refresh');
        }
      });
    } else {
      $("#contact").html("<option value=''>------- Select --------</option>");
    }
  });
//Ajax add new contractor
$(".cont_add").click(function() {
  $(".selectpicker").selectpicker('refresh');
});
</script>

我对php不熟悉，所以我只用test.html编写它们，然后用Firefox打开它。如果我单击“添加作业”按钮或第一个“保存”按钮，页面将跳至add_job.php。但是，未指定第一个“保存”按钮的操作。如Can you nest html forms?中所述，模态应移至主要形式之外。

不幸的是，这还没有结束。将模态移到主窗体之外后，为其他两种窗体添加action属性，例如insert_new_contractor.php和insert_new_contractor_contact.php。现在，您会发现，即使第一个“保存”按钮也不会响应单击，因为单击“保存”按钮不会导致新页面。似乎是a submit button can be outside of a form，但是在这里，要提交的表单似乎不清楚（目前没有关于浏览器工作方式的参考...）。尝试移动相应表单内的提交按钮。用相关的表单标签包围模式，所有这三个按钮都起作用。为“保存”按钮设置onclick归因也可以。