populate input field using javascript problem

Question

Thanks for the responses.. i put a live version of the code.. to see if that helps resolve this. It is here:

http://www.zacharydesigns.com/sandbox/calculatorJS.html

I updated the following code to reflect what was offered as an answer.. however this just returns zero

I am having trouble wrapping my head around creating a simple equation in javaScript. What I am trying to achieve is to have a=(x/z)*y.

x = user input
z = total of all input
y = defined number (in this case 300)

What I came up with is

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
function update()
{
    var a = $("#productOne").val(); // '#' identify IDs as in CSS
    var b = $("#productTwo").val();
    var c = $("#productThree").val();
    var productTotal = Math.floor(a/(a+b+c));
    $("#productTotal").val(productTotal); // Set calculated value in the HTML
}

</script>

<form name="calc" action="#">
    <table align="center" border="1">
        <tr>
                <td align="right">
                        Product One:
                </td>
                <td align="left">
                        <input type="text" name="productOne" id="productOne" size="5" /></td>
                <td align="right">
                        Product Two:
                </td>
                <td align="left">
                        <input type="text" name="productTwo" id="productTwo" size="5" /></td>
                <td align="right">
                        Product Three:
                </td>
                <td align="left">
                        <input type="text" name="productThree" id="productThree" size="5" /></td>
        </tr>
        <tr>
                <td colspan="2" align="center">
                        <input type="button" value="Calculate" onclick="update();return false;" />
                </td>
        </tr>
        <td align="right">
                Product Total:</td>
        <td align="left">
                <input type="text" name="productTotal" id="productTotal" size="6" readonly="readonly" /></td>
        </tr></table>
</form>

which I am not sure is even close. Can someone help guide me through this, please?

Answer 1

Using JQuery a working code would be:

<script type="text/javascript">

function update() {

var a = parseInt($("#productOne")val()); // '#' identify IDs as in CSS
var b = parseInt($("#productTwo").val());
var c = parseInt($("#productThree").val());
var productTotal = Math.floor(a/(a+b+c)*300);


$("#productTotal").attr("value",productTotal); // Set calculated value in the HTML

} 
</script> 

<form name="calc" action="#">

<table align="center"
border="1"><tr><td align="right">Product One: </td>
<td align="left"><input type="text" name="productOne" id="productOne" size="5" />
</td>
<td align="right">Product Two: </td>
<td align="left"><input type="text" name="productTwo" id="productTwo" size="5" />
</td>
<td align="right">Product Three: </td>
<td align="left"><input type="text" name="productThree" id="productThree" size="5" />
</td>
</tr><tr><td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update();return false;" /> </td></tr>

<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal" id="productTotal" size="6"
readonly="readonly" /></td></tr>
</table></form>

Hopefully I haven't missed anything.

Answer 2

Use .val() instead.

<script type="text/javascript">
function update()
{
    var a = parseInt($("#productOne").val()); // '#' identify IDs as in CSS
    var b = parseInt($("#productTwo").val());
    var c = parseInt($("#productThree").val());
    var productTotal = Math.floor(a/(a+b+c)*300);
    $("#productTotal").val(productTotal); // Set calculated value in the HTML
}

</script>

<form name="calc" action="#">
    <table align="center" border="1">
     <tr>
      <td align="right">
       Product One:
      </td>
      <td align="left">
       <input type="text" name="productOne" id="productOne" size="5" /></td>
      <td align="right">
       Product Two:
      </td>
      <td align="left">
       <input type="text" name="productTwo" id="productTwo" size="5" /></td>
      <td align="right">
       Product Three:
      </td>
      <td align="left">
       <input type="text" name="productThree" id="productThree" size="5" /></td>
     </tr>
     <tr>
      <td colspan="2" align="center">
       <input type="button" value="Calculate" onclick="update();return false;" />
      </td>
     </tr>
     <td align="right">
      Product Total:</td>
     <td align="left">
      <input type="text" name="productTotal" id="productTotal" size="6" readonly="readonly" /></td>
     </tr></table>
</form>

Answer 3

I see a couple of things that are not working in your script:

• The year variable is not used and there is no year input in your form.

• The a, b and c variable declaration, I think that you want to get the values from your input elements.

• You assign the calculation to the productTotal variable, and later you use the undefined theProductTotal variable.

To get the form elements by name I would recommend you something like this:

function update() {
  var a = +document.forms['calc'].elements['productOne'].value,
      b = +document.forms['calc'].elements['productTwo'].value,
      c = +document.forms['calc'].elements['productThree'].value,
      productTotal = Math.floor(a/(a+b+c)*300);

  document.forms['calc'].elements['productTotal'].value = productTotal;

  return false;
}

Notice how I'm getting the input values, since you are using only the name attribute, you can access the elements in that way.

Also look that I'm converting the input values to Number (by using the unary plus operator), since the value property is string, and that can give you problems when you sum, because if you use the add operator with strings a concatenation will take place.

Check the above example here.