As you may gather from the code below I am trying to get a profile updater script working. I seem to be running into problems though. I am getting the ‘hello’ alert when the script finishes processing but it seems as if the jquery is not properly grabbing the values from the textboxes because my mysql table is returning nothing inserted. any ideas? below is my code and screenshots:
Frontend Code:
<?php include("vh.php"); ?>
<script type="text/javascript">
$(document).ready(function() {
var birthdate = $("#birthdate").val();
var sex = $("#sex :selected").val();
var interestedIn = $("#interestedIn :selected").val();
var relationshipStatus = $("#relationshipStatus :selected").val();
var knownLanguages = $("#knownLanguages").val();
var religiousViews = $("#religiousViews").val();
var politicalViews = $("#politicalViews").val();
var aboutMe = $("#aboutMe").val();
var mobilePhone = $("#mobilePhone").val();
var neighborhood = $("#neighborhood").val();
var website = $("#website").val();
var email = $("#email").val();
$("#submitForm").live('click', function() {
updateUserInfo();
});
function updateUserInfo() {
jQuery.ajax({
type: "POST",
dataType: "JSON",
url: "<?=base_url()?>index.php/regUserDash/updateUserInfo",
data: { birthdate: birthdate,
sex: sex,
interestedIn: interestedIn,
relationshipStatus: relationshipStatus,
knownLanguages: knownLanguages,
religiousViews: religiousViews,
politicalViews: politicalViews,
aboutMe: aboutMe,
mobilePhone: mobilePhone,
neighborhood: neighborhood,
website: website,
email: email
}, success: function(data) {
if(data.userInfoUpdated == true) {
alert("hello");
}
}
});
}
});
</script>
<?php $selectedId = $_REQUEST['id'];
$myuserid = $this->session->userdata('userid'); ?>
<table style="width: 34%">
<tr>
<td style="width: 193px"><span class="font1">Birthdate</span></td>
<td style="width: 275px">
<input id="birthdate" class="textbox1" style="width: 200pt" type="text" /></td>
</tr>
<tr>
<td style="width: 193px"><span class="font1">Sex</span></td>
<td style="width: 275px">
<select class="textbox1" id="sex" style="width: 207pt">
<option selected="selected">Select your sex</option>
<option>Male</option>
<option>Female</option>
</select></td>
</tr>
<tr>
<td style="width: 193px" class="font1">Interested In</td>
<td style="width: 275px">
<select class="textbox1" id="interestedIn" style="width: 207pt">
<option selected="selected">Select your interest</option>
<option>Men</option>
<option>Women</option>
</select></td>
</tr>
<tr>
<td style="width: 193px" class="font1">Relationship Status</td>
<td style="width: 275px">
<select class="textbox1" id="relationshipStatus" style="width: 207pt">
<option selected="selected">Select your relationship status</option>
<option>Single</option>
<option>In a relationship</option>
<option>Engaged</option>
<option>Married</option>
<option>It's complicated</option>
<option>In an open relationship</option>
<option>Widowed</option>
<option>Seperated</option>
<option>Divorsed</option>
<option>In a civil union</option>
<option>In a domestic partnership</option>
</select></td>
</tr>
<tr>
<td style="width: 193px" class="font1">Known Languages</td>
<td style="width: 275px">
<input class="textbox1" id="knownLanguages" style="width: 200pt" type="text" /></td>
</tr>
<tr>
<td style="width: 193px" class="font1">Religious Views</td>
<td style="width: 275px">
<input class="textbox1" id="religiousViews" style="width: 200pt" type="text" /></td>
</tr>
<tr>
<td style="width: 193px" class="font1">Political Views</td>
<td style="width: 275px">
<input class="textbox1" id="politicalViews" style="width: 200pt" type="text" /></td>
</tr>
<tr>
<td style="width: 193px" class="font1">About Me<br />
<br />
<br />
<br />
</td>
<td style="width: 275px">
<textarea class="textarea2" id="aboutMe" style="width: 198pt; height: 93px"></textarea></td>
</tr>
<tr>
<td style="width: 193px" class="font1">Mobile Phone</td>
<td style="width: 275px">
<input class="textbox1" id="mobilePhone" style="width: 200pt" type="text" /></td>
</tr>
<tr>
<td style="width: 193px" class="font1">Neighborhood</td>
<td style="width: 275px">
<input class="textbox1" id="neighborhood" style="width: 200pt" type="text" /></td>
</tr>
<tr>
<td style="width: 193px" class="font1">Website</td>
<td style="width: 275px">
<input class="textbox1" id="website" style="width: 200pt" type="text" /></td>
</tr>
<tr>
<td style="width: 193px" class="font1">Email</td>
<td style="width: 275px">
<input class="textbox1" id="email" style="width: 200pt" type="text" /></td>
</tr>
<tr>
<td style="width: 193px" class="font1"> </td>
<td style="width: 275px; text-align: right">
<input id="submitForm" type="button" value="Submit" style="width: 63px; height: 28px" class="button1"></td>
</tr>
</table>
Backend Code:
public function updateUserInfo() {
$userid = $this->session->userdata('userid');
$birthdate = $this->input->post("birthdate");
$sex = $this->input->post("sex");
$interestedIn = $this->input->post("interestedIn");
$relationshipStatus = $this->input->post("relationshipStatus");
$languages = $this->input->post("languages");
$religiousViews = $this->input->post("religiousViews");
$politicalViews = $this->input->post("politicalViews");
$aboutMe = $this->input->post("aboutMe");
$mobilePhone = $this->input->post("mobilePhone");
$neighborhood = $this->input->post("neighborhood");
$websites = $this->input->post("websites");
$email = $this->input->post("email");
$this->db->query("INSERT INTO user_info (birthdate, sex, interestedIn, relationshipStatus, Languages, religiousViews, politicalViews, aboutMe, mobilePhone, neighborhood, websites, email, userid)
VALUES('{$birthdate}', '{$sex}', '{$interestedIn}', '{$relationshipStatus}', '{$languages}', '{$religiousViews}', '{$politicalViews}', '{$aboutMe}', '{$mobilePhone}', '{$neighborhood}', '{$websites}', '{$email}', '{$userid}')");
echo json_encode(array('userInfoUpdated' => true));
}
You are getting the values from the form immidiately when the page finishes loadding but at this time they are empty. When someone fills the form and clicks submit the functions takes the values from the variables birthdate,sex etc. but they are empty.
You have to move the variable assignment
inside the updateUserInfo() function like that: