Back To Programming / Scripting / Coding Forum

JavaScript: radio button

  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: 28 Jul 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post July 30th, 2003, 8:35 pm

Good day to all...
i need script for my html code.

Line number On/Off
Code: Select all
BirthPlace is:<br>
<INPUT CHECKED name="Brgy" type="radio" value="Brgy">Brgy&&
<INPUT name="MuniCity" type="radio" value="MuniCity">Muni/city&&
<INPUT name="Province" type="radio" value="Province">Province<hr>
BirthPlace:<br>
<select name="BirthPlace">
<option value="Marikina">MARIKINA
<option value="Mandaluyong">MANDALUYONG
<option value="Malabon">MALABON
<option value="Makati">MAKATI
<option value="Makati">MANILA</select>


What i want to have in a script for my 3 radio buttons was by clicking it, it will change the value of the selectinput by its corresponding list. and heres my sample list..

list for Brgy:
50THD-OZAM
ABABA-BALB
BALAB-KIDA
CALIC-BABA
GUTAO-DINE
...

list for MuniCity:
AGON
AJUY
BALM
CAGW
CAJI
LUPI
MABT
...

list for Province
Province
KAL
ILO
LEY
ILN
SUL
MET
ANT
SUL
...

any kind of help will appreciated. thank you in advance..
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 30th, 2003, 8:35 pm

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: 28 May 2003
  • Posts: 21846
  • Loc: Pittsburgh PA
  • Status: Offline

Post July 30th, 2003, 10:06 pm

Include a dropdown menu next to the radio buttons.
Keep everything else as is.

It should be no more complex than that and if you know this much about forms, I assume you can generate the dropdown menus. You may have to create a table to get the cosmetic appearance to look good on the page.
"The web is a dominatrix. Every where I turn, I see little buttons ordering me to Submit."
Boasting Rights Sports Forum || Nuclear Services - www.alaron-nuclear.com
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: 17 May 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post July 31st, 2003, 9:16 am

I'm not sure I understand what you're trying to do. Did you mean that you want to add another select drop-down menu and have the radio buttons determine which list is shown to the user?

This can be done but then they will only be able to select an item from one of the the three lists. In other words they can't choose a selection from "Brgy", "Muni/city", and "Province" but only from the list which is showing and that will depend on which radio button is chosen.

If you need them to select from all three lists then you should just add three separate drop-down selects as ATNO/TW suggests.

If you really want to add a dynamically changing menu with three different lists you could try this code, although I'm not sure it's necessarily the best way of doing it and it won't work in older browsers like Netscape 4.

Also all the radio buttons must have the same name since only one can be chosen and you will probably want to add some code to validate the form to make sure that the user doesn't accidentally submit one of the empty values that I used to make the lists the same length. There is probably a way to do this with lists of different lengths, but I didn't have enought time to look into it and I'm not sure this is even what you want.

Line number On/Off
Code: Select all
<html>
<head>
<script>
function setList(theList) {
   switch (theList) {
      case 1 : {
      document.theForm.mySelect.options[0].value="50THD-OZAM";
      document.theForm.mySelect.options[1].value="ABABA-BALB";
      document.theForm.mySelect.options[2].value="BALAB-KIDA";
      document.theForm.mySelect.options[3].value="CALIC-BABA";
      document.theForm.mySelect.options[4].value="GUTAO-DINE";
      document.theForm.mySelect.options[5].value="";
      document.theForm.mySelect.options[6].value="";
      document.theForm.mySelect.options[7].value="";
      document.theForm.mySelect.options[0].selected=true;
      document.theForm.radioButton[0].checked=true;
      break;
   }
      case 2 : {
      document.theForm.mySelect.options[0].value="AGON";
      document.theForm.mySelect.options[1].value="AJUY";
      document.theForm.mySelect.options[2].value="BALM";
      document.theForm.mySelect.options[3].value="CAGW";
      document.theForm.mySelect.options[4].value="CAJI";
      document.theForm.mySelect.options[5].value="LUPI";
      document.theForm.mySelect.options[6].value="MABT";
      document.theForm.mySelect.options[7].value="";
      document.theForm.mySelect.options[0].selected=true;
      document.theForm.radioButton[1].checked=true;
      break;
   }
      case 3 : {
      document.theForm.mySelect.options[0].value="KAL";
      document.theForm.mySelect.options[1].value="ILO ";
      document.theForm.mySelect.options[2].value="LEY";
      document.theForm.mySelect.options[3].value="ILN ";
      document.theForm.mySelect.options[4].value="SUL";
      document.theForm.mySelect.options[5].value="MET";
      document.theForm.mySelect.options[6].value="ANT";
      document.theForm.mySelect.options[7].value="SUL";
      document.theForm.mySelect.options[0].selected=true;
      document.theForm.radioButton[2].checked=true;
      break;
   }

}
setOptionText();
}

function setOptionText() {
document.theForm.mySelect.options[0].text=document.theForm.mySelect.options[0].value;
document.theForm.mySelect.options[1].text=document.theForm.mySelect.options[1].value;
document.theForm.mySelect.options[2].text=document.theForm.mySelect.options[2].value;
document.theForm.mySelect.options[3].text=document.theForm.mySelect.options[3].value;
document.theForm.mySelect.options[4].text=document.theForm.mySelect.options[4].value;
document.theForm.mySelect.options[5].text=document.theForm.mySelect.options[5].value;
document.theForm.mySelect.options[6].text=document.theForm.mySelect.options[6].value;
document.theForm.mySelect.options[7].text=document.theForm.mySelect.options[7].value;
}
</script>

</head>
<body onload="setList(1)">
<form name="theForm" onreset="setList(1)">
BirthPlace is:<br>
<input checked name="radioButton" type="radio" value="Brgy" onclick="setList(1)">Brgy&&
<input name="radioButton" type="radio" value="MuniCity"  onclick="setList(2)">Muni/city&&
<input name="radioButton" type="radio" value="Province"  onclick="setList(3)">Province<hr>
BirthPlace:<br>
<select name="BirthPlace">
<option value="Marikina" selected>MARIKINA
<option value="Mandaluyong">MANDALUYONG
<option value="Malabon">MALABON
<option value="Makati">MAKATI
</select>
<select name="mySelect">
<option value="50THD-OZAM" selected>50THD-OZAM</option>
<option value="ABABA-BALB">ABABA-BALB</option>
<option value="BALAB-KIDA">BALAB-KIDA</option>
<option value="CALIC-BABA">CALIC-BABA</option>
<option value="GUTAO-DINE">GUTAO-DINE</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: 28 Jul 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post July 31st, 2003, 7:23 pm

RichB wrote:
I'm not sure I understand what you're trying to do. Did you mean that you want to add another select drop-down menu and have the radio buttons determine which list is shown to the user?

This can be done but then they will only be able to select an item from one of the the three lists. In other words they can't choose a selection from "Brgy", "Muni/city", and "Province" but only from the list which is showing and that will depend on which radio button is chosen.


Yes this is it what im trying to do with my radio button and select menu..

Line number On/Off
Code: Select all
<html>
<head>
</head>
<body onload="setList(1)">
<form name="theForm" onreset="setList(1)">
BirthPlace is:<br>
<input checked name="radioButton" type="radio" value="Brgy" onclick="setList(1)">Brgy&&
<input name="radioButton" type="radio" value="MuniCity"  onclick="setList(2)">Muni/city&&
<input name="radioButton" type="radio" value="Province"  onclick="setList(3)">Province<hr>
BirthPlace:<br>
<select name="mySelect">
<option value="50THD-OZAM" selected>50THD-OZAM</option>
<option value="ABABA-BALB">ABABA-BALB</option>
<option value="BALAB-KIDA">BALAB-KIDA</option>
<option value="CALIC-BABA">CALIC-BABA</option>
<option value="GUTAO-DINE">GUTAO-DINE</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>



Thanks in a million, its a big help from you.. :D
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: 28 Jul 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post August 1st, 2003, 12:19 am

i play around with the code you gave me and i found some encoding time prolonging on the side of script. :shock:


Line number On/Off
Code: Select all
function setList(theList) {
   switch (theList) {
      case 1 : {
      document.theForm.mySelect.options[0].value="50THD-OZAM";
      document.theForm.mySelect.options[1].value="ABABA-BALB";
      document.theForm.mySelect.options[2].value="BALAB-KIDA";
      document.theForm.mySelect.options[3].value="CALIC-BABA";
      document.theForm.mySelect.options[4].value="GUTAO-DINE";
      document.theForm.mySelect.options[5].value="";
      document.theForm.mySelect.options[6].value="";
      document.theForm.mySelect.options[7].value="";
      document.theForm.mySelect.options[0].selected=true;
      document.theForm.radioButton[0].checked=true;
      break;
   }
      case 2 : {
      document.theForm.mySelect.options[0].value="AGON";
      document.theForm.mySelect.options[1].value="AJUY";
      document.theForm.mySelect.options[2].value="BALM";
      document.theForm.mySelect.options[3].value="CAGW";
      document.theForm.mySelect.options[4].value="CAJI";
      document.theForm.mySelect.options[5].value="LUPI";
      document.theForm.mySelect.options[6].value="MABT";
      document.theForm.mySelect.options[7].value="";
      document.theForm.mySelect.options[0].selected=true;
      document.theForm.radioButton[1].checked=true;
      break;
   }
      case 3 : {
      document.theForm.mySelect.options[0].value="KAL";
      document.theForm.mySelect.options[1].value="ILO ";
      document.theForm.mySelect.options[2].value="LEY";
      document.theForm.mySelect.options[3].value="ILN ";
      document.theForm.mySelect.options[4].value="SUL";
      document.theForm.mySelect.options[5].value="MET";
      document.theForm.mySelect.options[6].value="ANT";
      document.theForm.mySelect.options[7].value="SUL";
      document.theForm.mySelect.options[0].selected=true;
      document.theForm.radioButton[2].checked=true;
      break;
   }

}


the maximum number of my list from menu was over a thousand[Barangay] and the minimum was 200+[Province]. so that means, i will also encode with this document.theForm.mySelect.options[number].value=""; :cry:

thus any other way of fixing or reviced this code to reduce of time from encoding??
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: 17 May 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post August 1st, 2003, 7:41 am

Yikes! I had no idea you had lists that long. :shock:

There's no easy way to create that with client-side javascript. If you already have the information in a text file or a database and access to a server-side scripting language like php you could generate the lists dynamically by extracting the data from the database/file and printing it to the page inside a loop that does the work for you.

If you already have the information for the lists in text files - say a text file for Barangay, a text file for Provinces and one for Muni/City, then you could email me the text files and I could try to generate the html file and send it back to you, but I don't think it will work in a plain html file with that many items. I thought those were the lists.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: 28 May 2003
  • Posts: 21846
  • Loc: Pittsburgh PA
  • Status: Offline

Post August 1st, 2003, 8:16 pm

Not to mention it will take some browsers forever to parse! Wow!
I think RichB is right -- use a database and php or asp, and break it down into smaller segments (perhaps alphabetically).

That's a tough little problem you have there. Unfortunately I don't have any good solutions to offer.
"The web is a dominatrix. Every where I turn, I see little buttons ordering me to Submit."
Boasting Rights Sports Forum || Nuclear Services - www.alaron-nuclear.com
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: 28 Jul 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post August 3rd, 2003, 7:32 pm

RichB wrote:
Yikes! I had no idea you had lists that long. :shock:

There's no easy way to create that with client-side javascript. If you already have the information in a text file or a database and access to a server-side scripting language like php you could generate the lists dynamically by extracting the data from the database/file and printing it to the page inside a loop that does the work for you.

If you already have the information for the lists in text files - say a text file for Barangay, a text file for Provinces and one for Muni/City, then you could email me the text files and I could try to generate the html file and send it back to you, but I don't think it will work in a plain html file with that many items. I thought those were the lists.


Hi there again RichB. Thanks for the comment and you also ATNO/TW..
at this time only html i know how to work with my data. i dont have yet knowledge around in php+sql. But then again thanks for askin me to email you the Barangay,Municipality and Province text and actualy i have them..
yeah your both right coz the past week end i played around with code to feed all the list i have. and when i finished and testing it the page loading so much time until it will not respond and hang. im really naive to that not thinking of time consumed is just a waiste. :cry: i guess this is shortcoming for a novice like me..

the next post is for RichB and ATNO/TW: txt file; brgy,minu,prov..
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: 28 May 2003
  • Posts: 21846
  • Loc: Pittsburgh PA
  • Status: Offline

Post August 3rd, 2003, 8:05 pm

Learning PHP, ASP and SQL is not as hard as you think. A few weeks ago I knew nothing about PHP or SQL, now I feel I have enough knowledge to say I'm slightly past the beginner stage. And ASP is very close to PHP when it comes to databases because it uses the same SQL functions that PHP does (for the most part).

It's just a matter of whether you have the time to do a little learning to do it right. I think in your case it would be worth the effort. There's lot's of folks around here that seem more than willing to help when you run into problems.
"The web is a dominatrix. Every where I turn, I see little buttons ordering me to Submit."
Boasting Rights Sports Forum || Nuclear Services - www.alaron-nuclear.com
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: 28 Jul 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post August 3rd, 2003, 8:10 pm

RichB wrote:
Yikes! I had no idea you had lists that long. :shock:

There's no easy way to create that with client-side javascript. If you already have the information in a text file or a database and access to a server-side scripting language like php you could generate the lists dynamically by extracting the data from the database/file and printing it to the page inside a loop that does the work for you.

If you already have the information for the lists in text files - say a text file for Barangay, a text file for Provinces and one for Muni/City, then you could email me the text files and I could try to generate the html file and send it back to you, but I don't think it will work in a plain html file with that many items. I thought those were the lists.


I hope that you receive my email to you about the data in txt format..

to ATNO/TW would you like also to see the list of my data?

thanks for your help guys..
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: 28 May 2003
  • Posts: 21846
  • Loc: Pittsburgh PA
  • Status: Offline

Post August 3rd, 2003, 8:20 pm

Sure. I just sent you my email addy in Private message.
"The web is a dominatrix. Every where I turn, I see little buttons ordering me to Submit."
Boasting Rights Sports Forum || Nuclear Services - www.alaron-nuclear.com
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: 17 May 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post August 3rd, 2003, 8:29 pm

Outlook express wouldn't let me download the attachment because it considered it unsafe. I'm not sure why because I don't use Outlook express all that much and I'm not that familiar with it, but my web-based email kept hanging when I tried to access it, so I tried to pull it down with OE and didn't have any luck.

Anyway, I wouldn't be able to do anything other than generate a static html file using a script to insert the data. That would have saved you the time of copying and pasting, but as you said in your earlier post it looks like a list that long will hang the browser, so I think you're going to have to look for another solution.

Perhaps until you find a workable way to present the data to the user, you could just have them enter the data in text fields. I know this is not an ideal solution, but I can't think of another way at the moment, and a list of 1,000 items is just too long to work. :(
  • vickriz
  • Novice
  • Novice
  • User avatar
  • Joined: 28 Jul 2003
  • Posts: 31
  • Loc: Phlippines
  • Status: Offline

Post August 3rd, 2003, 8:40 pm

Can we use this txt file as an ini file and make a script to use it to load into html page?? is that possible??


RichB wrote:
Outlook express wouldn't let me download the attachment because it considered it unsafe. I'm not sure why because I don't use Outlook express all that much and I'm not that familiar with it, but my web-based email kept hanging when I tried to access it, so I tried to pull it down with OE and didn't have any luck.

Anyway, I wouldn't be able to do anything other than generate a static html file using a script to insert the data. That would have saved you the time of copying and pasting, but as you said in your earlier post it looks like a list that long will hang the browser, so I think you're going to have to look for another solution.

Perhaps until you find a workable way to present the data to the user, you could just have them enter the data in text fields. I know this is not an ideal solution, but I can't think of another way at the moment, and a list of 1,000 items is just too long to work. :(
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: 28 May 2003
  • Posts: 21846
  • Loc: Pittsburgh PA
  • Status: Offline

Post August 3rd, 2003, 8:43 pm

Simple fix for that RichB
Go to Tools|Options. On the security tab uncheck "Do not allow attachments to be saved or opened that could potentially be a virus."
Click Apply or OK and refresh OE -- you should then be able to save or open the attachment.
"The web is a dominatrix. Every where I turn, I see little buttons ordering me to Submit."
Boasting Rights Sports Forum || Nuclear Services - www.alaron-nuclear.com
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: 17 May 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post August 3rd, 2003, 8:46 pm

Thanks ATNO/TW, I've got 'em now. Not sure if I'll be able to do much with them, but I'll give it a shot and see what happens.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 3rd, 2003, 8:46 pm

1, 2

Post Information

  • Total Posts in this topic: 20 posts
  • Moderator: Moderator Team
  • Users browsing this forum: No registered users and 92 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.