SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Feb 2011
    Location
    USA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Plebeian View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Plebeian View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Last edited by Mittineague; Mar 18, 2011 at 14:32. Reason: per OP request

  10. #10
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump! Can someone please help me?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •