I want to open modal after submitting form?

M N

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.

Smit Mehta

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to open a bootstrap modal box after submitting a form by barcode scanner

I want my modal to open only after validates the form angular? Appreciate your answer

Show bootstrap popover after submitting form that is in modal

jQuery modal not showing after submitting form

Open a popup after successfully submitting form

After submitting my React form, is there an easier way of passing an object to the page I want to redirect to?

Stop form from submitting until modal is open in ajax

form in modal not submitting with jquery

Modal box on submitting a form

After submitting the form, user can still edit it. I want to enable the feature of timer that after 2 hours of submission

How to prevent the modal from closing after submitting form

How to reset a bootstrap modal after submitting the form in jquery?

Close a bootstrap modal 5 after asynchronously submitting a form with vue js

How can I trigger closing a modal containing a form after valid form submission and open a post form submission modal using JS?

Want to redirect to the URL after successfully submitting the form JS

I want to redirect the current page after submitting the form....it should return the page from where request is send using php

After submitting a POST form open a new window showing the result

How to open another submit form after submitting one on html or javascript?

open a popup window in mvc asp.net after submitting a form

Bootstrap modal submitting my form

Modal form not submitting user input

Submitting form from a modal in Ember

Form clears after submitting

Form not submitting after form validation

i want modal display in full screen when open in mobile view

How can I empty this AngularJS form after submitting the data?

after submitting a form to email i get 2 email instead 1

How do I redirect users after successfully submitting form data?

Why am I getting null object after submitting form in Spring?