php - javascript auto fill text inputs based on drop down selection - Stack Overflow

admin管理员组

文章数量:1323897

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

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

• php
• javascript
• ajax
• arrays

Share Improve this question Follow edited May 9, 2012 at 23:16 VisioN 145k3434 gold badges287287 silver badges289289 bronze badges asked May 9, 2012 at 23:13 slogasloga 64233 gold badges1212 silver badges3131 bronze badges 1

• document.getElementById("ids") = ids[y.selectedIndex];??? wtf... I think you need more than an answer to this question, how about a url where you can find some tutorials – Elias Van Ootegem Commented May 9, 2012 at 23:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I took some liberties, and don't really understand PHP so I made up those parts. Anyway, here's what I got:

http://jsfiddle/zunrk/

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

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];
    }

本文标签： phpjavascript auto fill text inputs based on drop down selectionStack Overflow