Html/Javascript form calculation and validation in new page

Question

I'm working on a website project and really need help as I'm new to all this. I'm basically given values to every option in the drop down menu's and make them add together which I've managed. But then I want to the total value from the menus to then be the range for a pseudo random to be a generated and added to the age I input.

When I hit submit I'd like it to calculate all that and display the result on a new page. I want to be able to do all this within javascript and html.

Any help would be greatly appreciated! My coding is below. Thanks so much!

        <body>
        <form id="form1" action="" method="post" onsubmit="return calcTotal(this)">
        <select name=select1>
            <option selected="selected" value="0">Chinese Zodiac</option>
        <option value="3">Rat</option>
        <option value="3">Ox</option>
        <option value="4">Tiger</option>
        <option value="2">Rabbit</option>
        <option value="4">Dragon</option>
        <option value="5">Snake</option>
        <option value="3">Horse</option>
        <option value="3">Sheep</option>
        <option value="4">Monkey</option>
        <option value="5">Rooster</option>
        <option value="3">Dog</option>
        <option value="3">Pig</option>
        </select>
        </select>
        <br />
        <select name=select2>
            <option selected="selected" value="0">Star Sign</option>
        <option value="2">Aries</option>
        <option value="4">Taurus</option>
        <option value="3">Gemini</option>
        <option value="4">Cancer</option>
        <option value="3">Leo</option>
        <option value="2">Virgo</option>
        <option value="2">Libra</option>
        <option value="3">Scorpio</option>
        <option value="2">Sagittarius</option>
        <option value="4">Capricorn</option>
        <option value="2">Aquarius</option>
        <option value="3">Pisces</option>
        </select>
        <br />

        <select name=select3>
            <option selected="selected" value="0">Blood Type</option>
        <option value="3">O</option>
        <option value="2">A</option>
        <option value="1">B</option>
        <option value="3">AB</option>
        </select>
        <br />

        <select name=select4>
            <option selected="selected" value="0">Favourite Colour</option>
        <option value="3">Black</option>
        <option value="3">Blue</option>
        <option value="2">Brown</option>
        <option value="2">Green</option>
        <option value="3">Orange</option>
        <option value="3">Pink</option>
        <option value="2">Purple</option>
        <option value="4">Red</option>
        <option value="2">Yellow</option>
        <option value="2">White</option>
        <option value="5">Other</option>
        </select>
        <br />

        Age<input name="" type="number" value="" /> 

        <br />

        <input name="" type="submit" value="Total" />
        <span>Total: </span><span id="result"></span>
    </form>


<script type="text/javascript">
function calcTotal(oForm){
    var sum = 0;
    for(i=0; i < oSels.length; i++){
        sum += new Number(oSels[i].value);
    }
    document.getElementById('result').innerHTML = sum;
    return false;
}
window.onload=function(){
    oSels = document.getElementById('form1').getElementsByTagName('select');
    for(i=0; i < oSels.length; i++){
        oSels[i].onchange=function(){
            document.getElementById('result').innerHTML = '';
        }


    }
}
</script>

Put the result from all your maths into hidden fields. Then when you submit the form, the values will be passed along. — durbnpoisn, Apr 15 '14 at 14:17
@durbnpoisn Thanks very much for your reply! I'll try and figure out how to do that, but is there something I need to add to the onsubmit part of the code? I also don't know how to do the pseudorandom code. — user3451786, Apr 16 '14 at 02:28
What is this new page and how are you getting to it? On the form submit? — Jon P, Apr 24 '14 at 06:12
I would question your need for seperate pages, particulary as you only want to use javascript and no server-side solution. Noramlly when POSTING a form, the values are used by some server side process which will then RESPOND with a page. Without the use of a server side process the form variables will be lost in the subsequent pages. You could do all this on one page. Have a hidden `div` or `divs` that are displayed using javascript depending on the result. You could also hide the form using javascript. You could also use cookies to persist data. — Jon P, Apr 24 '14 at 06:40
If you haven't done so already, read this articles on how forms work: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data — Jon P, Apr 24 '14 at 06:44

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

I played with your code. I don't now if it's someting like that that you wanted but here is an example of random score.

It now use the age to generate a value.

Take a look if you like it at my codepen.

I changed the age input:

Age<input id="age" name="" type="number" value="" />

I also added a new function to generate random number between min-max:

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

And modified how the sum is calculated:

var age = document.getElementById('age').value;
sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 4),sum+(age / 4)));
//Add some random. The more you are older, the more random it is.

You can do a lot of different generated sum. If you want less modifications, we also can take the last digit of the age to get the min/max value generated...

Edit: To help you share variables between pages, Look at this question.

edited May 23 '17 at 12:20

Community

1
1

answered Apr 17 '14 at 05:16

SteamFire

367
2
14

Hi SteamFire, Thanks so much for your help! I'm still trying to figure out how your code works! :) I would like to reduce the range for the random number if the person enters an age over 35. I would also like to have the total feed through and display on a new result page and have 2 diff results page depending on the outcome. If the random number is 9 or more I'd like the result to go to one page, unless the age entered is under 30, then go to another page. Is that possible? Thanks again for your help!!! :) – user3451786 Apr 21 '14 at 02:39
I gave you some function to help you, now try to modify them to your needs. I edited the response. Look at this link. – SteamFire Apr 24 '14 at 05:53

durbnpoisn · Answer 2 · 2014-04-28T14:23:15.210

Adding this as an answer as the submitter considers it a good idea:

Put the result from all your maths into hidden fields. Then when you submit the form, the values will be passed along.

You don't need to do anything special really. Just add fields like this:

<input type="hidden" value="[yourValue]" name="fieldName" id="fieldId" />

For the yourValue part, simply insert your caclulated value from the JavaScript:

document.getElementById("fieldId").value = calculatedValue;

Since it's all part of the same form that you're submitting anyway, they will all be past along. You can retrieve the fields on the receiving page as normal.

I downloaded and edited your entire code block. I changed a couple of things. 1. You don't need the onsubmit on your form. You need a call the JavaScript function on a Total button. The submit button is added to submit the form when the user is done. 2. A hidden field to hold your result is added to the form. 3. The function where you do your calculation has an addition to send the calulated total to the new hidden field. 4. You need to add something to the ACTION, so it knows where to submit the form. You can also remove the ALERT. I just added that to be sure it worked right.

I've run and tested this, and it works exactly as expected. This is what the edited code looks like:

 <body>
        <form id="form1" action="" method="post">
        <select name=select1>
            <option selected="selected" value="0">Chinese Zodiac</option>
        <option value="3">Rat</option>
        <option value="3">Ox</option>
        <option value="4">Tiger</option>
        <option value="2">Rabbit</option>
        <option value="4">Dragon</option>
        <option value="5">Snake</option>
        <option value="3">Horse</option>
        <option value="3">Sheep</option>
        <option value="4">Monkey</option>
        <option value="5">Rooster</option>
        <option value="3">Dog</option>
        <option value="3">Pig</option>
        </select>
        </select>
        <br />
        <select name=select2>
            <option selected="selected" value="0">Star Sign</option>
        <option value="2">Aries</option>
        <option value="4">Taurus</option>
        <option value="3">Gemini</option>
        <option value="4">Cancer</option>
        <option value="3">Leo</option>
        <option value="2">Virgo</option>
        <option value="2">Libra</option>
        <option value="3">Scorpio</option>
        <option value="2">Sagittarius</option>
        <option value="4">Capricorn</option>
        <option value="2">Aquarius</option>
        <option value="3">Pisces</option>
        </select>
        <br />

        <select name=select3>
            <option selected="selected" value="0">Blood Type</option>
        <option value="3">O</option>
        <option value="2">A</option>
        <option value="1">B</option>
        <option value="3">AB</option>
        </select>
        <br />

        <select name=select4>
            <option selected="selected" value="0">Favourite Colour</option>
        <option value="3">Black</option>
        <option value="3">Blue</option>
        <option value="2">Brown</option>
        <option value="2">Green</option>
        <option value="3">Orange</option>
        <option value="3">Pink</option>
        <option value="2">Purple</option>
        <option value="4">Red</option>
        <option value="2">Yellow</option>
        <option value="2">White</option>
        <option value="5">Other</option>
        </select>
        <br />

        Age<input name="" type="number" value="" /> 

        <br />

        <input name="" type="button" value="Total" onclick="calcTotal();" />
        <input name="submit" type="submit" value="Submit" />
        <span>Total: </span><span id="result"></span>

        <input type="hidden" value="0" name="resultIs" id="resultIs" />
    </form>


<script type="text/javascript">
    function calcTotal(oForm) {
        var sum = 0;
        for (i = 0; i < oSels.length; i++) {
            sum += new Number(oSels[i].value);
        }
        //This is what you are using to display the result to your user.
        document.getElementById('result').innerHTML = sum;

        //This will add the value of the result to a hidden field I added to the form.  When you submit it, just request the value of "resultIs"
        document.getElementById("resultIs").value = sum;
        alert(sum);
        return false;
    }
    //I really don't even see that this is needed.  Your form doesn't need to be cleared onLoad.
    window.onload = function() {
        oSels = document.getElementById('form1').getElementsByTagName('select');
        for (i = 0; i < oSels.length; i++) {
            oSels[i].onchange = function() {
                document.getElementById('result').innerHTML = '';
            }


        }
    }
</script>

hi durbnpoisn, thanks for your help! I've tried to implement this but I don't seem to be able to get it working. The input type hasn't worked for me. Is it possible you could edit my code so I can see it working? Thanks so much! :) — user3451786, Apr 22 '14 at 09:40
I really don't see that I could have shown this any better. Although, I will admit that I had a typo in the code I provided. I had two "name" tags, where one was supposed to be an ID. I fixed that. Try it now. — durbnpoisn, Apr 22 '14 at 14:02
Hi durbnpoisn, thanks again. I don't actually know where in the form to add the input type as hidden. When I've tried it throws all the options out of select menu and they're just then text on the page, which is why it's confusing me. — user3451786, Apr 23 '14 at 01:34
Just add it to the bottom of the form. Since they are invisible they won't mess with your layout — durbnpoisn, Apr 23 '14 at 03:02
Hi, Thanks but I've tried that and it hasn't worked and I can't see how from adding that, how it would queue it to another page. Thanks for your help, though! — user3451786, Apr 23 '14 at 07:08
I think your problem is that you are dumping your results into an InnerHTML. That's not going to help. That's only useful for showing it to the user. You need to get your results into fields in the form itself. Then they will submit to the next page. That's what I'm trying to illustrate. — durbnpoisn, Apr 23 '14 at 13:10
I've edited my original answer with a re-write to your entire block of code. I've tested this, and it works as expected. — durbnpoisn, Apr 28 '14 at 14:23
Hi, thanks so much! I really appreciate it! I added a link action="/result.html" in the action so it would load through to the new page to display the result but it can't find it. I'm not sure what I'm missing! I'm sorry if this is frustrating! — user3451786, Apr 28 '14 at 14:58
The unfortunate thing is that the SERVER recieves posts, not the client, so JavaScript won't recieve the vlaues. There is a whole thread about that here: http://stackoverflow.com/questions/1409013/how-to-read-the-post-request-parameters-using-javascript You must have access to some server-side code (php, or asp), that can grab the values of your form. Do you know which your server supports? Once you find that out, the field with your result is called "resultIs". Just do a request for that. — durbnpoisn, Apr 28 '14 at 15:17
Thanks so much! I was hoping to use it for phonegap so didn't want to have to use a server. — user3451786, Apr 29 '14 at 02:58
Well you can with just JavaScript. It's just a bit more sloppy. — durbnpoisn, Apr 29 '14 at 10:17

Html/Javascript form calculation and validation in new page

2 Answers2