Question

我目前有一个包含单个表单元素的页面。在文本框中输入值后，会弹出一个模态窗口，显示您输入的值。单击确认后，该值将输入数据库。这工作正常，但我想在插入成功时弹出另一个模态窗口，但我正在努力解决它。

我想通过ajax提交表单的路线，然后显示确认模式，但我似乎无法让它工作。我不确定我是否使用了两个模态窗口，或者它是什么。

<form action="<?php echo base_url()."index.php/create/createHospital"; ?>" method = "post" name = "form1" id ="form1" >
    <div class="hospital_container">
        <h3 class = "hospital_header"><b>Enter Hospital Information</b></h3>

    <label for="hospitalName" class = "labelForm">Name:</label>
    <input type="text" class = "input2" id="hospitalName" name="hospitalName" class = "newUserForm">

        <button type="button"  id = "hospital_submit_button" class = "hospital_submit_button" data-toggle="modal" data-target="#userModal">Add New Hospital</button>

    </div>
</form>

<!--   MODAL   -->

<div id="userModal" class="modal fade" role="dialog">
    <h3 class="modal-title_user">Create New Hospital?</h3>
    <div class="modal-body">

            <h4 id = "h4modal_user_hosp"> Hospital Information</h4>
            <div id ="modal_hosp_container">
                <br> <label  class = "modallabeluser"> Hospital:</label> <p class = "modaluser"  id = "hospital1" name = "hospital1"></p>
            </div>

        <button type="submit"  id = "overlaysubclass2"> Yes,Complete</button>
        <button id = "editoverlay" data-dismiss="modal"> No,Edit Info</button>

    </div>
</div>

确认我正在使用的模态窗口中的值时：

 $('#hospital_submit_button').click(function() {

            var hospitalName = $('#hospitalName').val();

            $('#hospital1').text(hospitalName);



        });

    $('#overlaysubclass2').click(function(){
        document.form1.submit();

    });

这是我目前的ajax电话，但我不确定如何将其与其余代码联系起来？

$(function() {
   $("#form1").on("submit", function(event) {
       event.preventDefault();
       $.ajax({
           url: "<?php echo base_url()."index.php/create/createHospital"; ?>",
           type: "post",
           data: $(this).serialize(),
           success: function(d) {
               alert(d);
           }
       });
   });

}）;

或者，是否有人知道如何以另一种方式实现模态？提前致谢

模型

    function create_hospital($data){ 

        $theData = array(
            'hospitalName' => $this->input->post('hospitalName'),

        );

        $insert = $this->db->insert('hospitals', $theData);
        return $insert;

    }

控制器

  function createHospital()
{


      //  $hospital=$this->input->post('hospitalName');
      //  echo $hospital;

        $theData = array(

            'hospitalName' => $this->input->post('hospitalName'),
        );

        $this->user_model->create_hospital($theData);
        //$data['message'] = 'Data Inserted Successfully';

      redirect('Admin/add_hospitals');
    }

模式我希望在成功插入数据库时弹出

    <h3 class="modal-title_user">Confirm?</h3>
    <div class="modal-body">

            <h4 id = "h4modal_user_hosp"> Hospital Information</h4>
            <div id ="modal_hosp_container">

              <p> confirmed</p>

            </div>


            <input type = "submit" name="submit" value = "Yes,Confirm" id = "confirmbutton">
            <input type = "submit" name="submit" value = "No,Edit Info" id = "editoverlay" data-dismiss="modal">

    </div>
</div>

不是使用的情况：

 success: function(data) {
                       // alert("success");
                        $("#confirmModal").modal("show");

                    }

Answer 1

将Html修改为

    <form  id ="form1" >
    <div class="hospital_container">
        <h3 class = "hospital_header"><b>Enter Hospital Information</b></h3>

    <label for="hospitalName" class = "labelForm">Name:</label>
    <input type="text" class = "input2" id="hospitalName" name="hospitalName" class = "newUserForm">

        <button type="button"  id = "hospital_submit_button" class = "hospital_submit_button" data-toggle="modal" data-target="#userModal">Add New Hospital</button>

    </div>
</form>

<!--   MODAL   -->

<div id="userModal" class="modal fade" role="dialog">
    <h3 class="modal-title_user">Create New Hospital?</h3>
    <div class="modal-body">

            <h4 id = "h4modal_user_hosp"> Hospital Information</h4>
            <div id ="modal_hosp_container">
                <br> <label  class = "modallabeluser"> Hospital:</label> <p class = "modaluser"  id = "hospital1" name = "hospital1"></p>
            </div>

        <button type="button"  id = "overlaysubclass2"> Yes,Complete</button>
        <button id = "editoverlay" data-dismiss="modal"> No,Edit Info</button>

    </div>
</div>

现在使用jquery Ajax作为

    <script type="text/javascript"> 
$(function() {
   $("#hospital_submit_button").on("click", function(event) {
       event.preventDefault();
       var DataString=$("#form1").serialize()
       $.ajax({
           url: "<?php echo base_url(); ?>index.php/create/createHospital",
           type: "post",
           data:DataString ,
           success: function(data) {
               alert(data);
           }
       });
   });
});
</script>

现在您必须将控制器方法的值打印为

function createHospital(){
  $hospital_name=$this->input->post('hospitalName');
 $theData = array(

        'hospitalName' => $hospital_name
    );

   $hospital_id= $this->user_model->create_hospital($theData);
   if($hospital_id>0){
         echo $hospital_id;
    } 
}

模型如下

function create_hospital($data){ 
     $this->db->insert('hospitals',$data);
            return $this->db->insert_id();
    }

然后，您将获得ajax成功（警报）作为您最后插入的ID，您将传递到输入字段，然后单击提交按钮。

希望它会奏效。谢谢！

Codeigniter通过模型中的ajax插入数据库

1 个答案: