Solved

Getting value from a selected box

Posted on 2006-11-13
9
207 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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

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
 

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

828 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