Codeigniter insert to database via ajax from model - php

Question

I currently have a page with a single form element. Upon entering a value into the text box, a modal window pops up showing the value you have entered.Upon clicking confirm the value is then entered into the database. This is working fine but I'm looking to have another modal window popup when the insert is successful but I am struggling with it.
I'm thinking of going down the route of submitting the form via ajax and then showing the confirmation modal but I can't seem to get it working. I'm not sure if its the fact that I'm using two modal windows or what it is really.
<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>
When confirming the value in the modal window I am using:
$('#hospital_submit_button').click(function() {
var hospitalName = $('#hospitalName').val();
$('#hospital1').text(hospitalName);
});
$('#overlaysubclass2').click(function(){
document.form1.submit();
});
This was the ajax call I have at the moment but I'm unsure how to tie it in with the rest of the code?
$(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);
}
});
});
});
Alternatively, does anyone have an idea of how to achieve the modal another way?
Thanks in advance
Model
function create_hospital($data){
$theData = array(
'hospitalName' => $this->input->post('hospitalName'),
);
$insert = $this->db->insert('hospitals', $theData);
return $insert;
}
Controller
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');
}
MODAL I WANT TO POPUP ON SUCCESSFULL INSERT TO DB
<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>
Would it not be a case of using:
success: function(data) {
// alert("success");
$("#confirmModal").modal("show");
}

Answer 1

Modify Html as
<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>
Now use jquery Ajax as
<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>
Now You have to print value from controller method as
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;
}
}
Model as follow
function create_hospital($data){
$this->db->insert('hospitals',$data);
return $this->db->insert_id();
}
Then you will get ajax success (alert) as your last inserted Id what you will pass to the input field then click on the submit button .
Hope it will work.
Thank you!