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"></script>

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

where is your problem? with input what would you want as expected output? — TStamper
– TStamper, Commented Oct 28, 2009 at 21:15
As far as I've understood from the code he just wants to update a HTML input field with the calculated value from other inputs. — Gergely Orosz
– Gergely Orosz, Commented Oct 28, 2009 at 21:19
After applying some indentation, it is obvious that there is a <tr> tag missing. — Svante
– Svante, Commented Oct 28, 2009 at 21:22
@Gergely-well then the title needs to be editing-@zac- is Gergely right about thats what you're asking for? — TStamper
– TStamper, Commented Oct 28, 2009 at 21:23
hi yes sorry it is not clearer.. yes Gergely is correct I want to update that field — Zac
– Zac, Commented Oct 28, 2009 at 21:26

Christian C. Salvadó · Accepted Answer · 2009-10-28 21:22:51Z

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.

Gergely Orosz · Accepted Answer · 2009-10-28 21:55:32Z

0

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.

edited Oct 28, 2009 at 21:55

answered Oct 28, 2009 at 21:18

Gergely Orosz

6,4854 gold badges49 silver badges59 bronze badges

3 Comments

Christian C. Salvadó Over a year ago

You should convert the a, b and c variables to Number, otherwise the (a+b+c) expression will be evaluated as string concatenation.

Zac Over a year ago

Thanks Gergely... isnt working just returning zeros.. I put a live example here: zacharydesigns.com/sandbox/calculatorJS.html

Gergely Orosz Over a year ago

Corrected to parse the strings to integers. Thanks for the notice.

Eric · Accepted Answer · 2009-10-29 08:10:50Z

0

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>

edited Oct 29, 2009 at 8:10

answered Oct 28, 2009 at 21:18

Eric

98.1k54 gold badges257 silver badges389 bronze badges

2 Comments

Zac Over a year ago

thanks Eric... couldnt get that to work either.. i updated the code with your here: zacharydesigns.com/sandbox/calculatorJS.html

bobince Over a year ago

val() is more correct than broken attr(), but this is still adding strings together not integers.

Collectives™ on Stack Overflow

populate input field using javascript problem

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related