Get result of Drop Down menu to run another query

Question

I am trying to resubmit my webpage through javascript based on the results of a change to a drop down menu. The drop down menu is created through an SQL query.

HTML/PHP

<td> Workorder/IO: <select id = "WOIODD" name="WO/IO" onchange="getVal()">
<?php
foreach($WoIo as $workorder)
  {
    echo '<option>'.$workorder.'</option>';
  }
?>
</select>
</td>
</tr>
<?php $currentWo=($_GET['cwo']); ?>

JAVASCRIPT

 function getVal()
    {
        var currentVal = document.getElementById('WOIODD').value;
        location.href="?cwo="+currentVal;
    }

The problem is document.getElementById.value is returning nothing. The value IS NOT null, but nothing is being returned. When I tried to fix the javascript, alert(currentVal) displayed a blank box, even after it was run conditionally with no null value. I need to be able to run another query based on the option chosen in the Work Order dropdown menu.

Any ideas on why this happening, how to fix, or even an alternative method all together?

Thank you, Joshua

@Taplar that doesn't matter. It will take the label as value then. — Zammy, Dec 07 '17 at 16:19
I don't see anything gravely wrong.. recreated the script in codepen and it works: https://codepen.io/anon/pen/BmgKrR — Zammy, Dec 07 '17 at 16:21
the value does not change anything, as @Zammy said, it just assumes the query data as the label — Joshua Averbuch, Dec 07 '17 at 16:21
You're not repeating the id 'WOIODD' on the page are you? Cause this works. https://jsfiddle.net/Lmzujzfm/1/ Even a modified version without the id lookup works. https://jsfiddle.net/Lmzujzfm/2/ — Taplar, Dec 07 '17 at 16:25
I believe that the problem lies in the fact the option tags are being created through my php lines. Any ideas? And no all variables are unique — Joshua Averbuch, Dec 07 '17 at 16:25
did you check the rendered source code to see if the options are there? — Skwal, Dec 07 '17 at 16:26
So given the two fiddles I linked in my prior comment, i can't replicate this issue. — Taplar, Dec 07 '17 at 16:28
I can suggest a workaround if you want to get rid of the getElementById: https://stackoverflow.com/questions/5024056/how-to-pass-parameters-on-onchange-of-html-select — Skwal, Dec 07 '17 at 16:30
Thank you all for the help, but unfortunately even then work around does not work. To test it I run the javascript with alert(currentval) and all it produces is a blank alert box. — Joshua Averbuch, Dec 07 '17 at 16:39

score 0 · Answer 1 · answered Dec 07 '17 at 16:50

Problem was solved. First the java script was change to

 function getVal(dropdown)
{
    var currentVal = dropdown.value;

    location.href="?cwo="+currentVal;
}

Then the HTML/PHP was changed to

<td> Workorder/IO: <select id = "WOIODD" name="WO/IO" onchange="getVal(this)">
<?php
foreach($WoIo as $workorder)
   {
  echo '<option value="'.$workorder.'">'.$workorder.'</option>';
  }
 ?>

Basically it was NOT assessing each option the value so I explicitly assessed each value.

Thank you to everyone's comments it helped point me in the right direction

Get result of Drop Down menu to run another query

1 Answers1