Solved

Getting value from a selected box

Posted on 2006-11-13
9
205 Views
Last Modified: 2008-03-06
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
Comment
Question by:horalia
  • 5
  • 3
9 Comments
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17932461
var pf_type = selBox.options[selBox.selectedIndex].value;
0
 

Author Comment

by:horalia
ID: 17932530
Thanks!
0
 
LVL 6

Expert Comment

by:aescnt
ID: 17932588
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
 

Author Comment

by:horalia
ID: 17932595
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:horalia
ID: 17932616
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
 
LVL 6

Expert Comment

by:aescnt
ID: 17932680
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
 

Author Comment

by:horalia
ID: 17932700
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
 
LVL 6

Accepted Solution

by:
aescnt earned 500 total points
ID: 17932882
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
 

Author Comment

by:horalia
ID: 17933418
Oh, you made me feel like such a rookie....... :-)
Let me try to incorporate your code into what I already have.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now