I have scoured the google searches and haven't run across an answer to this question.

I have a Select field that gets values from a database. That part works fine.
The database contains four fields: specialistid, name, cell, email

I would like for the user to select from a dropdown select and then have the phone and email appear in text boxes below. (I used input text boxes hoping that would make it easier on JS.)

Here is the JS:

<script>
    function DeliveryFormSpecialistInfo() {
        var mspecialist = document.getElementsByName("mspecialist").item(0);
        var mengphone   = document.getElementsByName("mengphone").item(0);
        var mengemail   = document.getElementsByName("mengemail").item(0);

        mengphone.value = mengphone;
        mengemail.value = mengphone;
    }
</script>

Here is the PHP code to set it all up:

    <fieldset><legend> Specialist Information </legend>
        <table>
            <tr>
                <td><label>Specialist:</label></td>
                <td>";

                    $query = "select * from specialist order by name";
                    $result = $pdo->query($query);

                    $TBlock .= "
                        <select name='mspecialist' required>";
                    // If no specialist selected, prompt for one
                    if (empty($mspecialist)) $TBlock .= "<option value = '0'>Select a Specilist</option>";
                    while ($row = $result->fetch()) {
                        $mspecialistid = $row['specialistid'];
                        $mengineer = $row['name'];
                        $mengphone = $row['cell'];
                        $mengemail = $row['email'];

                        if ((!empty($mspecialist)) && ($mspecialist == $row['specialistid'])) {
                            $TBlock .= "<option selected = 'selected'>".$mengineer;
                        }else{
                            $TBlock .= "<option>".$mengineer;
                        }
                        $TBlock .= "</option>";
                    }
                    $TBlock .= "
                    onChange='DeliveryFormSpecialistInfo()'</select>
                    </td>
            </tr>

            <tr>
                <td><label>Cell Phone #:</label></td>
                <td><input type='text' name='mengphone' id='mengphone' value='$mengphone' readonly</td>
            </tr>

            <tr>
                <td><label>E-mail:</label></td>
                <td><input type='text' name='mengemail' id='mengemail' value = '$mengemail' readonly></td>
            </tr>
        </table>
    </fieldset>

Dani AI

Generated

Root cause and quick diagnosis
The select options in the original code carry only the specialist name, so the browser has no phone/email to copy into the inputs. The JavaScript also attempts to assign an element to an input value (e.g. mengphone.value = mengphone), which gives a nonsensical string instead of a phone number. correctly flagged the malformed input tag and the need to attach the change handler to the select element; those HTML issues must be fixed first.

Recommended approach (two common patterns)

  1. Put phone/email on each option using data-* attributes, then read the selected option’s dataset and write those strings into the inputs. This keeps everything client-side and simple.

  2. Or build a small JS map (JSON from PHP) keyed by specialist id; the change handler looks up the id and fills the inputs. This is cleaner when values may contain characters that are awkward in attributes.

Example: server outputs well-escaped option attributes (or a JSON object), and client code attaches a change listener to the select, uses getElementById for the inputs, reads the selected option (or the JSON map) and assigns plain strings to input.value. Prefer getElementById to getElementsByName (the latter returns a NodeList).

Troubleshooting and safety notes

  • Ensure every <option> has a value (ideally the specialist id).
  • Escape cell/email when emitted into HTML attributes (use htmlspecialchars(..., ENT_QUOTES) in PHP).
  • Check the browser console for JS errors (unclosed tags often break DOM and make document.getElementById return null).
  • Verify the change handler is on the select (inline onchange or addEventListener('change',...)), and that input fields have matching id attributes and proper closing > on tags.

Reference to thread
This ties back to ’s note about the missing > and attaching the event to the select, and explains why ’s current assignment won’t work: the inputs must receive plain strings (phone/email) extracted from the selected option or a JS data object.

Recommended Answers

All 4 Replies

What is line 28??? If you want to use the onchange event, you need to put/attach the event to the select tag. To me, it looks like the code line is hanging inside, not one of the property of the select tag...

//i.e.
<select id="blah" name="dbl_blah" onchange="ChangIt('arg1')">
...
</select>

This is all part of a PHP code set, where $Tblock is used as the var to setup the page. Line 28 is part of $TBlock .= "onChange='DeliveryFormSpecialistInfo()'</select> All the code above it is the while loop to setup the choices.

Ah ok. Line 34, missing the close > for input.

Then your question is how to pass variable to JavaScript function via PHP? If so this thread already discussed about it.

OK, closed that input line .. I HATE it when I miss those .. but still not working.

No, my question was NOT how to pass arguments in php. My question was, and still is, how to get JS to change the value of those two input statements with the information gathered from the document.getElementsByName lines. It worked with a math problem I found online, and I tried that technique here to get the input lines to change. But not having any luck.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.