Switching out dropdown values when another selection is made

php

#1

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 />

#2

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.


#3

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.


#4

How are you distinguishing between different users? Do you have a user authentication system? What is your database scheme looking like?


#5

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;

<div class="item-content">
            <div>Height</div>
                            <select class="" title="4 ft 7 ins" name="profile_height" id="profile_height" value="9">
                <option value="1">4ft 0in (48in) (121cm)</option><option value="2">4ft 1in (49in) (124cm)</option><option value="3">4ft 2in (50in) (127cm)</option><option value="4">4ft 3in (51in) (129cm)</option><option value="5">4ft 4in (52in) (132cm)</option><option value="6">4ft 5in (53in) (134cm)</option><option value="7">4ft 6in (54in) (137cm)</option><option value="8">4ft 7in (55in) (139cm)</option><option value="9">4ft 8in (56in) (142cm)</option><option value="10">4ft 9in (57in) (144cm)</option><option value="11">4ft 10in (58in) (147cm)</option><option value="12">4ft 11in (59in) (149cm)</option><option value="13">5ft 0in (60in) (152cm)</option><option value="14">5ft 1in (61in) (154cm)</option><option value="15">5ft 2in (62in) (157cm)</option><option value="16">5ft 3in (63in) (160cm)</option><option value="17">5ft 4in (64in) (162cm)</option><option value="18">5ft 5in (65in) (165cm)</option><option value="19">5ft 6in (66in) (167cm)</option><option value="20">5ft 7in (67in) (170cm)</option><option value="21">5ft 8in (68in) (172cm)</option><option value="22">5ft 9in (69in) (175cm)</option><option value="23">5ft 10in (70in) (177cm)</option><option value="24">5ft 11in (71in) (180cm)</option><option value="25">6ft 0in (72in) (182cm)</option><option value="26">6ft 1in (73in) (185cm)</option><option value="27">6ft 2in (74in) (187cm)</option><option value="28">6ft 3in (75in) (190cm)</option><option value="29">6ft 4in (76in) (193cm)</option><option value="30">6ft 5in (77in) (195cm)</option><option value="31">6ft 6in (78in) (198cm)</option><option value="32">6ft 7in (79in) (200cm)</option><option value="33">6ft 8in (80in) (203cm)</option><option value="34">6ft 9in (81in) (205cm)</option><option value="35">6ft 10in (82in) (208cm)</option><option value="36">6ft 11in (83in) (210cm)</option>                </select>
            		</div><br />

		<div class="item-content">
		<div>Weight</div>
                        <select class="" title="31.3kg (69lbs)" name="profile_weight" id="profile_weight" value="69">
                <option value="69">69lbs (31kg) (5st)</option><option value="75">75lbs (34kg) (5.5st)</option><option value="84">84lbs (38kg) (6st)</option><option value="91">91lbs (41kg) (6.5st)</option><option value="98">98lbs (44kg) (7st)</option><option value="104">104lbs (47kg) (7.5st)</option><option value="111">111lbs (50kg) (8st)</option><option value="117">117lbs (53kg) (8.5st)</option><option value="126">126lbs (57kg) (9st)</option><option value="133">133lbs (60kg) (9.5st)</option><option value="139">139lbs (63kg) (10st)</option><option value="146">146lbs (66kg) (10.5st)</option><option value="153">153lbs (69kg) (11st)</option><option value="161">161lbs (73kg) (11.5st)</option><option value="168">168lbs (76kg) (12st)</option><option value="175">175lbs (79kg) (12.5st)</option><option value="181">181lbs (82kg) (13st)</option><option value="188">188lbs (85kg) (13.5st)</option><option value="195">195lbs (88kg) (14st)</option>                </select>
        		</div><br />

#6

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.


#7

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.


#8

how? i made a simple bin here:

http://jsbin.com/sagozocoqa/edit?html,js,output

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.


#9

PHP:

<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']; ?>">

Output:

<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.


#10

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.

i modified my example on jsbin:

http://jsbin.com/sagozocoqa/edit?html,js,output

now title changes when we select a different value from dropdown.


#11

I managed to solve the issue.

Using the following code;

<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.