1 提交无效 3 表单中的提交按钮

【问题标题】：1 Submit not working out of 3 Submit buttons in a form1 提交无效 3 表单中的提交按钮
【发布时间】：2019-01-15 12:46:05
【问题描述】：

场景：

  • 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>

【问题讨论】：

  • 你有nested forms。如果检查页面的元素，&lt;div id="addnewconmodal"&gt; 不在&lt;form class="clearfix"&gt; 和&lt;div id="addnewcontactmodal"&gt; 之间，而是在前面的形式中。更何况js sn-p的最后一行});好像是被忽略代码的一部分，导致报错。
  • 所以我需要将 2 个模态框移到主窗体之外？

标签： html bootstrap-4 bootstrap-modal form-submit forms


【解决方案1】：

以下是您的两个 sn-ps 的组合。我用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，用火狐打开。如果我点击“添加工作”按钮或第一个“保存”按钮，页面会跳转到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 属性也可以。

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2019-03-21
    • 2020-04-09
    • 2014-03-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-19
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode