将html中的字段计算传递给SAME表单中的另一个字段

Question

所以，我只能找到如何将信息传递到另一个页面而不是同一页面，这必须完全在客户端完成，没有服务器端工作，因为在使用它时将没有互联网连接，因此表格数据的mailto，以便在连接可用时发送。

基本上我有两个表，一个在左边，有一组标准数字（字段time1-time8），如果需要，用户可以更改。这些值总计到'designhours'字段中。必须将该数字放入右侧的“设计时间”字段中，以进行所需的各种计算。在我以前的工作（不是HTML或javascript）中，如果字段名称相同，则传递数据，显然不是这里的情况。

在我把桌子放在左边之前，这个表格很漂亮，但现在我需要添加一个总计新的'designhours'值的选项。非常感谢那些曾经帮助过我的人，非常感谢现在有所帮助的人。我还在学习，但我到了那里。

示例代码，删除了大多数字段，以便您可以看到我在做什么（感谢您指出）以下完整代码方式...

左表中的字段名称

time1 - time8 添加这些值以将总数放在 designhours

中

右表

工资，教师，班级，设计时（与左表中的相同），成本，很多，atetextfield7，build_cost，buy_cost，build_hours，buy_hours，build_train，buy_train，build_total，buy_total

<script type="text/javascript">
var btn = document.getElementById('calculate');
btn.onclick = function() {
var wageval = parseInt(document.getElementById('wage').value) || 0;
var instructorsval = parseInt(document.getElementById('instructors').value) || 0;

var build_cost = document.getElementById('build_cost');
var buy_cost = document.getElementById('buy_cost');

var msg = [];

if (isNaN(wageval)) {
    msg.push('Average instructor hourly wage is not a number');
    // the value isn't a number
    }
if (isNaN(instructorsval)) {
    msg.push('Number of instructors per course is not a number');
    // the value isn't a number
        }

if (msg.length > 0)   {
    build_cost.value = msg.join(', ');
    buy_cost.value = msg.join(', ');

以及下面的计算：

} else {
    designhours.value = (time1 + time2 + time3 + time4 + time5 + time6 + time7 + time8);
    build_cost.value = (wageval * designhoursval);
    buy_cost.value = (costval * hiddenval);
    build_hours.value = (designhoursval * manyval);
    build_train.value = (classval * hiddenval);
    build_total.value = (wageval * designhoursval * manyval + classval);
    buy_total.value = (costval * manyval);
    var build_costval = parseInt(build_cost.value) || 0;
    var buy_costval = parseInt(buy_cost.value) || 0;
    var build_hoursval = parseInt(build_hours.value) || 0;
    var build_trainval = parseInt(build_train.value) || 0;
    var build_totalval = parseInt(build_total.value) || 0;
    var buy_totalval = parseInt(buy_total.value) || 0;
    var designhoursval = parseInt(designhours.value) || 0;
}   

以下完整代码

HTML

<form id="form1" name="form1" method="post" action="mailto:?subject=Laerdal%20ROI%20Information" enctype="text/plain">
    <table width="859" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign="bottom">
                <table width="352" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="22" colspan="2">&nbsp;</td>
                    </tr>
                    <tr>
                        <td width="225" height="22">&nbsp;</td>
                        <td width="127" height="22" align="left">&nbsp;</td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Needs Analysis</span></td>
                        <td height="22" align="center"><input name="time1" type="text" class="field" id="time1" value="1" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Research</span></td>
                        <td height="22" align="center"><input name="time2" type="text" class="field" id="time2" value="2" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Design</span></td>
                        <td height="22" align="center"><input name="time3" type="text" class="field" id="time3" value="2" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Scenario Programming</span></td>
                        <td height="22" align="center"><input name="time4" type="text" class="field" id="time4" value="3" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Support Materials</span></td>
                        <td height="22" align="center"><input name="time5" type="text" class="field" id="time5" value="16" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Validation</span></td>
                        <td height="22" align="center"><input name="time6" type="text" class="field" id="time6" value="2" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Revision</span></td>
                        <td height="22" align="center"><input name="time7" type="text" class="field" id="time7" value="4" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Implementation</span></td>
                        <td height="22" align="center"><input name="time8" type="text" class="field" id="time8" value="2" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Total</span></td>
                        <td height="22" align="center"><input name="designhours" class="field" type="text" id="designhours" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="73" colspan="2">&nbsp;</td>
                    </tr>
                </table>
                <p>&nbsp;</p></td>
            <td width="55" valign="bottom">&nbsp;</td>
            <td>
                <table width="440" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Average Instructor hourly wage:</td>
                        <td height="36" align="right"><input name="wage" class="field" type="text" id="wage" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Number of Instructors per course:</td>
                        <td height="36" align="right"><input name="instructors" class="field" type="text" id="instructors" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Scenario Programing Class:</td>
                        <td height="36" align="right"><input name="class" class="field" type="text" id="class" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Instruction design hours per scenarios:</td>
                        <td height="36" align="right"><input name="designhours" class="field" type="text" readonly="true" id="designhours" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Average cost of SimStore Scenarios:</td>
                        <td height="36" align="right"><input name="cost" class="field" type="text" id="cost" value="295" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">How many scenarios do you need:</td>
                        <td height="36" align="right"><input name="many" class="field" type="text" id="many" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Date needed?:</td>
                        <td height="36" align="right"><input name="atetextfield7" class="field" type="text" id="atetextfield7" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="40" colspan="3" align="center" class="calc">CALCULATED RESULTS</td>
                    </tr>
                    <tr>
                        <td height="40"><input name="hidden" type="hidden" id="hidden" value="1" /></td>
                        <td height="40" align="center" class="bold">BUILD</td>
                        <td height="40" align="center" class="bold">BUY</td>
                    </tr>
                    <tr>
                        <td height="38" align="right" class="norm">Cost per scenario:<img src="images/Blank.png" alt="" width="12" height="5" /></td>
                        <td height="38" align="center"><input name="build_cost" class="field" type="text" id="build_cost" size="12" /></td>
                        <td height="38" align="center"><input name="buy_cost" class="field" type="text" id="buy_cost" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="38" align="right" class="norm">Total development hours:<img src="images/Blank.png" alt="" width="12" height="5" /></td>
                        <td height="38" align="center"><input name="build_hours" class="field" type="text" id="build_hours" size="12" /></td>
                        <td height="38" align="center"><input name="buy_hours" class="field" type="text" id="buy_hours" value="0" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="38" align="right" class="norm">
                            Scenario Programming<img src="images/Blank.png" alt="" width="12" height="5" /><br />
                            Training (8h):<img src="Blank.png" alt="" width="12" height="5" />
                        </td>
                        <td height="38" align="center"><input name="build_train" class="field" type="text" id="build_train" size="12" /></td>
                        <td height="38" align="center"><input name="buy_train" class="field" type="text" id="buy_train" value="0" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="38" align="right" class="norm">Total Cost:<img src="images/Blank.png" alt="" width="12" height="5" /></td>
                        <td height="38" align="center"><input name="build_total" class="field" type="text" id="build_total" size="12" /></td>
                        <td height="38" align="center"><input name="buy_total" class="field" type="text" id="buy_total" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="50" colspan="3" align="center" valign="bottom"><input type="reset" />
                            <img src="images/Blank.png" alt="" width="15" height="25" />
                            <input name="calculate" type="button" id="calculate" value="Calculate" />
                            <img src="images/Blank.png" alt="" width="15" height="25" />
                            <input name="share" type="submit" id="submit" value="Share" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>

的Javascript

var btn = document.getElementById('calculate');
btn.onclick = function () {
    //get the input values
    var wageval = parseInt(document.getElementById('wage').value) || 0;
    var instructorsval = parseInt(document.getElementById('instructors').value) || 0;
    var classval = parseInt(document.getElementById('class').value) || 0;
    var designhoursval = parseInt(document.getElementById('designhours').value) || 0;
    var costval = parseInt(document.getElementById('cost').value) || 0;
    var manyval = parseInt(document.getElementById('many').value) || 0;
    var hiddenval = parseInt(document.getElementById('hidden').value) || 0;
    var time1val = parseInt(document.getElementById('time1').value) || 0;
    var time2val = parseInt(document.getElementById('time2').value) || 0;
    var time3val = parseInt(document.getElementById('time3').value) || 0;
    var time4val = parseInt(document.getElementById('time4').value) || 0;
    var time5val = parseInt(document.getElementById('time5').value) || 0;
    var time6val = parseInt(document.getElementById('time6').value) || 0;
    var time7val = parseInt(document.getElementById('time7').value) || 0;
    var time8val = parseInt(document.getElementById('time8').value) || 0;
    // get the elements to hold the results
    var build_cost = document.getElementById('build_cost');
    var buy_cost = document.getElementById('buy_cost');
    var build_hours = document.getElementById('build_hours');
    var buy_hours = document.getElementById('buy_hours');
    var build_total = document.getElementById('build_total');
    var build_train = document.getElementById('build_train');
    var buy_total = document.getElementById('buy_total');
    var time1 = document.getElementById('time1');
    var time2 = document.getElementById('time1');
    var time3 = document.getElementById('time1');
    var time4 = document.getElementById('time1');
    var time5 = document.getElementById('time1');
    var time6 = document.getElementById('time1');
    var time7 = document.getElementById('time1');
    var time8 = document.getElementById('time1');
    var designhours = document.getElementById('designhours');
    // create an empty array to hold error messages
    var msg = [];
    // check each input value, and add an error message to the array if it's not a number
    if (isNaN(wageval)) {
        msg.push('Average instructor hourly wage is not a number');
        // the value isn't a number
    }
    if (isNaN(instructorsval)) {
        msg.push('Number of instructors per course is not a number');
        // the value isn't a number
    }
    if (isNaN(classval)) {
        msg.push('Scenario programming class is not a number');
        // the value isn't a number
    }
    if (isNaN(designhoursval)) {
        msg.push('Instruction design hours per scenario is not a number');
        // the value isn't a number
    }
    if (isNaN(costval)) {
        msg.push('Average cost of SimStore scenarios is not a number');
        // the value isn't a number
    }
    if (isNaN(manyval)) {
        msg.push('How many scenarios do you need is not a number');
        // the value isn't a number
    }
    if (isNaN(hiddenval)) {
        msg.push('joe messed up');
        // the value isn't a number
    }
    if (isNaN(time1val)) {
        msg.push('Needs Analysis is not a number');
        // the value isn't a number
    }
    if (isNaN(time2val)) {
        msg.push('Research is not a number');
        // the value isn't a number
    }
    if (isNaN(time3val)) {
        msg.push('Design is not a number');
        // the value isn't a number
    }
    if (isNaN(time4val)) {
        msg.push('Scenario Programming is not a number');
        // the value isn't a number
    }
    if (isNaN(time5val)) {
        msg.push('Support Materials is not a number');
        // the value isn't a number
    }
    if (isNaN(time6val)) {
        msg.push('Validation is not a number');
        // the value isn't a number
    }
    if (isNaN(time7val)) {
        msg.push('Revision is not a number');
        // the value isn't a number
    }
    if (isNaN(time8val)) {
        msg.push('Implementation is not a number');
        // the value isn't a number
    }
    // if the array contains any values, display an error message

    if (msg.length > 0)  {
        build_cost.value = msg.join(', ');
        buy_cost.value = msg.join(', ');
        build_hours.value = msg.join(', ');
        build_train.value = msg.join(', ');
        build_total.value = msg.join(', ');
        buy_total.value = msg.join(', ');
        time1.value = msg.join(', ');
        time2.value = msg.join(', ');
        time3.value = msg.join(', ');
        time4.value = msg.join(', ');
        time5.value = msg.join(', ');
        time6.value = msg.join(', ');
        time7.value = msg.join(', ');
        time8.value = msg.join(', ');
    } else {
        designhours.value = (time1 + time2 + time3 + time4 + time5 + time6 + time7 + time8);
        build_cost.value = (wageval * designhoursval);
        buy_cost.value = (costval * hiddenval);
        build_hours.value = (designhoursval * manyval);
        build_train.value = (classval * hiddenval);
        build_total.value = (wageval * designhoursval * manyval + classval);
        buy_total.value = (costval * manyval);
        var build_costval = parseInt(build_cost.value) || 0;
        var buy_costval = parseInt(buy_cost.value) || 0;
        var build_hoursval = parseInt(build_hours.value) || 0;
        var build_trainval = parseInt(build_train.value) || 0;
        var build_totalval = parseInt(build_total.value) || 0;
        var buy_totalval = parseInt(buy_total.value) || 0;
        var designhoursval = parseInt(designhours.value) || 0;
    }
};

再次感谢任何人给予的任何指导。我正在努力解决所有这些问题。

Answer 1

首先，不知道这些是什么：

var time1 = document.getElementById('time1');
var time2 = document.getElementById('time1');
var time3 = document.getElementById('time1');
var time4 = document.getElementById('time1');
var time5 = document.getElementById('time1');
var time6 = document.getElementById('time1');
var time7 = document.getElementById('time1');
var time8 = document.getElementById('time1');

然后，你只有时间x中的var元素。

所以最简单的解决方法是：
designhours.value = time1val + time2val + time3val + time4val + time5val + time6val + time7val + time8val;

而不是：
designhours.value = time1 + time2 + time3 + time4 + time5 + time8 + time7 + time8;

看看你哪里出错了？您正在将对象（输入字段）添加到一起，而不是它们的值（您必须先开始使用） 请注意，输入字段中的数字不是数字而是字符串 您还可能希望使用类似parseInt(val,10);

的parseInt指定基数

最后，您可以对代码进行相当多的重新考虑，这确实有点多（但是对于提供有用的错误检测而言是好的）。

看到这个小提琴：http://jsfiddle.net/4nHvc/1/

更新：进一步检查后出现了更多错误： 为什么在函数末尾设置这些函数局部变量？

var build_costval = parseInt(build_cost.value) || 0;
var buy_costval = parseInt(buy_cost.value) || 0;
var build_hoursval = parseInt(build_hours.value) || 0;
var build_trainval = parseInt(build_train.value) || 0;
var build_totalval = parseInt(build_total.value) || 0;
var buy_totalval = parseInt(buy_total.value) || 0;
var designhoursval = parseInt(designhours.value) || 0;

在你使用了错误的变量名称（因此添加对象而不是它们的值）的第一行之后的下一行javascript无法正常工作：
build_cost.value = (wageval * designhoursval);

好吧，如果你在代码的开头得到inputfield designhoursval的值，那个字段仍然是空的。那么当脚本执行上面的那行时，designhoursval是什么？对，空例如，如果您使用“无用”代码的最后一个块重新读取该值而没有var变量声明（您已在函数的开头声明它）并将其放在该行的上方，那么另一个字段你的计算器开始工作：

designhoursval = parseInt(designhours.value) || 0;
build_cost.value = (wageval * designhoursval);

但是那么..首先得到输入值，做数学，然后输出值是不是更容易？

看到这个小提琴，现在几乎可以运作：http://jsfiddle.net/4nHvc/2/

Answer 2

更新您的时间价值......

var time1 = parseInt(document.getElementById('time1').value);
var time2 = parseInt(document.getElementById('time1').value);
var time3 = parseInt(document.getElementById('time1').value);
var time4 = parseInt(document.getElementById('time1').value);
var time5 = parseInt(document.getElementById('time1').value);
var time6 = parseInt(document.getElementById('time1').value);
var time7 = parseInt(document.getElementById('time1').value);
var time8 = parseInt(document.getElementById('time1').value);

另外，我不确定你是如何将按钮连接到脚本的，所以我改变了你的功能...

function doThis() {

和你的按钮......

<input name="calculate" type="button" id="calculate" value="Calculate" onclick="doThis()" />

您的代码可能没有问题，但是您的帖子中省略了该部分，请查看它。 （您可以使用＆＃34;提醒（＆＃39; foo＆＃39;）;＆＃34;进行检查。）