Autopopulate fields in jQuery??

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
 
Soldato
Joined
18 Oct 2002
Posts
14,761
Location
The land of milk & beans
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.
 
Associate
Joined
8 Oct 2005
Posts
1,742
Location
Oxfordshire
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');

});
 
Associate
OP
Joined
6 Mar 2009
Posts
495
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.
 
Associate
Joined
16 Jan 2008
Posts
2,350
Well if you get started on some code and get stuck then post it here and I'll give you a hand.
 
Soldato
Joined
18 Oct 2002
Posts
14,761
Location
The land of milk & beans
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.
 
Last edited:
Associate
OP
Joined
6 Mar 2009
Posts
495
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
 
Associate
OP
Joined
6 Mar 2009
Posts
495
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>
 
Soldato
Joined
12 May 2007
Posts
3,891
Location
Bristol
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.
 
Last edited:
Associate
Joined
16 Jan 2008
Posts
2,350
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?
 
Soldato
Joined
18 Oct 2002
Posts
14,761
Location
The land of milk & beans
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);
});
 
Associate
OP
Joined
6 Mar 2009
Posts
495
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
 
Associate
Joined
16 Jan 2008
Posts
2,350
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>
 
Associate
OP
Joined
6 Mar 2009
Posts
495
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:)
 
Top Bottom