radio button validation

Thread Solved

Join Date: Sep 2009
Posts: 72
Reputation: muralikalpana is an unknown quantity at this point 
Solved Threads: 0
muralikalpana's Avatar
muralikalpana muralikalpana is online now Online
Junior Poster in Training

radio button validation

 
0
  #1
16 Days Ago
we have two radio buttons with same name. when we check radiobutton no.of imagefile boxes appear.
for example i have two radio buttons. if i check 1 radio button appear 5 image upload fields. now selects another radio button selects then appear only 10 image upload field. anybody help.
Last edited by muralikalpana; 16 Days Ago at 10:40 am.
Reply With Quote Quick reply to this message  
Join Date: Oct 2006
Posts: 940
Reputation: ardav will become famous soon enough ardav will become famous soon enough 
Solved Threads: 124
ardav's Avatar
ardav ardav is offline Offline
Posting Shark
 
0
  #2
16 Days Ago
AM I correct in assuming you have:
2 radiobuttons - one to display 5 file upload fields and one to display 10 upload fields.

A quick and dirty solution would be to hide/show through javascript and css:

  1. <input name="showups" type="radio" value="0" onclick="show_up(5);return false;" selected="selected" /><label for="show5">Show 5 upload fields</label>
  2. <input name="showups" id="show10" type="radio" value="1" onclick="show_up(10);return false;" /><label for="show10">Show 10 upload fields</label>
  3.  
  4. <input type="file" name="upload[]" />
  5. <input type="file" name="upload[]" />
  6. <input type="file" name="upload[]" />
  7. <input type="file" name="upload[]" />
  8. <input type="file" name="upload[]" />
  9. <div id = "extras" class="show">
  10. <input type="file" name="upload[]" />
  11. <input type="file" name="upload[]" />
  12. <input type="file" name="upload[]" />
  13. <input type="file" name="upload[]" />
  14. <input type="file" name="upload[]" />
  15. </div>

This gives an array of file elements (0 - 9).
In your head area:

  1. <script>
  2. function show_up(x){
  3. if(x > 5){
  4. document.getElementById('extras').className = 'show';
  5. }else{
  6. document.getElementById('extras').className = 'hide';
  7. }
  8. }
  9. </script>
  10. <style>
  11. .hide{
  12. display:none;
  13. }
  14. </style>

If you fill file widgets in range 5-9 and then hide the last 5, they will still try to upload the files - so you could write something a bit "cleverer" to deal with this. This is just an example - I wouldn't use this in a production site.
"...the woods would be a very silent place if no birds sang except for the best"
All opinions count.
Reply With Quote Quick reply to this message  
Join Date: Sep 2009
Posts: 72
Reputation: muralikalpana is an unknown quantity at this point 
Solved Threads: 0
muralikalpana's Avatar
muralikalpana muralikalpana is online now Online
Junior Poster in Training
 
0
  #3
16 Days Ago
Originally Posted by ardav View Post
AM I correct in assuming you have:
2 radiobuttons - one to display 5 file upload fields and one to display 10 upload fields.

A quick and dirty solution would be to hide/show through javascript and css:

  1. <input name="showups" type="radio" value="0" onclick="show_up(5);return false;" selected="selected" /><label for="show5">Show 5 upload fields</label>
  2. <input name="showups" id="show10" type="radio" value="1" onclick="show_up(10);return false;" /><label for="show10">Show 10 upload fields</label>
  3.  
  4. <input type="file" name="upload[]" />
  5. <input type="file" name="upload[]" />
  6. <input type="file" name="upload[]" />
  7. <input type="file" name="upload[]" />
  8. <input type="file" name="upload[]" />
  9. <div id = "extras" class="show">
  10. <input type="file" name="upload[]" />
  11. <input type="file" name="upload[]" />
  12. <input type="file" name="upload[]" />
  13. <input type="file" name="upload[]" />
  14. <input type="file" name="upload[]" />
  15. </div>

This gives an array of file elements (0 - 9).
In your head area:

  1. <script>
  2. function show_up(x){
  3. if(x > 5){
  4. document.getElementById('extras').className = 'show';
  5. }else{
  6. document.getElementById('extras').className = 'hide';
  7. }
  8. }
  9. </script>
  10. <style>
  11. .hide{
  12. display:none;
  13. }
  14. </style>

If you fill file widgets in range 5-9 and then hide the last 5, they will still try to upload the files - so you could write something a bit "cleverer" to deal with this. This is just an example - I wouldn't use this in a production site.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script>
  5. function show_up(x){
  6.  
  7. if(x > 5){
  8. document.getElementById('extra').style.display = 'table-cell';
  9. document.getElementById('extras').style.display = 'none';
  10. }else{
  11. document.getElementById('extras').style.display = 'table-cell';
  12. document.getElementById('extra').style.display = 'none';
  13. }
  14. }
  15. </script>
  16. <style>
  17. .hide{
  18. display:none;
  19. }
  20. </style>
  21. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  22. <title>Untitled Document</title>
  23. </head>
  24.  
  25. <body>
  26. <form name="form" method="post">
  27. <input name="showups" type="radio" value="0" onclick="show_up(5);return false;"/><label for="show5">Show 5 upload fields</label>
  28. <input name="showups" id="show10" type="radio" value="1" onclick="show_up(10);return false;"/><label for="show10">Show 10 upload fields</label>
  29. <div id = "extra" class="show" style="display:none">
  30. <input type="file" name="upload[]" />
  31. <input type="file" name="upload[]" />
  32. <input type="file" name="upload[]" />
  33. <input type="file" name="upload[]" />
  34. <input type="file" name="upload[]" />
  35. <input type="file" name="upload[]" />
  36. <input type="file" name="upload[]" />
  37. <input type="file" name="upload[]" />
  38. <input type="file" name="upload[]" />
  39. <input type="file" name="upload[]" />
  40. </div>
  41. <div id = "extras" class="show" style="display:none">
  42. <input type="file" name="upload[]" />
  43. <input type="file" name="upload[]" />
  44. <input type="file" name="upload[]" />
  45. <input type="file" name="upload[]" />
  46. <input type="file" name="upload[]" />
  47. </div>
  48.  
  49. </form>
  50. </body>
  51. </html>
see once its working. but radio button checking problem. what is the solution for this.
Reply With Quote Quick reply to this message  
Join Date: Oct 2006
Posts: 940
Reputation: ardav will become famous soon enough ardav will become famous soon enough 
Solved Threads: 124
ardav's Avatar
ardav ardav is offline Offline
Posting Shark
 
0
  #4
15 Days Ago
Change this line to hide the extras by default:
  1. <div id = "extras" class="hide">
Also you need a selected="selected" attribute inside the first radiobutton to ensure that the first one (5 file) is 'on'.
"...the woods would be a very silent place if no birds sang except for the best"
All opinions count.
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:


Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC