我想在提交表单后打开模式？

Question

我想在单击 Form-1 中的“提交”按钮后打开引导模式，如果单击模式中的“发送”按钮，则发送电子邮件并将 Form-1 保存到数据库中。

如果我关闭它应该拒绝并重定向到某个页面。

提前致谢。

用于自动生成代码的 PHP 代码

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

如果我单击发送它如何结束消息并将表单 -1 保存到数据库中。如果我关闭它应该保存数据。

Answer 1

1) 代替表单中的提交按钮，您可以使用简单的 HTML 按钮并绑定它的点击事件。在点击事件中获取aValue 的值并在表单中设置隐藏值（在模态中）。

$('#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) 现在在打开的模式中绑定两个事件：1) 提交表单 2) 拒绝表单

$(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) 在控制器的方法中，您可以编写发送消息和保存表单值的子函数。

希望这会有所帮助。