将值从表单传递到codeigniter中的模态框

Question

我的观点页面：

        <form id="myForm" >
            <div class="input-group date">
              <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
              </div>
              <input type="text" class="form-control datepicker pull-right" name="from_date" placeholder="From"> // want this value in my modal box
            </div>
          </div>
          <div class="col-md-6">
            <div class="input-group date">
              <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
              </div>
              <input type="text" class="form-control datepicker pull-right" name="to_date" placeholder="To"> // want this value in my modal box

            </div>
          </div>
          <div class="col-md-12">
          <br/>
          <center><button class="btn btn-success" onclick="search_sale_return()"><i class="glyphicon glyphicon-plus"></i> Create New Stock</button></center> // on this click call the modal
          </div>
          </form>

JavaScript

 <!-- Search sale return -->
              function search_sale_return()
              {   
            save_method = 'sale_return';
           $('#form_sale_return')[0].reset(); // reset form on modals
       $('.form-group').removeClass('has-error'); // clear error class
       $('.help-block').empty(); // clear error string


    //Ajax Load data from ajax
    $.ajax({
    url : "<?php echo site_url('PharmacyController/search_sale_return')?>/"     + 1, // bring value from database via controller in json_encode form 
    type: "GET",
    dataType: "JSON",
    success: function(data)
    {

        $('[name="ph_name"]').val(data.from_date);


        $('#modal_sale_return').modal('show'); // show bootstrap modal when  complete loaded
        $('.modal-title').text('Sale return'); // Set title to Bootstrap     modal title

    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error get data from ajax');
    }
 });

 }

模态

<!-- Bootstrap Receptionist modal -->
 <div class="modal fade" id="modal_sale_return" role="dialog">
 <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title">Stock</h3>
        </div>
        <div class="modal-body form">
            <form action="#" id="form_sale_return" class="form-horizontal">
                <input type="hidden" value="" name="ph_id"/> 
                <div class="form-body">

                    <div class="form-group">
                        <label class="control-label col-md-3">Medicine Name</label>
                        <div class="col-md-9">
                            <input name="ph_name" placeholder="Medicine Name" class="form-control" type="text">
                            <input name="ph_clinic_id"  value="<?php echo $userinfo['id']; ?>" type="hidden">
                            <span class="help-block"></span>
                        </div>
                    </div>

                </div>
                <div class="col-md-12">
                <br/>
                <table id="table_account" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Transaction Id</th>
                            <th>Patient Id</th>
                            <th>Ammount payed</th>
                            <th>Time</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                </table>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

这是我的代码，这里我想从表单中获取值，而不是通过javascript代码在我的控制器中使用它并获取json数据并将其显示在我的模态框中

我的问题::在提交时我得到了控制器或我的模态链接（我想去控制器，从那里我只想按一下按钮去模态）

Answer 1

使用

$('#modal_sale_return').modal();

手动打开模态

将表单数据发送到控制器：

$('#myForm').submit(function(e){
var ajaxForm = $(this)[0];
var formData = new FormData(ajaxForm);

$.ajax({
    url: 'url',
    type: 'POST',
    data: formData,
    success: function (result) {

    },
    error : function() {

    }
});

}）;

Answer 2

快速示例：

FORM：

<form id="myForm">
    <div class="input-group date">
        <div class="input-group-addon">
            <i class="fa fa-calendar">
            </i>
        </div>
        <input type="text" class="form-control datepicker pull-right" name="from_date" placeholder="From" /> // want this value in my modal box
    </div>
    <div class="col-md-6">
        <div class="input-group date">
            <div class="input-group-addon">
                <i class="fa fa-calendar">
            </i>
            </div>
            <input type="text" class="form-control datepicker pull-right" name="to_date" placeholder="To" /> // want this value in my modal box
        </div>
    </div>
    <div class="col-md-12">
        <br/>
        <center>
            <button class="btn btn-success" type="submit">
                <i class="glyphicon glyphicon-plus">
            </i> Create New Stock
            </button>
        </center>
        // on this click call the modal
    </div>
</form>

模态：

<!-- Bootstrap Receptionist modal -->
<div class="modal fade" id="modal_sale_return" role="dialog">
   <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h3 class="modal-title">Stock</h3>
          </div>
          <div class="modal-body form">
              <form action="#" id="form_sale_return" class="form-horizontal">
                  <input type="hidden" value="" name="ph_id"/> 
                  <div class="form-body"> 

                      <div class="form-group">
                          <label class="control-label col-md-3">Medicine Name</label>
                          <div class="col-md-9">
                              <input name="ph_name" placeholder="Medicine Name" class="form-control" type="text">
                              <input name="ph_clinic_id"  value="<?php echo $userinfo['id']; ?>" type="hidden">
                              <span class="help-block"></span>
                          </div>
                      </div>  

                  </div>
                  <div class="col-md-12">
                  <br/>
                  <table id="table_account" class="table table-striped table-bordered" cellspacing="0" width="100%">
                      <thead>
                          <tr>
                              <th>Transaction Id</th>
                              <th>Patient Id</th>
                              <th>Ammount payed</th>
                              <th>Time</th>
                              <th>Action</th>
                          </tr>
                      </thead>  

                  </table>
                  </div>
              </form>
          </div>
          <div class="modal-footer">
              <button type="submit" id="btnSave" class="btn btn-primary">Save</button>
              <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
          </div>
      </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

脚本：

<script>
$(function() {
  $('form#myForm').on('submit',function(event) {
    //get value
    event.preventDefault();
    var from_date = $(this).find('input[name="from_date"]').val();
    var to_date = $(this).find('input[name="to_date"]').val();

    //get data $_GET
    $.ajax({
        url: "<?php echo site_url('PharmacyController/search_sale_return')?>", // bring value from database via controller in json_encode form 
        type: "GET",
        data: {from_date: from_date,to_date:to_date},
        dataType: "JSON",
        success: function(data) {
            var modal = $('#modal_sale_return').modal('show');
            modal.find('[name="ph_name"]').val(data.name);
            modal.find('.modal-title').text('Sale return');
            modal.find('#form_sale_return').trigger('reset');
            modal.find('.help-block').empty();
            modal.find('.form-group').removeClass('has-error');
            //etc           

            //save in modal
            $(modal).on('submit','form#form_sale_return',function(e) {
              e.preventDefault();
              var form = $(this);
              var ph_name = form.find('[name="ph_name"]').val();
              //etc
              $.ajax({
                url: "<?php echo site_url('PharmacyController/save')?>",
                type: "post",
                data:{ph_name:ph_name},
                success: function(response) {
                  alert('SUCCESS')
                },
                error: function(xhr) {
                  alert('ERROR');
                }
              });
            });
            $('#modal_sale_return').modal('show'); // show bootstrap modal when  complete loaded
            $('.modal-title').text('Sale return'); // Set title to Bootstrap     modal title

        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('Error get data from ajax');
        }
    });

  });
});
</script>

我没有测试过...你试试:)。