Dropdown box auto populates other input fields - Help

[muhammedc]

Hi

Consider this example - Do not qustion the merits, its just an example...

If you look at admin_users.php, there is a manually add user panel where there is a dropdown box for the permission group to choose when creating a new user...

Now, say I had another dropdown box which was autopopulated based on information from a table, much the same way the groups were autopopulated to the dropdown box. What I would like to achieve is as you select an option from the dropdown box, then based on your selection, say the name field and the surname field with autopopulate those text input boxes with information from the db based on the selection from the dropdown box, and if you choose another option from the dropdown box, then again the text fields will update with the correct data.

How would one achieve this?

[Brandin]

Hmmm...that sounds like a Stack Overflow question!

If I am understanding correctly, pretending we have two options:
Option A
Option B

When Option A in the dropdown is selected, it changes the fields to Selection A Selection B
When Option B in the dropdown is selected, it changes the fields to Selection C Selection D

Correct?

[muhammedc]

correct, but the data must be returned from the db based on the dropbox selection...

[Brandin]

So the dropdown is populated by the DB and when you select the option populated from the DB, it does another SELECT query to the DB to get more info, to populate the other two inputs, right? Do you have your tables built? Can you show me the structure?

[muhammedc]

id = int(11) auto_increment
company = varchar(64)
firstname = varchar(64)
lastname = varchar(64)

So the dropdown box has the following code:

<select id="cc" name="cc">
<?php
foreach ($permOps1 as $permOp1){
echo "<option value='$permOp1->id'>$permOp1->company </option>";
}
?>
</select>

Now there are two input text fields as follows:

<div class="col-xs-2">
<input type="text" class="form-control" id="lname" name="lname">
</div>
<div class="col-xs-2">
<input type="text" class="form-control" id="fname" name="fname">
</div>

So when the company is selected from the dropdown box, the the above two input boxes must auto populate with the correct data from the db.

[Brandin]

Are these fields going to be editable, readonly, disabled, or hidden? What purpose are they serving? I am wondering if there is an easier way than having like a JS code fill the fields. If you don't need them to ever be edited, when you are submitting the form you can simply have the values filled based on the permOp.

Looking forward to helping you!

[muhammedc]

readonly or disabled - Once populated by choosing the company from the dropdown menu, the first name and last name must be populated in the fields. Once you submit the form it will insert all three values into another db.

I had the idea of using the values from PermOp, but am having a hard time figuring out the code... Can you assist by way of example?

[Brandin]

Do you require the fields to be seen by the user? If you use the dropdown to display the information to the user, e.g. $company -> $firstname $lastname, and then in the post you can run

Code:

SELECT * FROM permsOp where company = ?, array($company)

.

So in your post:

Code:

$company = Input::get('company');

Code:

$Q = $db->query("SELECT * FROM tablename WHERE company = ?,array($company));

Code:

$result = $Q->first();

Code:

$firstname = $result->firstname;

Code:

$lastname = $result->lastname;

Basically this will take the value of your select, which you seem to have figured out, then when you POST, it will populate the first and last name by grabbing the value from the table.

If you need the user to see the values, I will see what I can pull together for ya. But I think if they don't need to edit it, why do they need to see it before the form is submitted?

[muhammedc]

I would prefer them to see it - As the project progresses, there will come a stage when I will require the user to make edits... Better to cater for that at the outset...

I was thinking to use JQuery to try and make this work by using the onchange functionality on the dropbox, but I cant seem to figure out how to get the other values from the db based on the value that was selected in the dropbox using JQuery...

Somedays I just wanna pull my hair out - and then I remember I have no hair...lol

Thanks

[Brandin]

Totally understandable. You will have to result to JavaScript or JQuery, I will do some digging tonight when I get to my desk and see what I can figure out for you!