I want to open modal after submitting form?

Question

I want to open bootstrap modal after click "Submit" button in Form-1 and if "Send" button in the modal is clicked then send an email and also save the Form-1 into the database.

If I close it should Reject and Redirect to some page.

Thanks in advance.

PHP Code for Auto-generate Code

<?php
 $this->db->select_max('id');
 $result= $this->db->get('numform')->row();
 $result-id++;
 $result = "Num-".date('Ym')."-".$result->id;
?>

Form-1

<form method="post" action="<?php echo base_url(); ?>controller/method" onsubmit="return openModal();">
    <section class="content">
        <input type="submit" class="form-control" name="aValue" id="aValue" value="<?php echo $result; ?>" readonly> // This is form auto generating number
        <button type="submit" class="btn btn-primary">Submit</button>
</form>

//Javascript Code
function openModal(){
  
      var aValue= document.getElementById('aValue').value;
// I want place the above value(aValue) to the modal and fill up and some fields in the modal and save to submit into the database
      }

<!--Bootstrap Modal-->
<!--Email Modal -->
<div id="emailModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
<form action='<?php echo base_url(); ?>controller/method' method="POST">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Send email to User</h4>
      </div>
      <div class="modal-body">
           <label class="col-md-3">Email</label>
         <div class="form-group col-md-9">
            <input type="email" class="form-control" name="emailId" id="emailId" placeholder="Email ID" value="" required>
          </div>
          <label class="col-md-3">CC:</label>
          <div class="form-group col-md-9">
            <input type="email" class="form-control" name="emailCC" id="emailCC" placeholder="CC" required>
          </div>
          <label class="col-md-3">Message</label>
          <div class="form-group col-md-9">
            <textarea name="message" id="message" class="form-control" placeholder="Message" required></textarea>
          </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-info" id="send_email">Send</button>
      </div>
    </div>
 </form>
  <button  class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

If I Click send it how to end a message and Save the form -1 into the database. If I close it should save the data.

I think you shouild use Ajax to submit the form, and based on return values you can decide whether to show modal or redirect to different page — Purushottam zende
Remove form tags, add onclick function to buton and send ajax call. check its return data. and proceed further. w3schools.com/jquery/ajax_ajax.asp — Purushottam zende
another solution would be to use onsubmit() and then programmatically open your modal and return false in your form. Next, in your submit button in modal add an onclick function that will append the values that you put in your modal to yourform -1 and then submit it. in this way you will have all the values that you need. Cheers — Miggy

Smit Mehta Smit Mehta · Accepted Answer · 2018-01-16T07:25:13

1) Instead of the submit button in the form you can use simple HTML button and bind the click event of it. In click event grab the value of the aValue and set in the hidden value in the form (which is in the modal).

$('#YOUR_BUTTON_ID').on('click',function(e){
    e.preventDefault();
    var aValue= $('#aValue').val(); //grab the value
    $('#HIDDEN_INPUT').val(aValue); //set this is has hidden value in the form 
    $('#emailModal').modal("show"); // open the modal
    });

2) Now in the opened modal bind the two event : 1) To submit the form 2) To reject the form

$(document).on('click','#ACCEPT_BTN_ID',function(){
        $('#MODAL_FORM_ID').submit(); //submit the form
    });

    $(document).on('click','#REJECT_BTN_ID',function(){
        window.location.reload(); //refresh the same page.
    });

3) In the method of controller you can write sub-functions for sending message and saving the form values.

Hope this helps.

I want to open modal after submitting form?

1 Answers