# Thread: Submit button action based on different conditions

1. ## Submit button action based on different conditions

Hi everyone,

I want my submit button to link to different pages, based on the value of a particular variable (let's call it total).

So, if 18 < total < 20, the submit button should redirect to page1.html
If 16 < total < 18, the submit button should redirect to page2.html
If 14 < total < 16, the submit button should redirect to page3.html
.
.
.

I have created page1.html, page2.html....page10.html. Can someone please tell me how should I link my submit button (I have only *one* submit button) to different pages based on different conditions? I would appreciate any kind of help. Thanks a lot for reading this!

2. Which page do you go to when total equals 18?

Page 1 is when 18 < total
Page 2 is when total < 18

I'll make a choice and decide that it's 18 < total <= 20
If it's 18 <= total < 20 then only a slight change needs to be made.

You can map the totals on to the page numbers.

First reverse them, so 20 minus total gives you 0 ... 2 ... 4 ... 6
Then divide by two and add one, giving you 1 ... 2 ... 3 ... 4
Finally, round down so you only have integer numbers to deal with.

Code:
`var pageNumber = Math.floor((20 - total) / 2 + 1);`
In goes a total of 19, out comes a page number of 1

Now for the form submission. You should have an identifier on the form, such as:

Code html4strict:
```<form id="calculateTotal">
...
<input name="total">
</form>```

You can then take over the submit event using scripting with:

Code javascript:
```var form = document.getElementById('calculateTotal');
form.onsubmit = function () {
...
};```

What you want to do in there is to get the total, and update the form's action so that submits to the page you desire.

Code javascript:
```var form = document.getElementById('calculateTotal');
form.onsubmit = function () {
var total = Number(form.elements.total.value);
var pageNumber = Math.floor((20 - total) / 2 + 1);
form.action = 'page' + pageNumber + '.html';
};```

Those are the main techniques that you could use.

3. Thanks a lot for your detailed reply, Paul. I really appreciate it.

However, when I executed the onsubmit function, it gave me a box to enter text and then hit submit. For my problem, there is only a submit button and the different webpages should be generated by only hitting the submit button. There are 10 drop down lists each having on an average 5-6 data fields. So, depending on the combinational changes the drop down list undergoes, I want my submit button to generate a different result. (I have tackled the combinational changes by incorporating the condition on the 'total' variable). I would be really grateful if you or someone could give me a heads up regarding this. Thanks a lot!

4. Can I also use, a javascript variable in an HTML code? (Sorry for all the puerile questions, I am just a beginner). I am trying to do something on the following lines:

<if (total == 1)>
<form name="input" action="page 1.html">

<else>
<if (total == 2)>
<form name="input" action="page 2.html">

<else>
<if (total == 3)>
<form name="input" action="page 3.html">

<input type="submit" value="Calculate" />
</form>

Thanks a lot for reading this. It would be great if someone could help me out!

5. im not sure exactly what lang your using but, if you wanted to do it a simple php route try this...

<?php if(\$total == 1) { ?>
<form name="input" action="page1.html">
<?} elseif(\$total == 2) {?>
<form name="input" action="page2.html">
<?} elseif(\$total == 3) {?>
<form name="input" action="page3.html">
<?php }?>

<input type="submit" value="Calculate" />
</form>

6. Originally Posted by Plebeian
Can I also use, a javascript variable in an HTML code?
Do you have a test page that you can use to show us what you currently have?

7. OSCustomize,

Thanks for replying. I am coding in HTML and JavaScript.

Paul,

Thanks a lot for your reply. I don't have a test page yet. But, as you advised, I used the math.floor function, so now the value of the 'total' variable corresponds to the webpage I want my submit button to redirect. But, since 'total' is a JavaScript variable and I wanted an If else condition in HTML with respect to the submit button, I was just wondering whether I could use the JavaScript variable (total) in the HTML code? Thanks a lot for the help!

8. Originally Posted by Plebeian
I was just wondering whether I could use the JavaScript variable (total) in the HTML code? Thanks a lot for the help!
No you can not use the JavaScript variable in the HTML code.

What you can do is to use JavaScript to override an HTML event, so that scripting can use that total variable to either change part of page, or change how the page behaves.

9. Thanks a lot for replying. I basically need to use the following two pieces of code to achieve the requisite action:

<script type="text/javascript">
var total = a_1 + a_2 + a_3 + a_4 + a_5 + a_6 + a_7 + a_8 + a_9 + a_10;
var pageNumber = Math.floor((20 - total) / 2 + 1);
</script>

<if (pageNumber == 1)>
<form name="input" action="page 1.html">
<else>
<if (pageNumber == 2)>
<form name="input" action="page 2.html">
.
.
.
<input type="submit" value="Calculate Commodity price" />
</form>

I am facing problem relating the JavaScript code with the HTML code! [Because, I do not know how to manipulate the submit button in JavaScript as I know in HTML, but I have the total/pagenumber variable in JavaScript]. Any kind of help would be great! Thanks a lot!