By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,028 Members | 1,092 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,028 IT Pros & Developers. It's quick & easy.

Text-based radio buttons

P: 2
Hello.

Need help to make text-based radio buttons.

On my calender site I want to have text that works like radio buttons.

Exampel, bold text is the selected radio-text.
Jan Feb Mar Apr May Jun Jul Aug .....

This is my code right now:
<index.php>
Expand|Select|Wrap|Line Numbers
  1. <form action="index.php" method="get">
  2.  
  3.  
  4. <input type="hidden" name="val" id="val" value=""> 
  5. <span onclick="this.style.color = 'red'; document.getElementById('val').value = 'jan'">Jan</span>
  6. <span onclick="this.style.color = 'red'; document.getElementById('val').value = 'feb'">Feb</span>
  7. <span onclick="this.style.color = 'red'; document.getElementById('val').value = 'mar'">Mar</span>
  8. and so on...
  9. </br>
  10. <input type="submit" value="send" name="send" />
  11. </form>
  12.  
</index.php>


This code works fine but I have two problem that Java script meaby can solve??

First problem, it wont remember selection after you hit the submit button. I can get variabel on selected month trough GET command.

Second problem, the text color won´t change back to black when you change a selection.

Hope someone understand my English and the problem.

Greetings
David Walman
Sweden
Jan 5 '08 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
Hi David, welcome to TSDN!
First problem, it wont remember selection after you hit the submit button. I can get variabel on selected month trough GET command.
To remember the selection after leaving the page, you will need to use cookies.
Second problem, the text color won´t change back to black when you change a selection.
You will need to loop through and change all of them or you could keep a reference of the currently selected and change that to black when another one is clicked. You could use a function which would remove redundancy in your code.
Jan 5 '08 #2

P: 2
Thank you for a quick answer.

I have tried functions, it didnt work.

The issue i have with the function is this command: this.style.color = 'red';

Didnt work in a function?
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function red(){
  3. this.style.color = 'red';
  4. }
  5. </script>
  6.  
  7. <input type="hidden" name="val" id="val" value=""> 
  8. <span onclick="red(); document.getElementById('val').value = 'jan'">Jan</span>
  9.  
Then i have tried to use tags to change color but java script dont suport costum tag names.

This is how i want it to be:
Expand|Select|Wrap|Line Numbers
  1. function janfunction(){
  2. jantext.color="red";
  3. }
  4.  
  5. <jantext onclick="janfunction(); document.getElementById('val').value = 'jan'">Jan</jantext>
  6.  
Im not a JS programmer, have only read a few JS tutorials on the web.
Jan 5 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Use the function like this:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. // set last to currently selected span object unless you want to start with none selected
  3. function changeToRed(obj, val) {
  4.   obj.style.color = 'red';
  5.   document.getElementById('val').value = val;
  6.   last.style.color = 'black';
  7.   last = this;
  8. }
  9. </script>
  10.  
  11. <input type="hidden" name="val" id="val" value=""> 
  12. <span onclick="changeToRed(this,'jan');">Jan</span>
  13.  
Jan 6 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.