I have an edit profile page, it contains fields which are dynamically populated with values the user has already entered in to the database (if no value exists they should be blank and show a ‘select xxx’ prompt).
I want all fields to populate in this manner so that users do not need to reenter all their data every time they make a minor edit.
I have managed do it successfully with text fields - quite straightforward. But am struggling with drop down boxes. I was using Bootstrap Select for styling and tried to use javascript to alter the class of the li elements and although it worked it didn’t alter the preset value that was populated from the database on page load (the one the user is trying overwrite.
Can someone help me get the drop downs populated and although different selections to be made to each of them without altering the existing data?
Code for Drop Down display (for ease of display I have only included two examples):
<div class="item-content">
<div>Height</div>
<?php
// If profile_height is empty show all options with select height prompt, if not show current height in dropdown menu and full list when clicked
if(empty($currentprofile['profile_height'])) { ?>
<select class="" title="Select Height" name="profile_height" id="profile_height">
<?php foreach ($profile_height_frm as $key => $text) echo '<option value="'.$key.'">'.trim($text).'</option>'; ?>
</select>
<?php } else { ?>
<select class="" title="<?php $height_cm = get_profileinfo_text($currentprofile['profile_height'],'frmheight'); echo cm2feet($height_cm); ?>" name="profile_height" id="profile_height" value="<?php echo $currentprofile['profile_height']; ?>">
<?php foreach ($profile_height_frm as $key => $text) echo '<option value="'.$key.'">'.trim($text).'</option>'; ?>
</select>
<?php } ?>
</div><br />
<div class="item-content">
<div>Weight</div>
<?php
// If profile_weight is empty show all options with select weight prompt, if not show current weight in dropdown menu and full list when clicked
if(empty($currentprofile['profile_weight'])) { ?>
<select class="" title="Select Weight" name="profile_weight" id="profile_weight">
<?php foreach ($profile_weight_frm as $key => $text) echo '<option value="'.$key.'">'.trim($text).'</option>'; ?>
</select>
<?php } else { ?>
<select class="" title="<?php echo lbs2kg($currentprofile['profile_weight']); ?>kg (<?php echo $currentprofile['profile_weight']; ?>lbs)" name="profile_weight" id="profile_weight" value="<?php echo $currentprofile['profile_weight']; ?>">
<?php foreach ($profile_weight_frm as $key => $text) echo '<option value="'.$key.'">'.trim($text).'</option>'; ?>
</select>
<?php } ?>
</div><br />
When the user selects a different value from the drop down, this happens at front-side (clients browser), there is no communication with the back-end and database, so the database doesn’t get updated.
You can use <form></form> and make a POST request to your back-end, write PHP code to handle this POST request, update the database and send back a response (which will reload the entire page). You need to use a submit button for this, so the user can send the form after they are happy with the changes they made.
the alternative is to use Javascript or Jquery (jquery is easier) in combination with AJAX, which allows you to the POST request a whole lot more dynamic.
with javascript/jquery you could trigger a POST request when user selects a different value from drop down menu, send an AJAX request to server, and then send back a response.
Thanks for the post. The dropdowns are part of a form… I just provided a sample code.
But as I am pre-populating them with existing data - so that if no change has been made to that specific field, no change happens and that data is retained but other fields that changes have been made to are submitted as usual and the database values are updated.
My form does post the data via ajax.
I believe I am probably looking for a solution that involves jquery updating the value of the drop down field with the newly selected value if a change is made.
Yes there is user authentication - its a small social network style site. User data is stored in a users table and profile data is stored in a profiles table.
Form data (the ids and labels) is stored in corresponding tables eg: frmheight, frmweight.
The submission of data is working fine. There isn’t any issue with that, the issue is when it comes to using drop fields as any easy way to present lots of options to choose from.
Here is the output as rendered in a browser when using normal selects;
Sounds like everything is working fine, what isn’t working?
If the form can be submitted, and the result of form submission is stored in the database, then the next time the user loads the page, it should show in the state it was last set to by the user.
No. I am pre-populating the title and the value of the drop down field with the value that exists in the DB.
So when a user makes a change even to the field the drop down box value remains at the pre-populated value, not the one associated with the new selection. Although the title updates, the value does not.
The value needs to be pre-populated if the data exists otherwise when a change is saved that value will be blank and replace the value in the DB with a null value.
when i select a different value, the value updates (alert uses the value of value attribute), so this should also happen in your case. Your PHP code at back-end should be able to get value from the form submission and save it into the database
something need to be saved into the database, yes. Its a design choice if you want to save a null value or not.
<select class="" title="4 ft 7 ins" name="profile_height" id="profile_height" value="9">
The PHP takes the profile_height from the DB and inserts it into the title element of the select field using a function to covert it into a user-friendly label (ft and inches in this case). Then the PHP takes the same value (as it is a number that is linked to corresponding height value) and inserts it into the value element.
Because this value is being set, it isn’t updating with a newly selected value from one of the option fields.
In your example you do not define the value so it would work as a normal select field.
You want to change the value of an attribute even before the form is submitted? Then you do need Jquery or javascript (jquery is easier) to manipulate the DOM
But your PHP code at back-end should get value from option, not select. That would be a poor design choice.
<div class="item-content">
<div>Height</div>
<?php
// If profile_height is empty show all options with select height prompt, if not show current height in dropdown menu and full list when clicked
if(empty($currentprofile['profile_height'])) { ?>
<select class="edit-profiledetails" title="Select Height" name="profile_height" id="profile_height">
<?php foreach ($profile_height_frm as $key => $text) echo '<option value="'.$key.'">'.trim($text).'</option>'; ?>
</select>
<?php } else { ?>
<select class="edit-profiledetails" title="<?php $height_cm = get_profileinfo_text($currentprofile['profile_height'],'frmheight'); echo cm2feet($height_cm); ?>" name="profile_height" id="profile_height">
<?php
$value = $currentprofile['profile_height'];
if($value == $currentprofile['profile_height']) {
$selectedType = 'selected="selected"';
echo '<option value="' . $value . '" ' . $selectedType . '>' . cm2feet($height_cm) . '</option>';
}
foreach ($profile_height_frm as $key => $text) echo '<option value="'.$key.'">'.trim($text).'</option>'; ?>
</select>
<?php } ?>
</div>
The drop downs value is pulled from the profiles table and is then ‘translated’ with a call to the corresponding form table - in this case frmheight - and the ‘user-friendly’ value is returned - another function then converts it into the correct metrics.