dropdown & radio button issue

mp1234 · February 25, 2009

i am newbie with php....i am trying to create dropdown list populated by radio button.

1. if month radio button is clicked the dropdown will be populated with months

2. if week radio button is clicked the dropdown will be populated with 4 weeks

3. save and print the selection on the page (not in the url)

I tried to search but couldn't find anything that worked like it.....i can either create dropdown w/o radio button and vise versa...

I tried using java script to populate dropdown dynamically but then when i try to get the selection it doesn't print out anything (it just says "on").

if snippet of code is required...i will post it

any pointers will be helpful..

thanks in advance...

sillysillysilly · February 26, 2009

the idea I have is that you could do it in a post back. So on change you execute a different section ofthe code

if $_POST['radiobutton'] = Months

{

echo '<select name="months">

<option value="January">January</option>

<option value="Feburary">Feburary</option>

<option value="March">March</option>

<option value="April">April</option>

</select>';

}

if $_POST['radiobutton'] = weeks

{

echo '<select name="weeks">

</select>';

}

that is the general idea

trq · February 26, 2009

This really is better handled with Javascript. Moving...

Psycho · February 26, 2009

I tried using java script to populate dropdown dynamically but then when i try to get the selection it doesn't print out anything (it just says "on").

NOt sure what you mean. Where is the word "on" coming from? I see no reason you can't do this with JS.

<html>
<head>
<script type="text/javascript">

units = new Array();
units['months'] = ['January','February','March','April','May'];
units['weeks'] = ['Week 1','Week 2','Week 3', 'Week 4'];

function changeUnits(unitName)
{
    values = units[unitName];
    changeSelect('units', values, values);
    document.getElementById('units').disabled = false;
    return;
}

function changeSelect(fieldID, newValues, newOptions)
{
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;

  if (newValues && newOptions)
  {
    for (i=0; i<newValues.length; i++)
    {
      selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }

  }
}

</script>

</head>
<body>

<input type="radio" name="unitName" value="months" onclick="changeUnits(this.value);"> Months<br>
<input type="radio" name="unitName" value="weeks" onclick="changeUnits(this.value);"> Weeks<br><br>

<select name="units" disabled="disabled">
  <option>Select a Unit</option>
</select>

</body>
</html>

mp1234 · February 27, 2009

comment for php:

right, and that is what i have done. but again, the dropdowns are visible at the same time. it should allow to choose from only one at a time. and then be able to access the selected or store the selected. ie. if i select january then i should be able to store it in var so i can use it to perform some logic.

comment for JS:

i tried that as well, only difference is the way i call my function. But again lets say we select Week 2, how do we use that ie.

if "week 2" do something

if "february" do something...?

also, one more question for JS. Lets say we select "week 2" is it possible to access that variable(once the value is stored) inside PHP?

Thanks again and for being patient...

Psycho · February 27, 2009

comment for JS:
i tried that as well, only difference is the way i call my function. But again lets say we select Week 2, how do we use that ie.

if "week 2" do something

if "february" do something...?

also, one more question for JS. Lets say we select "week 2" is it possible to access that variable(once the value is stored) inside PHP?

Thanks again and for being patient...

Just a side note to start, it's typically good manners to address a person by their name rather than the type of code they posted

Anyway, yes you can do anything with the selected values that you want! You can do something in real-time on the screen with JS or you can do something with it in PHP once you post the form. To do something real-time, just put an onchange event handler on the select list.

Not sure what you mean by this statement

one more question for JS. Lets say we select "week 2" is it possible to access that variable(once the value is stored) inside PHP?

Once the value is stored you can do whatever you want with it. If you are asking how you would utilize the variable in JS once you have stored it, that's simple. When creating any page where JS needs to utilized the saved value, just write it to the page as a JS variable

echo "var foo = bar;";

Here's another example of the code showing how to do something once a value is selected. Note that depending on your ultimate use of all this, another solution would be to create both select lists on the page at the beginning and change the display propert accordingly. Not knowing your ultimate goal, I can't say which method would be more advantageous

<html>
<head>
<script type="text/javascript">

units = new Array();
units['month'] = ['January','February','March','April','May'];
units['week'] = ['Week 1','Week 2','Week 3', 'Week 4'];

function changeUnits(unitName)
{
    var options = units[unitName];
    options.unshift('Select a '+unitName);

    changeSelect('units', options, options);
    document.getElementById('units').disabled = false;
    return;
}

function changeSelect(fieldID, newOptions, newValues)
{
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;

  if (newValues && newOptions)
  {
    for (i=0; i<newValues.length; i++)
    {
      selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }
  }
  return;
}

function doSomething(selObj)
{
    var output = '';
    if (selObj.selectedIndex!=0)
    {
        var optValue = selObj.options[selObj.selectedIndex].value;
        var radioGrp = document.getElementById('testForm')['unitName'];
        var unit = (radioGrp[0].checked)?'month':'week';
        output = 'You have selected the '+unit+' of '+optValue;
    }
    var outputDiv = document.getElementById('output');
    outputDiv.innerHTML = output;
    return;
}

</script>

</head>
<body>
<form name="testForm" id="testForm">
<input type="radio" name="unitName" value="month" onclick="changeUnits(this.value);"> Months<br>
<input type="radio" name="unitName" value="week" onclick="changeUnits(this.value);"> Weeks<br><br>

<select name="units" disabled="disabled" onchange="doSomething(this);">
  <option>Select a Unit</option>
</select>
</form>

<br /><br /><br />
<div id="output"></div>
</body>
</html>

mp1234 · February 28, 2009

"Just a side note to start, it's typically good manners to address a person by their name rather than the type of code they posted " :-[

My mistake, I didn't know if your username is same as your name. I really didn't mean to address like that. Sorry about that. I keep in mind

mjdamato, I am trying to accomplish this in specific:

user has option to click radiobutton month or week.

if month is clicked then user gets dropdown with months.

If january is clicked then it goes to DB and grabs whatever is in there for date 1/1/09 to 1/31/09 it will print it in table. and so on

If week is clicked then it will go in DB for date of 1/1/09 to 1/7/09 and print it in tabel. That is all it is suppose to do.

I had it working for php with one dropdown, then i didn't have to worry about radio button populating dropdown. I couldn't get the variables to set properly when i used radiobutton to populate the dropdown and use the selected value.

Thanks for the example..it makes it easy to understand and even better to get another perspective. it is quiet impressive to get multiple directions on one subject. it always amaze me. i have been meaning to look into js more and i finally started to thanks to you. I really like the part where dropdown is disabled until something is clicked.

Sign In

dropdown & radio button issue

Recommended Posts

mp1234

Link to comment

Share on other sites

sillysillysilly

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

mp1234

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

mp1234

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information