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>
are you returning true to who ? the message you echo will go back to the client side wich is the $_POST['name'], but the return true in your php code will bi there at the server side. Speaking of which in my opinion since you are using codeigniter , you should use $this->input->post('name'); instead of the pure php post server variable.
What you want to do is first check to see that your have your data
if(isset($_POST) && isset($_POST['name'])) {
// post is in the $_POST array, do stuff
echo htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
}
I think that you $_POST["name"] is not set and I think that you need to change your code
$.ajax({ type: "POST", url: "eventguide/bookings", data: { 'name' :dataString}, success: function(data){ alert('Successful!'); } });
you are not given a name to the variable that you want to catch on the server side.