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

Submitting forms conditionally using JavaScript

P: 7
Hi,

I found an excellent article on developertutorials.com entitled: "Submitting forms conditionally using JavaScript." It told me how to write a simple form with one set of radio buttons that submits conditionally based on the input.

Is there a way of creating a form with multiple sets of radio buttons that will also submit conditionally, using JavaScript?

I am trying to set up a form on my website to enable users to select from a few options when ordering photobooks, a product I don't yet offer. The sets of radio buttons would ask, for example, the user to choose between: landscape/portrait; printed page numbers/no printed page numbers; and three/four different layouts.

Any help with this would be most appreciated.

With kind regards,

Mark
Mar 28 '13 #1
Share this Question
Share on Google+
13 Replies


Rabbit
Expert Mod 10K+
P: 12,430
Yes. If you can do it with one set of radio buttons. You can do it with more than one set of radio buttons. That's as specific as I can get because you haven't described how they multiple sets of radio buttons are supposed to interact. But most likely you will just use the same code in the tutorial except with more complex conditions.
Mar 28 '13 #2

P: 7
Hi Rabbit,

Thanks for your response.

What I am looking to achieve is something like the following:

A customer visits my site and wants to order a photobook. From the options available, they choose a landscape orientation, printed page numbers, and layout three. When the customer hits the submit button, they are taken to the appropriate page on the shop website to order what they have just chosen.

If another customer comes along and makes a different selection, they will be taken to a different webpage on submit.

I am really new to JavaScript so have very little idea what terms I should use.

Thanks in advance for any additional help.
Mar 28 '13 #3

Rabbit
Expert Mod 10K+
P: 12,430
Basically do the same thing that the tutorial says, just change the conditions in the if clauses to match your conditions.
Mar 28 '13 #4

P: 7
Hi,

Thanks for the help.

I have been trying to work out what to change the if clauses to, and I THINK I'm almost there.

Please could you tell me if this looks right?

Say my form is coded like this:

Expand|Select|Wrap|Line Numbers
  1. <form name="myform" method="post" onSubmit="javascript: decide_action();" action="">
  2. <br>
  3. <input type="radio" name="group1" value="1"> Portrait<br>
  4. <input type="radio" name="group1" value="2" checked> Landscape<br>
  5. <hr>
  6. <input type="radio" name="group2" value="1"> Layout 1<br>
  7. <input type="radio" name="group2" value="2"> Layout 2<br>
  8. <input type="radio" name="group2" value="3" checked> Layout 3<br>
  9. <input type="radio" name="group2" value="4"> Layout 4
  10. <hr>
  11. <input type="radio" name="group3" value="1"> Page numbers<br>
  12. <input type="radio" name="group3" value="2" checked> No page numbers<br>
  13. <input type="submit" name="s1" value="Submit" />
  14. </form>
Currently the JavaScript if clause goes:

Expand|Select|Wrap|Line Numbers
  1. if(document.frm1.ch[0].checked==true)
  2. {
  3. document.frm1.action="one.php";
  4. }
Were someone to want to order a landscape photobook, with layout three and with page numbers, and checked the radio buttons accordingly, should the JavaScript go something like this:

Expand|Select|Wrap|Line Numbers
  1. if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[0].checked==true)
  2. {
  3. document.frm1.action="one.php";
  4. }
Thanks in advance for any help with this. It will be most appreciated.
Apr 3 '13 #5

10K+
P: 13,264
Once this starts getting complicated then consider separating presentation from business logic by submitting to one page and doing the routing logic in that page instead of doing it all on the client.
Apr 3 '13 #6

P: 7
Hi r035198x,

The code in my last post is as complex as it's going to get. But, have I got the code right? I gave it a try at my website, but it didn't seem to work.

Not sure what I have done wrong!

Any help would be most appreciated.
Apr 3 '13 #7

10K+
P: 13,264
Use Javascript alerts to debug your javascript by printing out values like if(document.frm1.ch[0] to see they are what you expect. Also, better use Ids for for elements so that you don't have to search through many items manually and just use document.getelementById
Apr 3 '13 #8

P: 7
Hi r035198x,

I'm really sorry, but I don't understand your answer.

I'm looking for some help, as a newbie to JavaScript, with the code I have written. It doesn't work and have no idea why.

Please could I have some help with the code, either by suggesting changes or some place else I could look.

Thank-you, anyone, for your help.
Apr 3 '13 #9

Rabbit
Expert Mod 10K+
P: 12,430
We would need to see your full current code to help.
Apr 3 '13 #10

P: 7
Hi Rabbit,

Here be the html I've written for the form:

Expand|Select|Wrap|Line Numbers
  1.  <form name="frm1" method="post" onSubmit="javascript:decide_action();" action="">
  2.     <br>
  3.     <input type="radio" name="group1" value="portrait"> Portrait<br>
  4.     <input type="radio" name="group1" value="landscape" checked> Landscape<br>
  5.     <hr>
  6.     <input type="radio" name="group2" value="layout1"> Layout 1<br>
  7.     <input type="radio" name="group2" value="layout2"> Layout 2<br>
  8.     <input type="radio" name="group2" value="layout3" checked> Layout 3<br>
  9.     <input type="radio" name="group2" value="layout4"> Layout 4
  10.     <hr>
  11.     <input type="radio" name="group3" value="pagenos"> Page numbers<br>
  12.     <input type="radio" name="group3" value="nopagenos" checked> No page numbers<br>
  13.     <input type="submit" name="s1" value="Submit" />
  14.     </form>
and the javascript:

Expand|Select|Wrap|Line Numbers
  1.  <script language="javascript">
  2.  
  3. function decide_action()
  4. {
  5. if(check_buttons()==true)
  6. {
  7. if(document.frm1.group1[0].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3[0].checked==true)
  8. {
  9. document.frm1.action="one.php";
  10. }
  11. else if(document.frm1.group1[0].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3[1].checked==true)
  12. {
  13. document.frm1.action="two.php";
  14. }
  15. else if(document.frm1.group1[0].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3[0].checked==true)
  16. {
  17. document.frm1.action="three.php";
  18. }
  19. else if(document.frm1.group1[0].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3[1].checked==true)
  20. {
  21. document.frm1.action="four.php";
  22. }
  23. else if(document.frm1.group1[0].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[0].checked==true)
  24. {
  25. document.frm1.action="five.php";
  26. }
  27. else if(document.frm1.group1[0].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[1].checked==true)
  28. {
  29. document.frm1.action="six.php";
  30. }
  31. else if(document.frm1.group1[0].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3[0].checked==true)
  32. {
  33. document.frm1.action="seven.php";
  34. }
  35. else if(document.frm1.group1[0].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3[1].checked==true)
  36. {
  37. document.frm1.action="eight.php";
  38. }
  39. else if(document.frm1.group1[1].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3[0].checked==true)
  40. {
  41. document.frm1.action="nine.php";
  42. }
  43. else if(document.frm1.group1[1].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3[1].checked==true)
  44. {
  45. document.frm1.action="ten.php";
  46. }
  47. else if(document.frm1.group1[1].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3[0].checked==true)
  48. {
  49. document.frm1.action="eleven.php";
  50. }
  51. else if(document.frm1.group1[1].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3[1].checked==true)
  52. {
  53. document.frm1.action="twelve.php";
  54. }
  55. else if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[0].checked==true)
  56. {
  57. document.frm1.action="thirteen.php";
  58. }
  59. else if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[1].checked==true)
  60. {
  61. document.frm1.action="fourteen.php";
  62. }
  63. else if(document.frm1.group1[1].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3[0].checked==true)
  64. {
  65. document.frm1.action="fifteen.php";
  66. }
  67. else if(document.frm1.group1[1].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3[1].checked==true)
  68. {
  69. document.frm1.action="sixteen.php";
  70. }
  71. }
  72.  
  73. function check_buttons()
  74. {
  75. var ok=false;
  76. for(i=0; i<3; i++)
  77. {
  78. if(document.frm1.ch[i].checked==true)
  79. {
  80. ok=true;
  81. }
  82. }
  83. if(ok==false)
  84. {
  85. alert("Select at least one option.");
  86. }
  87. return ok;
  88. }
Thanks in advance for your help.
Apr 3 '13 #11

Rabbit
Expert Mod 10K+
P: 12,430
1) You're missing a semi-colon to end your decide_action function.

2) On line 78, you have no form elements named ch.

3) In your HTML, your onsubmit needs to return the value that is returned by the function.

4) Your function needs to return a true/false value to let it know if it should continue with the form submission.
Apr 3 '13 #12

P: 7
Hi Rabbit,

You've obviously looked very carefully at my code. Thank-you.

I've edited the JavaScript so now I THINK I've fixed points 1 and 2.

Here is the result:

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.  
  3. function decide_action()
  4. {
  5. if(check_buttons()==true)
  6. {
  7. if(document.frm1.group1[0].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3
  8.  
  9. [0].checked==true)
  10. {
  11. document.frm1.action="one.php";
  12. }
  13. else if(document.frm1.group1[0].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3
  14.  
  15. [1].checked==true)
  16. {
  17. document.frm1.action="two.php";
  18. }
  19. else if(document.frm1.group1[0].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3
  20.  
  21. [0].checked==true)
  22. {
  23. document.frm1.action="three.php";
  24. }
  25. else if(document.frm1.group1[0].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3
  26.  
  27. [1].checked==true)
  28. {
  29. document.frm1.action="four.php";
  30. }
  31. else if(document.frm1.group1[0].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3
  32.  
  33. [0].checked==true)
  34. {
  35. document.frm1.action="five.php";
  36. }
  37. else if(document.frm1.group1[0].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3
  38.  
  39. [1].checked==true)
  40. {
  41. document.frm1.action="six.php";
  42. }
  43. else if(document.frm1.group1[0].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3
  44.  
  45. [0].checked==true)
  46. {
  47. document.frm1.action="seven.php";
  48. }
  49. else if(document.frm1.group1[0].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3
  50.  
  51. [1].checked==true)
  52. {
  53. document.frm1.action="eight.php";
  54. }
  55. else if(document.frm1.group1[1].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3
  56.  
  57. [0].checked==true)
  58. {
  59. document.frm1.action="nine.php";
  60. }
  61. else if(document.frm1.group1[1].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3
  62.  
  63. [1].checked==true)
  64. {
  65. document.frm1.action="ten.php";
  66. }
  67. else if(document.frm1.group1[1].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3
  68.  
  69. [0].checked==true)
  70. {
  71. document.frm1.action="eleven.php";
  72. }
  73. else if(document.frm1.group1[1].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3
  74.  
  75. [1].checked==true)
  76. {
  77. document.frm1.action="twelve.php";
  78. }
  79. else if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3
  80.  
  81. [0].checked==true)
  82. {
  83. document.frm1.action="thirteen.php";
  84. }
  85. else if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3
  86.  
  87. [1].checked==true)
  88. {
  89. document.frm1.action="fourteen.php";
  90. }
  91. else if(document.frm1.group1[1].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3
  92.  
  93. [0].checked==true)
  94. {
  95. document.frm1.action="fifteen.php";
  96. }
  97. else if(document.frm1.group1[1].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3
  98.  
  99. [1].checked==true)
  100. {
  101. document.frm1.action="sixteen.php";
  102. };
  103. }
  104.  
  105. function check_buttons()
  106. {
  107. var ok=false;
  108. for(i=0; i<3; i++)
  109. {
  110. if(document.frm1.group1[i].checked==true)
  111. {
  112. ok=true;
  113. }
  114. }
  115. if(ok==false)
  116. {
  117. alert("Please choose Portrait or Landscape.");
  118. }
  119. return ok;
  120. }
  121.  
  122.  
  123. function check_buttons()
  124. {
  125. var ok=false;
  126. for(i=0; i<3; i++)
  127. {
  128. if(document.frm1.group2[i].checked==true)
  129. {
  130. ok=true;
  131. }
  132. }
  133. if(ok==false)
  134. {
  135. alert("Please choose a Layout for your PhotoBook.");
  136. }
  137. return ok;
  138. }
  139.  
  140. function check_buttons()
  141. {
  142. var ok=false;
  143. for(i=0; i<3; i++)
  144. {
  145. if(document.frm1.group3[i].checked==true)
  146. {
  147. ok=true;
  148. }
  149. }
  150. if(ok==false)
  151. {
  152. alert("Please choose whether or not you would like page numbers printing.");
  153. }
  154. return ok;
  155. }
  156. </script>
But, I am not sure what the HTML should look like to satisfy your points 3 and 4. Please could you help again.

Many thanks in advance for your help. I feel like I'm learning a lot.
Apr 4 '13 #13

Rabbit
Expert Mod 10K+
P: 12,430
Sorry, I misspoke earlier. I didn't mean to say that you were missing a semi-colon to end the function. I meant to say that you were missing a bracket to end the function.

You can't have the same function defined multiple times with the same name like that. Combine them into one function. Or give them different names and call each one.

For 3, in your HTML you have onSubmit="javascript: decide_action();". Use onSubmit="return decide_action()" instead.

For 4, your function just needs a return true; at the bottom.
Apr 4 '13 #14

Post your reply

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