Submitting forms conditionally using JavaScript

[Rwthwyn]

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

[Rabbit]

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.

[Rwthwyn]

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.

[Rabbit]

Basically do the same thing that the tutorial says, just change the conditions in the if clauses to match your conditions.

[Rwthwyn]

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:

<form name="myform" method="post" onSubmit="javascript: decide_action();" action="">
<br>
<input type="radio" name="group1" value="1"> Portrait<br>
<input type="radio" name="group1" value="2" checked> Landscape<br>
<hr>
<input type="radio" name="group2" value="1"> Layout 1<br>
<input type="radio" name="group2" value="2"> Layout 2<br>
<input type="radio" name="group2" value="3" checked> Layout 3<br>
<input type="radio" name="group2" value="4"> Layout 4
<hr>
<input type="radio" name="group3" value="1"> Page numbers<br>
<input type="radio" name="group3" value="2" checked> No page numbers<br>
<input type="submit" name="s1" value="Submit" />
</form>

Currently the JavaScript if clause goes:

if(document.frm1.ch[0].checked==true)
{
document.frm1.action="one.php";
}

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:

if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[0].checked==true)
{
document.frm1.action="one.php";
}

Thanks in advance for any help with this. It will be most appreciated.

[r035198x]

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.

[Rwthwyn]

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.

[r035198x]

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

[Rwthwyn]

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.

[Rabbit]

We would need to see your full current code to help.

[Rwthwyn]

Hi Rabbit,

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

 <form name="frm1" method="post" onSubmit="javascript:decide_action();" action="">
    <br>
    <input type="radio" name="group1" value="portrait"> Portrait<br>
    <input type="radio" name="group1" value="landscape" checked> Landscape<br>
    <hr>
    <input type="radio" name="group2" value="layout1"> Layout 1<br>
    <input type="radio" name="group2" value="layout2"> Layout 2<br>
    <input type="radio" name="group2" value="layout3" checked> Layout 3<br>
    <input type="radio" name="group2" value="layout4"> Layout 4
    <hr>
    <input type="radio" name="group3" value="pagenos"> Page numbers<br>
    <input type="radio" name="group3" value="nopagenos" checked> No page numbers<br>
    <input type="submit" name="s1" value="Submit" />
    </form>

and the javascript:

 <script language="javascript">
 
function decide_action()
{
if(check_buttons()==true)
{
if(document.frm1.group1[0].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3[0].checked==true)
{
document.frm1.action="one.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3[1].checked==true)
{
document.frm1.action="two.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3[0].checked==true)
{
document.frm1.action="three.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3[1].checked==true)
{
document.frm1.action="four.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[0].checked==true)
{
document.frm1.action="five.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[1].checked==true)
{
document.frm1.action="six.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3[0].checked==true)
{
document.frm1.action="seven.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3[1].checked==true)
{
document.frm1.action="eight.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3[0].checked==true)
{
document.frm1.action="nine.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3[1].checked==true)
{
document.frm1.action="ten.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3[0].checked==true)
{
document.frm1.action="eleven.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3[1].checked==true)
{
document.frm1.action="twelve.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[0].checked==true)
{
document.frm1.action="thirteen.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3[1].checked==true)
{
document.frm1.action="fourteen.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3[0].checked==true)
{
document.frm1.action="fifteen.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3[1].checked==true)
{
document.frm1.action="sixteen.php";
}
}
 
function check_buttons()
{
var ok=false;
for(i=0; i<3; i++)
{
if(document.frm1.ch[i].checked==true)
{
ok=true;
}
}
if(ok==false)
{
alert("Select at least one option.");
}
return ok;
}

Thanks in advance for your help.

[Rabbit]

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.

[Rwthwyn]

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:

<script language="javascript">
 
function decide_action()
{
if(check_buttons()==true)
{
if(document.frm1.group1[0].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3
 
[0].checked==true)
{
document.frm1.action="one.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3
 
[1].checked==true)
{
document.frm1.action="two.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3
 
[0].checked==true)
{
document.frm1.action="three.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3
 
[1].checked==true)
{
document.frm1.action="four.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3
 
[0].checked==true)
{
document.frm1.action="five.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3
 
[1].checked==true)
{
document.frm1.action="six.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3
 
[0].checked==true)
{
document.frm1.action="seven.php";
}
else if(document.frm1.group1[0].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3
 
[1].checked==true)
{
document.frm1.action="eight.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3
 
[0].checked==true)
{
document.frm1.action="nine.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[0].checked==true && document.frm1.group3
 
[1].checked==true)
{
document.frm1.action="ten.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3
 
[0].checked==true)
{
document.frm1.action="eleven.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[1].checked==true && document.frm1.group3
 
[1].checked==true)
{
document.frm1.action="twelve.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3
 
[0].checked==true)
{
document.frm1.action="thirteen.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[2].checked==true && document.frm1.group3
 
[1].checked==true)
{
document.frm1.action="fourteen.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3
 
[0].checked==true)
{
document.frm1.action="fifteen.php";
}
else if(document.frm1.group1[1].checked==true && document.frm1.group2[3].checked==true && document.frm1.group3
 
[1].checked==true)
{
document.frm1.action="sixteen.php";
};
}
 
function check_buttons()
{
var ok=false;
for(i=0; i<3; i++)
{
if(document.frm1.group1[i].checked==true)
{
ok=true;
}
}
if(ok==false)
{
alert("Please choose Portrait or Landscape.");
}
return ok;
}
 
 
function check_buttons()
{
var ok=false;
for(i=0; i<3; i++)
{
if(document.frm1.group2[i].checked==true)
{
ok=true;
}
}
if(ok==false)
{
alert("Please choose a Layout for your PhotoBook.");
}
return ok;
}
 
function check_buttons()
{
var ok=false;
for(i=0; i<3; i++)
{
if(document.frm1.group3[i].checked==true)
{
ok=true;
}
}
if(ok==false)
{
alert("Please choose whether or not you would like page numbers printing.");
}
return ok;
}
</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.

[Rabbit]

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.