Link to home
Start Free TrialLog in
Avatar of Lia Nungaray
Lia NungarayFlag for United States of America

asked on

Getting value from a selected box

I've done this before, but I have a complete mind block at the moment (maybe because it's Monday!) :-)
Here goes: I have a form which contains a select element. This select element only has two values:
<select size="1" name="pf_type" id="pf_type" onChange="getType(this)">
      <option value="F">Fallon</option>
      <option value="R" selected="selected">Regular</option>
</select>

Here's the getType function:
function getType(selBox)
{
        var pf_type = document.forms["pageflow_rpt_new"]["pf_type"];
        var selectValue = pf_type.value;
        alert(pf_type);
}
When I select an option from the select box, I get in the alert window the value [object]. What am I doing wrong?
Avatar of Morcalavin
Morcalavin
Flag of United States of America image

var pf_type = selBox.options[selBox.selectedIndex].value;
Avatar of Lia Nungaray

ASKER

Thanks!
Avatar of aescnt
aescnt

By the way in your code, horalia, you're assigning to selectValue and not using it. Perhaps you meant to do `alert(selectValue)`?

Morcalavin's solution looks good, but (I think) alert(selectValue) will also fix your problem :)
Morcalavin, the alert box does work, but when I try to read the selected value using another function, it still gives me [object]. Let me give you a bigger picture:
pageflow_rpt.php
<form name="pageflow_rpt_new">
<select size="1" name="pf_type" id="pf_type" onChange="getType(this)">
      <option value="F">Fallon</option>
      <option value="R" selected="selected">Regular</option>
</select>
<input type="button" value="Create Report" onclick="doAddPFRpt(this, 'add_rpt', pf_type)">

tools.js
function getType(selBox)
{
    var pf_type = selBox.options[selBox.selectedIndex].value;
    var selectValue = pf_type.value;
    alert(pf_type);
}
function doAddPFRpt(button, command, selectValue)
{
      alert(pf_type);
      button.form.command.value = command;
        if(pf_type='F') {
          button.form.action="pageflow_rpt_frm.php";
      } else {
              button.form.action="pageflow_rpt_frm.php";
      }
      button.form.submit();
}
As you can see, I want the action of the form be dependent on the selected value. If I select Fallon, I want to open pageflow_rpt_frm.php. If Regular is selected, I want to open pageflow_rpt_frm_F.php (I didn't indicate this in the last posting). Before going on to open the correct page, I want to verify that I am passing the correct value. If I echo pf_type from the function getType, the correct value is displayed. However, if I press the "Create Report" button, the value "[object]" is displayed.
horalia,

function getType(selBox)
{
    alert(selBox.value);
}

function doAddPFRpt(button, command, selectValue)
{
   button.form.command.value = command;
    if (selectValue == 'F') { /* note this should be == and not = */
         button.form.action="pageflow_rpt_frm.php";
    } else {
            button.form.action="pageflow_rpt_frm.php";
    }
    return true;
}

And
<input type="submit" value="Create Report" onclick="doAddPFRpt(this, 'add_rpt', pf_type.value)">
I placed everything exactly how I have it in one page only. Here it goes in case you would like to test:

<html>
<head>
<script type="text/javascript">
function getType(selBox)
{
      var pf_type = selBox.options[selBox.selectedIndex].value;
    var selectValue = pf_type.value;
    alert(pf_type);
}
function doAddPFRpt(button, command, pf_type) {
      alert(pf_type);
        /*
      button.form.command.value = command;
        if(pf_type='F') {
          button.form.action="pageflow_rpt_frm_F.php";
      } else {
              button.form.action="pageflow_rpt_frm.php";
      }
      button.form.submit();
      */
}
</script>
</head>
<form name="pageflow_rpt_new">
<select size="1" name="pf_type" id="pf_type" onChange="getType(this)">
      <option value="F">Fallon</option>
      <option value="R" selected="selected">Regular</option>
</select>
<input type="button" value="Create Report" onclick="doAddPFRpt(this, 'add_rpt', pf_type)">
</form>
</html>

I was thinking of using a hidden value in the form, but I don't know how to assign it using JavaScript.
ASKER CERTIFIED SOLUTION
Avatar of aescnt
aescnt

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Oh, you made me feel like such a rookie....... :-)
Let me try to incorporate your code into what I already have.