Autopopulate fields in jQuery??

drumdogg · 22 Nov 2012 at 12:29

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

GravyMonster · 22 Nov 2012 at 12:58

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

Assuming the data is stored in a database of some flavour, then you'd use AJAX to send a request to an ASP or PHP page with the number 10 as a parameter, and then receive back the result of the calculation which you can then deal with in your javascript success handler.

edd1e · 22 Nov 2012 at 13:00

This will be very easy with jQuery, just google jQuery's change event handler -

Here is a very quick untested example

Code:

$('mainElement').change(function(){

     $('otherElement').val('Text here');

});

drumdogg · 22 Nov 2012 at 13:43

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

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.

cheechm · 22 Nov 2012 at 13:58

Well if you get started on some code and get stuck then post it here and I'll give you a hand.

GravyMonster · 22 Nov 2012 at 14:05

drumdogg said:
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.

In which case you don't need ajax, just something like this:

Code:

$(".calc-elements").change(function() {
    var firstValue = parseInt($("#first").val(), 10);
    var secondValue = parseInt($("#second").val(), 10);
    $("#third").val(firstValue / secondValue);
});

The database submission can then be done as you normally would in whatever SS language you've got, but don't rely on the calculated field being correct - it's very easy for someone to amend that value in Firebug to circumvent your validation (assuming you have some) and post it to your database. You should repeat the calculation on the server side too.

drumdogg · 27 Nov 2012 at 15:28

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>

Could someone have a quick look.

Thanks

cheechm · 27 Nov 2012 at 16:55

Post the HTML that you have as well please.

drumdogg · 28 Nov 2012 at 07:59

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>

Tripnologist · 28 Nov 2012 at 08:52

You don't have .calc-elements anywhere in your html. It should be the input you want to have trigger the calculation.

Edit: It might be beneficial for you, if you know what this is actually doing.

Code:

//When .calc-elements has any change made to it
$(".calc-elements").change(function() {

  // take the value from #p150umWT and change it from a string to an integer 
  var firstValue = parseInt($("#p150umWT").val(), 10);

  // take the value from #TotalWT and change it from a string to an integer
  var secondValue = parseInt($("#TotalWT").val(), 10);

  // Divide the two and put the result into #p150umP
  $("#p150umP").val(firstValue / secondValue);

});

The reason for having to change the values from a string to an integer is that a string is just a group of characters whereas an integer is a number.
As strings, 10+10=1010 while as integers, 10+10=20.

cheechm · 28 Nov 2012 at 09:32

Try this:

Code:

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

<script type="text/javascript"> 

$(".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>

Although I think they aren't the calculations you wanted you get the idea?

GravyMonster · 28 Nov 2012 at 13:32

Here's a working version of what cheechm posted: http://jsfiddle.net/vkwCs/

Seems good to me although you can avoid the (IMO ugly) isNaN call:

Code:

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

drumdogg · 29 Nov 2012 at 09:11

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

cheechm · 29 Nov 2012 at 09:26

Here ya go:

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Calc</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(".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>


</html>

drumdogg · 29 Nov 2012 at 11:19

Thanks for the help guys, got it working

drumdogg · 30 Nov 2012 at 10:24

Im back again!! I cant seem to get the total of the other calculations as it just inserts a zero.

Here is the example http://jsfiddle.net/vkwCs/81/

If someone could have a look it would be great

cheechm · 3 Dec 2012 at 16:55

Try this:
http://jsfiddle.net/vkwCs/96/

drumdogg · 5 Dec 2012 at 12:59

Cheers cheechm, thats what i was after

drumdogg · 11 Dec 2012 at 10:46

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

GravyMonster · 11 Dec 2012 at 13:14

Change all your 'parseInt' to 'parseFloat' - removing the radix to as parseFloat doesn't need it, and change the | to || as you're now working with floats:

Updated fiddle here