Monday, 19 August 2013

AJAX form submit Codeigniter

AJAX form submit Codeigniter

I'm trying to submit a form using ajax / jquery from a view to my code
igniter model. If a post value has been passed to the model it returns
true.
My view is showing the success message regardless. Could someone please
point out where i'm going wrong?
Here is the function from my controller:
function bookings(){
$this->load->helper('url');
if($_POST):
echo $_POST["name"];
// do database stuff here to save the comment.
// return false if db failed
// else
return true;
endif;
}
Here is the relevant javascript & form from the view:
<div id="booking-form-container" class="fb-dialogue">
<div id="info">Entery your details below to make a group
booking:</div>
<!-- This will hold response / error message from server -->
<div id="response"></div>
<form id="bookingsform" method="post"
action="eventguide/bookings">
<label class="description" for="element_1">Full Name:
</label>
<div>
<input id="name" name="name" class="element text
medium" type="text" maxlength="255" value="<?php echo
$me['first_name'] . ' ' . $me['last_name']; ?>"/>
</div>
<label class="description" for="element_2">Email: </label>
<div>
<input id="element_2" name="element_2" class="element
text medium" type="text" maxlength="255" value="<?php
echo $me['email']; ?>"/>
</div>
<label class="description" for="element_3">Mobile Number:
</label>
<div>
<input id="element_3" name="element_3" class="element
text medium" type="text" maxlength="255" value=""/>
</div>
<label class="description" for="element_5">Choose You're
Event: </label>
<div>
<select class="element select medium" id="element_5"
name="element_5">
<option value="" selected="selected"></option>
<option value="1" >First option</option>
<option value="2" >Second option</option>
<option value="3" >Third option</option>
</select>
</div>
<label class="description" for="element_4">Group Size:
</label>
<div>
<input id="element_2" name="element_4" class="element
text medium" type="number" value="10"/>
</div>
<label class="description" for="element_6">Questions or
Special Requirements? </label>
<div>
<textarea id="element_6" name="element_6"
class="element textarea medium"></textarea>
</div>
</form>
</div>
<script type="text/javascript">
var mydetails = $("#booking-form-container").dialog({autoOpen:
false, modal: true, draggable: true, resizable: false,
bgiframe: true, width: '400px', zIndex: 9999, position:
['50%', 100]});
function showDetailsDialog() {
$("#booking-form-container").dialog("option", "title",
"Group Bookings");
$("#booking-form-container").dialog({buttons: {
"Close": {text: 'Close', priority: 'secondary',
class: 'btn', click: function() {
$(this).dialog("close");
}},
"Confirm Booking": {text: 'Confirm Booking',
priority: 'primary', class: 'btn btn-primary',
click: function() {
$('#bookingsform').submit();
}}
}
});
$("#booking-form-container").dialog("open");
}
$("#bookingsform").submit(function(event) {
event.preventDefault();
dataString = $("#bookingsform").serialize();
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>eventguide/bookings",
data: dataString,
success: function(data){
alert('Successful!');
}
});
return false; //stop the actual form post !important!
});
</script>

No comments:

Post a Comment