CODEWITHSUNDEEP
javascripthtmlforms
jkuhns5
jkuhns5

Reputation: 96

Pass a field calculation in html to another field in the SAME form

So, I can only find how to pass the information to another page not the same page and this has to be done entirely on the client side, no server side work as there will be no internet connection when this is used, hence the mailto for the form data so it can be sent when a connection is available.

Basically I have two tables, one on the left that has a standard set of numbers (fields time1-time8) that the user can change if need be. These values total into the 'designhours' field. That number must be put into the 'designhours' field on the right side for the various calculations needed there. In my former work (not HTML or javascript) if the field name was the same the data was passed, obviously not the case here.

Before I put the table on the left in, this form worked beautifully, but now I need to add the option of totaling a new 'designhours' value. Many thanks to those that have helped me before and many thanks to anyone that helps now. I am still learning, but I am getting there.

Sample code with most fields removed so you can see what I am doing (thanks for pointing out) Full code way below...

So the field names in the left table

time1 - time8 those values are added to put the total in designhours

And the right table

wage, instructors, class, designhours (which is the same as in the left table), cost, many, 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(', ');

and the calculations below:

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

Full Code below

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

Thanks again for any guidance anyone can give. I'm struggling through all of this.

Upvotes: 0

Views: 1372

Answers (2)

GitaarLAB
GitaarLAB

Reputation: 14645

First of all, no idea what these are for: 

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');

Then, you only have the element as var in timex.

So the simplest fix is:
designhours.value = time1val + time2val + time3val + time4val + time5val + time6val + time7val + time8val;

instead of:
designhours.value = time1 + time2 + time3 + time4 + time5 + time8 + time7 + time8;

See where you went wrong? You were adding objects (the input fields) together, not their values (that you already had to begin with).
And note, digits in a input field are not numbers but a string.
You also might want to specify a radix with parseInt like parseInt(val,10);

Finally you could re-factor the code quite a bit, this is indeed a bit much (but good on ya for providing useful error-detection).

See this fiddle: http://jsfiddle.net/4nHvc/1/

UPDATE: upon further inspection there is a lot more wrong: Why are these function local variables set at the end of your function? 

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;

The very next line of javascript after the first one where you used the wrong variable names (thus adding objects instead of their values) can't work then either:
build_cost.value = (wageval * designhoursval);

Well, if you get the value of the inputfield designhoursval at the start of the code, that field is still empty.. So then when the script executes the above line, what is designhoursval ??? right, empty. If for instance you re-read that value using the last block of 'useless' code WITHOUT the var variable declaration (you declared it already at the start of your function) and place it above that line, then another field of your calculator starts to work: 

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

But then.. isn't it easier to first get al the input-values, do the math, then output the values?

See this fiddle, now it almost works: http://jsfiddle.net/4nHvc/2/

Upvotes: 1

iamtodd
iamtodd

Reputation: 11

update your time values...

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

Also, I'm not sure how you wired up your button to your script, so I changed your function...

function doThis() {

and your button...

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

Those may have been fine in your code, but that part was omitted in your post so check it out. (You can just use an "alert('foo');" to check.)

Upvotes: 0

Related Questions