javascript auto fill text inputs based on drop down selection
Question
I'm having trouble with this... Hoping to auto fill the text input boxes in my form upon selection of the username from the dropdown. Users array comes from a mysql db. Not sure I have the javascript written correctly. First is my array which will just get called from db as $users. Thanks for looking.
<?php
$users=array
(
"User" => array
(
"0" => array
(
"id" => "6",
"username" => "bsmith",
"full_name" => "Buddy Smith"
),
"1" => array
(
"id" => "2",
"username" => "lsmith",
"full_name" => "Libbie Smith"
),
"2" => array
(
"id" => "4",
"username" => "asmith",
"full_name" => "Andy Smith"
)
)
)
?>
then the javascript:
<script type="text/javascript">
var ids = new Array();
var use = new Array();
var ful = new Array();
<?php
foreach($users as $key=>$value) {
echo "ids[" . $key . "] = '" . $value['User']['id'] . "';\n";
echo "use[" . $key . "] = '" . $value['User']['username'] . "';\n";
echo "ful[" . $key . "] = '" . $value['User']['full_name'] . "';\n";
}
?>
function Choice() {
x = document.getElementById("users");
x.value = y.options[y.selectedIndex].text;
document.getElementById("ids") = ids[y.selectedIndex];
document.getElementById("use") = use[y.selectedIndex];
document.getElementById("ful") = ful[y.selectedIndex];
}
}
</script>
then my html:
<form name="form1" method="post" action="">
<select name="users" onChange='Choice();'><option> </option>
<?php
foreach ($users as $key=>$value) {
echo '<option value="'.$key.'">'.$value['User']['username'].'</option>';
}
?>
</select>
<p><input type="text" id="ids" name="id" ></p>
<p><input type="text" id="ful" name="full_name" ></p>
</form>
2 answers
solution1
6 ACCPTED 2012-05-10 00:06:45
I took some liberties, and don't really understand PHP so I made up those parts. Anyway, here's what I got:
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
var ids = new Array();
var use = new Array();
var ful = new Array();
ids[0] = "";
use[0] = "";
ful[0] = "";
ids[1] = 6;
use[1] = "bsmith";
ful[1] = "Buddy Smith";
ids[2] = 2;
use[2] = "lsmith";
ful[2] = "Libbie Smith";
ids[3] = 4;
use[3] = "asmith";
ful[3] = "Andy Smith";
function Choice() {
//x = document.getElementById("users");
y = document.getElementById("selectUsers");
//x.value = y.options[y.selectedIndex].text;
document.getElementById("ids").value = ids[y.selectedIndex];
document.getElementById("use").value = use[y.selectedIndex];
document.getElementById("ful").value = ful[y.selectedIndex];
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<select id="selectUsers" name="users" onChange='Choice();'><option> </option>
<option value="1">bsmith</option>
<option value="2">lsmith</option>
<option value="3">asmith</option>
</select>
<p>ids <input type="text" id="ids" name="id" ></p>
<p>use <input type="text" id="use" name="username" ></p>
<p>ful <input type="text" id="ful" name="full_name" ></p>
</form>
</body>
</html>
solution2
0 2012-05-09 23:35:27
If I understood your question correctly, you need to set the text of your input text fields. You can do so by setting the "value" field.
function Choice() {
x = document.getElementById("users");
x.value = y.options[y.selectedIndex].text;
document.getElementById("ids").value = ids[y.selectedIndex];
document.getElementById("use").value = use[y.selectedIndex];
document.getElementById("ful").value = ful[y.selectedIndex];
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.