HTML / Javascript表单计算和验证在新页面中

Question

我正在做一个网站项目，真的很需要帮助，因为我是这一切的新手。 我基本上在下拉菜单中为每个选项提供了值，并将它们加到我管理的值中。 但是，然后我希望菜单中的总值成为生成并添加到我输入年龄的伪随机数的范围。

当我点击“提交”时，我希望它可以计算所有结果并将结果显示在新页面上。 我希望能够在javascript和html中完成所有这些操作。

任何帮助将不胜感激！ 我的编码如下。 非常感谢！

        <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>

Answer 1

我玩过你的代码。 我现在不知道您想要的那种东西，但这是随机分数的示例。

现在，它使用年龄来生成值。

如果您喜欢我的Codepen，请看看。

我更改了年龄输入：

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

我还添加了一个新函数来生成介于min-max之间的随机数：

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

并修改了总和的计算方式：

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.

您可以执行很多不同的生成总和。 如果您需要较少的修改，我们还可以使用年龄的最后一位数字来获取生成的最小/最大值。

编辑：为了帮助您在页面之间共享变量，请查看此问题。

Answer 2

将此添加为答案，因为提交者认为这是一个好主意：

将所有数学运算的结果放入隐藏字段中。 然后，当您提交表单时，值将被传递。

您实际上不需要做任何特别的事情。 只需添加如下字段：

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

对于yourValue部分，只需从JavaScript插入您的计算值：

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

由于所有内容都与您提交的表单相同，因此它们都将过去。 您可以照常检索接收页面上的字段。

我下载并编辑了整个代码块。 我改变了几件事。 1.您不需要在表单上的onsubmit。 您需要在“总计”按钮上调用JavaScript函数。 用户完成后，将添加提交按钮以提交表单。 2.一个保存结果的隐藏字段将添加到表单中。 3.您进行计算的功能有一个附加功能，可以将计算出的总数发送到新的隐藏字段。 4.您需要向ACTION添加一些内容，以便它知道在哪里提交表单。 您也可以删除警报。 我只是添加了它，以确保它正常工作。

我已经运行并测试了它，它的工作原理完全符合预期。 修改后的代码如下所示：

 <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>

HTML / Javascript表单计算和验证在新页面中

问题描述

2 个解决方案

解决方案1
1 2014-04-17 05:16:46

解决方案2
0 2014-04-16 13:12:18

HTML / Javascript表单计算和验证在新页面中

问题描述

2 个解决方案

解决方案1 1 2014-04-17 05:16:46

解决方案2 0 2014-04-16 13:12:18

解决方案1
1 2014-04-17 05:16:46

解决方案2
0 2014-04-16 13:12:18