0

Scenario :

  • Bootstrap 4 form has
    • 1 submit button down the bottom
    • 2 modals with a submit button in each.

Working Submit buttons :

  • Main submit button works.
  • Add new contractor modal submit button works.

Make Submit to work :

  • Add new contractor contact modal submit button not working.

I have put the shorted code in here but the button not working is at the very bottom and you cant see it because the error message cuts it off.

Here is the jsfiddle version.

 //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>
Abhishek Kumar
  • 2,501
  • 10
  • 25
Stika
  • 15
  • 8
  • You have [nested forms](https://stackoverflow.com/q/379610/5359105). If you inspect the element of the page, `
    ` is not between `
    ` and `
    `, but in the previous form. What's more, the last line `});` of the js snippet seems like part of ignored code, which causes error.
     – Ben Lee Aug 08 '18 at 10:10
  • So I need to move the 2 modals outside the main form? – Stika Aug 08 '18 at 14:40

1 Answers1

0

Below is the combination of your two snippets. I surround the first one with script tag and remove the last line });.

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

I'm not familiar with php, so I just write them in test.html and open it with Firefox. If I click on the "Add job" button or the first "Save" button, the page jumps to add_job.php. However, the action of the first "Save" button is not specified. As mentioned in Can you nest html forms?, the modals shall be moved outside the main form.

Unfortunately, it's not the end. After moving modals outside the main form, add action attributes for the other two forms, for example, insert_new_contractor.php and insert_new_contractor_contact.php. Now, you'll find that even the first "Save" button doesn't respond to a click, as a click on "Save" button won't lead to a new page. It seems that a submit button can be outside of a form, but here, which form to be submitted seems unclear (lack a reference on how browser works at this time ... ). Try to move the submit button inside the corresponding form. Surround a modal with the related form tag, all three buttons work. Setting onclick attribution for the "Save" buttons also works.

Ben Lee
  • 102
  • 1
  • 1
  • 9