Select tag php generated code requires javascript interaction

Question

Currently I am working on a piece of javascript to copy a link plus the option the user has selected within the select tag.

The variable I assign in the javascript remains undefined. Is there a way to make this code work? I do not wish to use the ID attribute with a loop unless this can be applied into my PHP script (in which I echo the select tags, because I'm showing database results, whenever a result is shown, it will also show a select tag). This link shows a simple example of what I made so far: http://jsfiddle.net/b31au78v/

Here is my code:

<table>
    <tr>
        <th>Name</th>
        <th>Gender</th>
    </tr>
    <tr>
        <td>Hank</td>
        <td>
            <select onChange="getValue()" class="ddlEval">
                <option>Select an option...</option>
                <option val="gender.php?=male">Male</option>
                <option val="gender.php?=female">Female</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Jeff</td>
        <td>
            <select onChange="getValue()" class="ddleval">
                <option>Select an option...</option>
                <option val="gender.php?=male">Male</option>
                <option val="gender.php?=female">Female</option>
            </select>
        </td>
    </tr>
</table>

<script>
    function getValue() {
    optVal = this.value;
    if(optVal != "Select an option...")
    {
    window.prompt("This is the link that's going to be coppied: ", "localhost:8080/" + optVal);
    }
}
</script>

I guess I need to replace "this" with something else, but it is only to show what I actually want to happen.

Ofir Baruch · Accepted Answer · 2015-05-26 11:27:38Z

2

Consider the following approach:

var optVal = selectTag.options[selectTag.selectedIndex].value;

In your case (jsFiddle):

<script>
    function getValue(s) {
    optVal = s.options[s.selectedIndex].value;
    if(optVal != "Select an option...")
    {
    window.prompt("This is: ", "localhost:8080/gender.php?=" + optVal);
    }
}
</script>

While changing the onChange event code:

        <select onChange="getValue(this)"...

Please notice that you should also pass the id/name of the member, so when someone changes the first member's gender it won't conflict with the second one.

edited May 26, 2015 at 11:27

answered May 26, 2015 at 11:18

Ofir Baruch

10.3k2 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ofir Baruch Over a year ago

No problem, just update me if it worked for you or not.

insertusernamehere · Accepted Answer · 2015-05-26 11:39:52Z

0

There are two issues here:

There's no attribute val it should be value:

<option value="none">Select an option …</option>
<option value="gender.php?=male">Male</option>

Note: If you don't have an attribute value the value of the element will be the text of the option-element selected instead.

this in your function has a different scope, so it's not aware of a property called this.value. You can however pass the element into the function, like:

<select onchange="getValue(this);"></select>

Then you can get its value like:

function getValue(e) {
    var optVal = e.value;
    if ('none' != optVal) {
        window.prompt("This is the link that's going to be coppied: ", "localhost:8080/" + optVal);
    }
}

Demo

Try before buy

edited May 26, 2015 at 11:39

answered May 26, 2015 at 11:26

insertusernamehere

23.7k10 gold badges93 silver badges130 bronze badges

Collectives™ on Stack Overflow

Select tag php generated code requires javascript interaction

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related