www.webdeveloper.com
Results 1 to 6 of 6

Thread: Adding two field values - Not displaying in readonly field

  1. #1
    Join Date
    Nov 2013
    Posts
    6

    Adding two field values - Not displaying in readonly field

    I would like to multiply two field values together and put the product in a third field that is readonly. I'm adding this code to a Joomla article and have tested a simple function to make sure that it's at least working and all was fine. However, what I'm currently using isn't displaying anything in the readonly field. The function and corresponding html snippet is below. Thanks for any light you can shed.

    Code:
    <script>// <![CDATA[
    function updatesum() {
    document.form.sum.value = (document.form.quantityx.value) * (document.form.unitprice0.value);
    }
    // ]]></script>
    HTML Code:
    <tr>
    <td><input id="quantityx" class="quantitywidth" name="quantityx" type="text" onChange="updatesum()"/></td>
    <td><input id="item0" class="itemwidth" name="item0" type="text" /></td>
    <td><textarea id="description0" cols="30" name="description0" rows="2"></textarea></td>
    <td><input id="unitprice0" class="unitpricewidth" name="unitprice0" type="text" onChange="updatesum()"/></td>
    <td><input id="sum" class="totalpricewidth" name="sum" readonly="readonly" type="text"/></td>
    </tr>

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Your HTML code doesn't have the <form> element, which is your codes starting point.
    If for some reason the form cannot be used or it conflicts, you could use the id's you've already specified:

    Code:
    // <![CDATA[
    function updatesum()
    {
    	document.getElementById('sum').value = document.getElementById('quantityx').value * document.getElementById('unitprice0').value;
    }
    // ]]>

  3. #3
    Join Date
    Nov 2013
    Posts
    6
    Thanks for response. I apologize and should have included more. The html looks like this:

    <form action="MPDF57/tester.php" method="post" target="_blank"><fieldset><legend>Section 1</legend>
    </fieldset><br /><fieldset><legend>Section 2</legend>
    <table id="requisitionitems" border="0">
    <tbody>
    <tr><th class="width">Quanity</th><th class="width">item #</th><th class="width">Description</th><th class="width">Unit Price</th><th class="width">Total Price</th></tr>
    <tr>
    <td><input id="quantityx" class="quantitywidth" name="quantityx" type="text" onChange="updatesum()"/></td>
    <td><input id="item0" class="itemwidth" name="item0" type="text" /></td>
    <td><textarea id="description0" cols="30" name="description0" rows="2"></textarea></td>
    <td><input id="unitprice0" class="unitpricewidth" name="unitprice0" type="text" onChange="updatesum()"/></td>
    <td><input id="sum" class="totalpricewidth" name="sum" readonly="readonly" type="text"/></td>
    </tr>
    </tbody>
    </table>
    </fieldset><br /><fieldset><legend>Section 3</legend>
    <p><label class="field" for="signature">Staff Member Signature: </label> <input id="fax" class="textbox" name="fax" type="text" /></p>
    </fieldset><br /><br />
    <p><input type="submit" value="Generate PDF" /></p>
    </form>

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Seems like all you were missing was the <form>'s name:

    Code:
    <form name="form" action="MPDF57/tester.php" method="post" target="_blank">
    	<fieldset>
    		<legend>Section 1</legend>
    	</fieldset><br />
    	<fieldset>
    		<legend>Section 2</legend>
    		<table id="requisitionitems" border="0">
    			<tbody>
    				<tr>
    					<th class="width">Quanity</th>
    					<th class="width">item #</th>
    					<th class="width">Description</th>
    					<th class="width">Unit Price</th>
    					<th class="width">Total Price</th>
    				</tr>
    				<tr>
    					<td><input id="quantityx" class="quantitywidth" name="quantityx" type="text" onchange="updatesum()"/></td>
    					<td><input id="item0" class="itemwidth" name="item0" type="text" /></td>
    					<td><textarea id="description0" cols="30" name="description0" rows="2"></textarea></td>
    					<td><input id="unitprice0" class="unitpricewidth" name="unitprice0" type="text" onchange="updatesum()"/></td>
    					<td><input id="sum" class="totalpricewidth" name="sum" readonly="readonly" type="text"/></td>
    				</tr>
    			</tbody>
    		</table>
    	</fieldset><br />
    	<fieldset>
    		<legend>Section 3</legend>
    		<p><label class="field" for="signature">Staff Member Signature: </label> <input id="fax" class="textbox" name="fax" type="text" /></p>
    	</fieldset><br /><br />
    	<p><input type="submit" value="Generate PDF" /></p>
    </form>

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,407
    Could also be document.forms[0].quantityx.value
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    Nov 2013
    Posts
    6
    Dang, ok. Obviously don't know much about javascript and didn't realize that form in document.form.sum.value was referring to the form name. Hopefully I'm correct in saying that. Either way, thanks for the help. All working now.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles