Autopopulate fields in jQuery??

drumdogg

drumdogg

drumdogg

Associate
Joined
6 Mar 2009
Posts
495
I have a form created in HTML and would like some of the fields to autopopulate but not sure how to go about it. What is the best/easiest way? With jQuery or AJAX??

Basically if a user types in the number 10 then the jQuery or whatever will do a calculation and populate another field.

Can someone help me or point me in the right direction.

Thanks
 
The method you use would depend on the intensiveness and data required for the calculation and where the data is stored.
Click to expand...

I would like it to read one number from a field that a user will input, divide it by a second number that the user will input and autopopulate the anwser into another field. Then the data will be submitted into a database.

Cheers edd1e, will have a look at this.
 
Spunkey, sorry for the late reply and thanks for the help.

I have amended to code to match my fields but it doesnt seem to work:

<script src="jquery-1.8.3.min.js"></script>
<script>

$(".calc-elements").change(function() {
var firstValue = parseInt($("#p150umWT").val(), 10);
var secondValue = parseInt($("#TotalWT").val(), 10);
$("#p150umP").val(firstValue / secondValue);
});

</script>
Click to expand...

Could someone have a quick look.

Thanks
 
Here is the HTML table i am using:

Code: 
 <table width="250" border="1" cellspacing="4" cellpadding="2">
<tr>
    <th scope="col">Sieves</th>
    <th scope="col">WT</th>
    <th scope="col">%</th>
  </tr>
  <tr>
    <th scope="row">+150&micro;m</th>
    <td><input name="p150umWT" type="text" id="p150umWT" size="12" maxlength="12" /></td>
    <td><input name="p150umP" type="text" id="p150umP" size="12" maxlength="12" /></td>
  </tr>
  <tr>
    <th scope="row">-150&micro;m</th>
    <td><input name="m150umWT" type="text" size="12" maxlength="12" /></td>
    <td><input name="m150umP" type="text" size="12" maxlength="12" /></td>
  </tr>
  <tr>
    <th scope="row">Total</th>
    <td><input name="TotalWT" type="text" id="TotalWT" size="12" maxlength="12" /></td>
    <td><input name="TotalP" type="text" size="12" maxlength="12" /></td>
  </tr>
</table>
 
Spunkey, thanks for the help. The code you have in the jsfiddle is exactly what im after but still cant get it to work!!:(

Code: 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(".calc-elements :input").change(function() {
    var firstValue = parseInt($("#p150umWT").val(), 10);
    var secondValue = parseInt($("#TotalWT").val(), 10);
    if (!isNaN(secondValue)) {
        $("#p150umP").val(firstValue / secondValue);
    }
});
</script>
</head>
<body>
<table width="250" border="1" cellspacing="4" cellpadding="2" class="calc-elements">
<tr>
    <th scope="col">Sieves</th>
    <th scope="col">WT</th>
    <th scope="col">%</th>
  </tr>
  <tr>
    <th scope="row">+150&micro;m</th>
    <td><input name="p150umWT" type="text" id="p150umWT" size="12" maxlength="12" /></td>
    <td><input name="p150umP" type="text" id="p150umP" size="12" maxlength="12" /></td>
  </tr>
  <tr>
    <th scope="row">-150&micro;m</th>
    <td><input name="m150umWT" type="text" size="12" maxlength="12" /></td>
    <td><input name="m150umP" type="text" size="12" maxlength="12" /></td>
  </tr>
  <tr>
    <th scope="row">Total</th>
    <td><input name="TotalWT" type="text" id="TotalWT" size="12" maxlength="12" /></td>
    <td><input name="TotalP" type="text" size="12" maxlength="12" /></td>
  </tr>
</table>
</body>

Do i have to have to code onLoad or is there something else wrong with it?

Thanks
 
Hi guys, sorry to open up this thread again.

Having issues with the code not doing the calculations correctly. I want them done to 1dp which i have done but for example when adding 5.1 and 4.9 it wont take to decimal place into consideration. It only adds the whole number!

http://jsfiddle.net/vkwCs/142/

Can anyone help please:)
 
You must log in or register to reply here.
Back
Top Bottom