How to close the second bootstrap modal when submit and keep on the first modal?

Question

I am using Laravel 5. I have a page which contains 2 bootstrap modals in 1 page of PHP; modal on modal like in the picture below. My problem is when I click submit on the second modal, it will redirect to the blank page. I want that second modal is closed and the first modal is still in there. And I am trying using ajax and I am not good at it.

This is my submit button on the second modal:

<button type="submit" id="shipmat_btn" class="btn btn-success">Submit</button>

This is my controller code:

public function MaterialShipmentAdd(Request $request)
{
    $shipment = new Shipment;
    $shipment->setConnection('SUPPLYCHAIN');
    $shipment->MAT_ID = $request['sip_material_add'];
    $shipment->MAT_NAME = $getmatname[0]->MAT_NAME;
    $shipment->SIP_QUANTITY = $request['sip_quantity_add'];
    $shipment->SIP_CREATED_AT = date('Y-m-d H:i:s');
    $shipment->save();
}

The ajax code:

$('#shipmat_btn').submit(function(e) {
  $.ajax({
      url: "MaterialShipmentAdd",
      type: "POST",
      cache: false,
      success: function(data){
        $('#myModal2').modal('hide');
      }
  }); 
});

Answer 1

Your question isn't that much clear about your problem yet from I understand,

The reason you get redirect to a blank page because your form is submitting using HTML. You need to prevent that by adding e.preventDefault() inside $('#shipmat_btn').submit

You can hide the you first modal when the second modal started to show up by using show event. just like this,

$("#myModal2").on('show.bs.modal', function () {
    $('#yourModal1Id').modal('hide');
});

hope this helps!