943,799 Members | Top Members by Rank

Ad:
  • PHP Discussion Thread
  • Unsolved
  • Views: 8211
  • PHP RSS
Feb 3rd, 2009
0

open a form onclick radio button ?

Expand Post »
Hi , to all

I want your help :-

How i can open a new file (may be called as "form1.php" ) on my current page , only by onclick of radio buttons
without using submit button ?


any suggessions will be appreciated.

Thanks & Regards.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
MSK 7 is offline Offline
9 posts
since Jan 2009
Feb 3rd, 2009
0

Re: open a form onclick radio button ?

for radio button
PHP Syntax (Toggle Plain Text)
  1. <td><input type="radio" name="cardtype" value="s" rel="none" checked />
  2. Single Side &nbsp;&nbsp;&nbsp;<input type="radio" name="cardtype" value="b" rel="card" />
  3. Both Side</td>

this will be the js file for the radio buttons

PHP Syntax (Toggle Plain Text)
  1. var containerTag = 'TR';
  2.  
  3. var compatible = (
  4. document.getElementById && document.getElementsByTagName && document.createElement
  5. &&
  6. !(navigator.userAgent.indexOf('MSIE 10') != -1 && navigator.userAgent.indexOf('Mac') != -1)
  7. );
  8.  
  9. if (compatible)
  10. {
  11. document.write('<style>.accessibility{display: none}</style>');
  12. var waitingRoom = document.createElement('div');
  13. }
  14.  
  15. var hiddenFormFieldsPointers = new Object();
  16.  
  17. function prepareForm()
  18. {
  19. if (!compatible) return;
  20. var marker = document.createElement(containerTag);
  21. marker.style.display = 'none';
  22.  
  23. var x = document.getElementsByTagName('select');
  24. for (var i=0;i<x.length;i++)
  25. addEvent(x[i],'change',showHideFields)
  26.  
  27. var x = document.getElementsByTagName(containerTag);
  28. var hiddenFields = new Array;
  29. for (var i=0;i<x.length;i++)
  30. {
  31. if (x[i].getAttribute('rel'))
  32. {
  33. var y = getAllFormFields(x[i]);
  34. x[i].nestedRels = new Array();
  35. for (var j=0;j<y.length;j++)
  36. {
  37. var rel = y[j].getAttribute('rel');
  38. if (!rel || rel == 'none') continue;
  39. x[i].nestedRels.push(rel);
  40. }
  41. if (!x[i].nestedRels.length) x[i].nestedRels = null;
  42. hiddenFields.push(x[i]);
  43. }
  44. }
  45.  
  46. while (hiddenFields.length)
  47. {
  48. var rel = hiddenFields[0].getAttribute('rel');
  49. if (!hiddenFormFieldsPointers[rel])
  50. hiddenFormFieldsPointers[rel] = new Array();
  51. var relIndex = hiddenFormFieldsPointers[rel].length;
  52. hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
  53. var newMarker = marker.cloneNode(true);
  54. newMarker.id = rel + relIndex;
  55. hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
  56. waitingRoom.appendChild(hiddenFields.shift());
  57. }
  58.  
  59. setDefaults();
  60. addEvent(document,'click',showHideFields);
  61. }
  62.  
  63. function setDefaults()
  64. {
  65. var y = document.getElementsByTagName('input');
  66. for (var i=0;i<y.length;i++)
  67. {
  68. if (y[i].checked && y[i].getAttribute('rel'))
  69. intoMainForm(y[i].getAttribute('rel'))
  70. }
  71.  
  72. var z = document.getElementsByTagName('select');
  73. for (var i=0;i<z.length;i++)
  74. {
  75. if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
  76. intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
  77. }
  78.  
  79. }
  80.  
  81. function showHideFields(e)
  82. {
  83. if (!e) var e = window.event;
  84. var tg = e.target || e.srcElement;
  85.  
  86.  
  87. var fieldsToBeInserted = tg.getAttribute('rel');
  88.  
  89.  
  90. if (tg.type == 'radio')
  91. {
  92. removeOthers(tg.form[tg.name],fieldsToBeInserted)
  93. intoMainForm(fieldsToBeInserted);
  94. }
  95. else if (tg.type == 'select-one')
  96. {
  97. fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel');
  98. removeOthers(tg.options,fieldsToBeInserted);
  99. intoMainForm(fieldsToBeInserted);
  100. }
  101. }
  102.  
  103. function removeOthers(others,fieldsToBeInserted)
  104. {
  105. for (var i=0;i<others.length;i++)
  106. {
  107. var show = others[i].getAttribute('rel');
  108. if (show == fieldsToBeInserted) continue;
  109. intoWaitingRoom(show);
  110. }
  111. }
  112.  
  113. function intoWaitingRoom(relation)
  114. {
  115. if (relation == 'none') return;
  116. var Elements = hiddenFormFieldsPointers[relation];
  117. for (var i=0;i<Elements.length;i++)
  118. {
  119. waitingRoom.appendChild(Elements[i]);
  120. if (Elements[i].nestedRels)
  121. for (var j=0;j<Elements[i].nestedRels.length;j++)
  122. intoWaitingRoom(Elements[i].nestedRels[j]);
  123. }
  124. }
  125.  
  126. function intoMainForm(relation)
  127. {
  128. if (relation == 'none') return;
  129. var Elements = hiddenFormFieldsPointers[relation];
  130. for (var i=0;i<Elements.length;i++)
  131. {
  132. var insertPoint = document.getElementById(relation+i);
  133. insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
  134. if (Elements[i].nestedRels)
  135. {
  136. var fields = getAllFormFields(Elements[i]);
  137. for (var j=0;j<fields.length;j++)
  138. {
  139. if (!fields[j].getAttribute('rel')) continue;
  140. if (fields[j].checked || fields[j].selected)
  141. intoMainForm(fields[j].getAttribute('rel'));
  142. }
  143. }
  144. }
  145. }
  146.  
  147. function getAllFormFields(node)
  148. {
  149. var allFormFields = new Array;
  150. var x = node.getElementsByTagName('input');
  151. for (var i=0;i<x.length;i++)
  152. allFormFields.push(x[i]);
  153. var y = node.getElementsByTagName('option');
  154. for (var i=0;i<y.length;i++)
  155. allFormFields.push(y[i]);
  156. return allFormFields;
  157. }
  158.  
  159. /** ULTRA-SIMPLE EVENT ADDING **/
  160.  
  161. function addEvent(obj,type,fn)
  162. {
  163. if (obj.addEventListener)
  164. obj.addEventListener(type,fn,false);
  165. else if (obj.attachEvent)
  166. obj.attachEvent("on"+type,fn);
  167. }
  168.  
  169. addEvent(window,"load",prepareForm);
  170.  
  171.  
  172. /** PUSH AND SHIFT FOR IE5 **/
  173.  
  174. function Array_push() {
  175. var A_p = 0
  176. for (A_p = 0; A_p < arguments.length; A_p++) {
  177. this[this.length] = arguments[A_p]
  178. }
  179. return this.length
  180. }
  181.  
  182. if (typeof Array.prototype.push == "undefined") {
  183. Array.prototype.push = Array_push
  184. }
  185.  
  186. function Array_shift() {
  187. var A_s = 0
  188. var response = this[0]
  189. for (A_s =0; A_s < this.length-1; A_s++) {
  190. this[A_s] = this[A_s +1]
  191. }
  192. this.length--
  193. return response
  194. }
  195.  
  196. if (typeof Array.prototype.shift == "undefined") {
  197. Array.prototype.shift = Array_shift
  198. }



Enjoy...........
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jeet_portal is offline Offline
18 posts
since Jan 2007
Feb 3rd, 2009
0

Re: open a form onclick radio button ?

That's a lot of code! What about having hidden sections and displaying them/hiding them with the onlick event? It's not as slick or as professional as the last post, but it's a lot quicker.

The documents are 'loaded' before the page is displayed. Only one file will be displayed at a time. Notice the first file is shown by default and the first radio button is checked.

PHP Syntax (Toggle Plain Text)
  1. (...)
  2. <input id="first" name="first" onclick="document.getElementById('firstfile').style.display='block'; document.getElementById('secondfile').style.display='none';return false;" checked="checked" />
  3. <input id="second" name="second" onclick="document.getElementById('secondfile').style.display='block'; document.getElementById('firstfile').style.display='none';return false;" />
  4. (...)
  5. <div id="firstfile" style="display:block;">
  6. <?php include('includes/myfirstfile.php"); ?>
  7. </div>
  8.  
  9. <div id="secondfile" style="display:none;">
  10. <?php include('includes/mysecondfile.php"); ?>
  11. </div>
  12.  
Sponsor
Featured Poster
Reputation Points: 1048
Solved Threads: 947
Sarcastic Poster
ardav is offline Offline
6,680 posts
since Oct 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in PHP Forum Timeline: edit data in the existing field
Next Thread in PHP Forum Timeline: problems with mktime function





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC