Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 213
  • Last Modified:

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?
0
horalia
Asked:
horalia
  • 5
  • 3
1 Solution
 
MorcalavinCommented:
var pf_type = selBox.options[selBox.selectedIndex].value;
0
 
horaliaAuthor Commented:
Thanks!
0
 
aescntCommented:
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 :)
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
horaliaAuthor Commented:
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();
}
0
 
horaliaAuthor Commented:
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.
0
 
aescntCommented:
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)">
0
 
horaliaAuthor Commented:
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.
0
 
aescntCommented:
omg what are you doing thats so not right :)
Here you go. Remove the /* comment marks */ if you want to.
Mine shows an alert box of "F" or "R" on both onChange and onSubmit. (I also took the liberty of changing onClick to onSubmit, so it works when the user presses enter instead of clicking..)

<html>
<head>

<script type="text/javascript">
function getType(selBox)
{
    alert(selBox.value);
}
function doAddPFRpt(form, cmd, selectValue)
{
     document.getElementById('command').value = cmd;
     alert(selectValue);

    /* The following is commented just as yours was */
    /* if (selectValue == 'F') {
         form.action="pageflow_rpt_frm.php";
    } else {
            form.action="pageflow_rpt_frm.php";
    }
    return true; */
}</script>
</head>
<body>
<form name="pageflow_rpt_new" onsubmit="doAddPFRpt(this, 'add_rpt', pf_type.value)">
Command: <input type="text" id="command" name="command"><br>
<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="submit" value="Create Report">
</form>
</body>
</html>
0
 
horaliaAuthor Commented:
Oh, you made me feel like such a rookie....... :-)
Let me try to incorporate your code into what I already have.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now