|
JavaScript - I Need Help With Autocomplete Dynamic Textbox
Hello, i have coded this page:
http://www.advance2000.net/system/ad...rchasepeso.php click on the "ADD ITEM" button TWICE. now you have created two rows of textboxes. next, enter the letter "M" on the description textbox on the second row. this would then initialize an autocomplete function... you will see two words "memory" and "motherboard" try clicking one of these.. after clicking, i guess you will notice the error in my program. the clicked value (for example "memory") would be sent in the FIRST ROW TEXTBOX instead of the second.... can anyone help me? Here is the Code of the said Dynamic Textbox: Code: <script language ="javascript">
row_no=0;
function addRow(tbl,row){
row_no++;
if (row_no<=200){
if (row_no<=200){
if (row_no>=100){
var textbox = '<input type="text" id="item[]" value='+row_no+' size = "2" maxlength= "99" name="item[]>"';}
if (row_no<100){
var textbox = '<input type="text" id="item[]" value='+row_no+' size = "2" maxlength= "99" name="item[]">';}
var textbox2 = '<input type="text" id="stockcode[]" size = "20" maxlength= "100" name="stockcode[]">';
var textbox3 = '<input type="text" autocomplete="off" id="description" size = "95" maxlength= "100" name="description" onkeyup="lookup(this.value);" onChange="fill();"><div class="suggestionsBox" id="suggestions" style="display: none;"><img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /><div class="suggestionList" id="autoSuggestionsList"></div>';
var textbox4 = '<input type="text" id="qty'+row_no+'" size = "6" maxlength= "100" onChange="Sum()" name="qty[]">';
var textbox5 = '<input type="text" id="price'+row_no+'" size = "15" maxlength= "100" onChange="Sum()" name="price[]">';
var textbox6 = '<input type="text" id="subtotal'+row_no+'" size = "15" maxlength= "101" onChange="Grand()" name="subtotal[]" readonly>';
var tbl = document.getElementById(tbl);
var rowIndex = document.getElementById(row).value;
var newRow = tbl.insertRow(row_no);
var newCell = newRow.insertCell(0);
newCell.innerHTML = textbox;
var newCell = newRow.insertCell(1);
newCell.innerHTML = textbox2;
var newCell = newRow.insertCell(2);
newCell.innerHTML = textbox3;
var newCell = newRow.insertCell(3);
newCell.innerHTML = textbox4;
var newCell = newRow.insertCell(4);
newCell.innerHTML = textbox5;
var newCell = newRow.insertCell(5);
newCell.innerHTML = textbox6;
}
if (row_no>200){
alert ("Too Many Items. Limit of 20.");
}
}
}
</script>
The VAR TEXTBOX 3 would create the said "description textbox" that is also the textbox that calls the "Fill()" and the Lookup() function of the autocomplete HERE, we have the said functions: Code: function lookup(description) {
if(description.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+description+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#description').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
Similar Tutorialshi, I have a code to create a dynamic textboxes in html. But i wanna give ID to each controls to retreieve data from textboxes. How do make this??? here is my code, <script language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell3 = row.insertCell(0); var element2 = document.createElement("input"); element2.type = "text"; cell3.appendChild(element2); } </script> <body> <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> <TABLE id="dataTable" width="350px" border="1"> <TR> <TD> <INPUT type="text" /> </TD> </TR> </TABLE> </body> help me any one.. Thanks in advance. Hi All, i am having some difficulties to figure out how can i link get my calendar (datepicker) working with my dynamic generated textbox . I am using a Jquery file that i download form the net <!-- link calendar files --> <script language="JavaScript" src="calendar_us.js"></script> <link rel="stylesheet" href="calendar.css"> and here is my code to generate my dynamic controls which is working fine actually..i need to have : 1- option : the datepicker showing up once i click on StartDate textbox 2- in the future i ll use an img and i want to use it to populate the datepicker. below is my modest javascipt code i use to create dynamic textbox: <script type="text/javascript"> // Declare element id for different dynamic generated controls var elementid = 1; function addNew() { var elementrow = 1; // Get the main Div in which all the other divs will be added var mainContainer = document.getElementById('mainContainer'); // Create a new div for holding text and button input elements var newDiv = document.createElement('div'); var bgc ="##E2E2E2"; //"##b2d47e"; newStartDate = document.createElement( 'INPUT' ); newStartDate.id = 'id' + elementid + elementrow; newStartDate.setAttribute('id1','id'+ elementid+elementrow); newStartDate.setAttribute('name','StartDateName'+ elementid+elementrow); newStartDate.size=8; newStartDate.style.backgroundColor= bgc; // Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; newAddButton.title = " Add new Project"; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.title = " Remove Project"; // Append new text input to the newDiv newDiv.appendChild(newStartDate); // Append new button inputs to the newDiv newDiv.appendChild(newAddButton); newDiv.appendChild(newDelButton); // Append newDiv input to the mainContainer div mainContainer.appendChild(newDiv); // Add a handler to button for deleting the newDiv from the mainContainer newAddButton.onclick = addNew; newDelButton.onclick = function() {mainContainer.removeChild(newDiv);}; elementid++; } </script> any help will be apprecited ! thanks Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! So I found this code and I've manipulated it a little bit for what I want. It was designed to autocomplete an input field when countries were typed, but I changed the values to match ingredients or cooking terms, etc. I was wondering if it would be possible through javascript to autcomplete a word after one is already typed in the input field. For instance, if one person types an 'f' into the input field it will suggest 'flour' as an autocomplete, but if the person types 'f' again, it will not perform the same autocomplete function. How would you go about doing that? Thank you! Code: <head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Timothy Groves | http://www.brandspankingnew.net/ */
countries = new Array(
"flour",
"cup",
"tsp.",
"tbsp.",
"lb.",
"pound",
"tablespoon",
"teaspoon",
"sugar",
"olive oil",
"vegetable oil",
"gallon",
"quart",
"qt."
);
var sug = "";
var sug_disp = "";
function getCountry() {
var input = document.forms['address_frm'].country.value;
var len = input.length;
sug_disp = ""; sug = "";
if (input.length) {
// get matching country from array
for (ele in countries)
{
if (countries[ele].substr(0,len).toLowerCase() == input.toLowerCase())
{
sug_disp = input + countries[ele].substr(len);
sug = countries[ele];
break;
}
}
}
document.forms['address_frm'].sug_country.value = sug_disp;
if (!sug.length || input == sug_disp)
document.getElementById('sug_btn').style.display = "none";
else
document.getElementById('sug_btn').style.display = "block";
}
function setCountry() {
document.forms['address_frm'].country.value = sug;
hideSug();
}
function hideSug() {
document.forms['address_frm'].sug_country.value = "";
document.getElementById('sug_btn').style.display = "none";
}
</script>
</head>
<body>
<div style="width: 202px; margin: 100px auto 0 auto;">
<form name="address_frm">
<div></a>
<div style="position: relative; margin: 5px 0 5px 0; height: 30px;">
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 1;">
<input type="text" name="sug_country" style="background-color: #fff; border: 1px solid #999; width: 200px; padding: 2px" disabled />
</div>
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 2;">
<input autocomplete="off" type="text" name="country" style="background: none; color:#000; border: 1px solid #999; width: 200px; padding: 2px" onfocus="getCountry()" onkeyup="getCountry()" />
</div>
<div id="sug_btn" style="position: absolute; top: 2px; right: 5px; z-index: 4; display:none;">
<p onclick="setCountry()" style="cursor:pointer">></p>
</div>
</div>
</form>
</div>
</div>
</body>
How do I fix the problem that autocomplete does not validate, I have heard before that there is a dirty way to do this but did not want to do this before, but now feel i must as my boss wants the site error free ! does anyone know how I do this ? Hi So, I have a working single autocomplete function, but I want to use the same function on different fields.... this is my code: Code:
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<div>
<form>
<script type="text/javascript">
var index = '1';
</script>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
I know the id's are the same in this, but I tried changing them and it still seems to make little difference.. I did wonder if I could add something variable to the id's and pass that in the function call, but could not figure it out.... the above gives me autocomplete on two fields, but will only fill one of them... Any suggestions would be appreciated Hi all, I am trying to create a dependend autocomplete (based on JQuery) box for example: Field 1 has a autocomplete value of America. Field 2 has to fetch based on the value America the availible states like Kansas However if field 1 has the value England i want field 2 to reflect this by offering for example Schotland. I have the following code in place: Code: $(
document).ready(
function() {
var ac_config = {
source: "getcountry.php",
select: function(event, ui){
$("#
field1").val(ui.item.name),
$("#
field1hidden").val(ui.item.id);
},
minLength:3
};
$("#
field1").autocomplete(ac_config);
}
);
The code above will autocomplete the field1 (country's) input field and an hidden id field. Now i want to base the selection of field2 (the states) on the returned value in field1. i have the following code to try and do this (placed inside document.ready function()): Code:
var stateinput = document.getElementById('field1').value
var ac_config2 = {
source: "getstate.php?country=" + stateinput,
select: function(event, ui){
$("#
field2").val(ui.item.name),
$("#
field2hidden").val(ui.item.id);
},
minLength:3
};
$("#
field2").autocomplete(ac_config);
However the selection is not restricted based on the given input. Can anybody tell me what i am doing wrong? Thanx in advance..... Hello, I have a problem with autocomplete of jQuery. Here is my code Code: $('input#recipient').autocomplete ({
source: function (request, callback) {
var dataString = {username : request.username};
$.ajax({
url: url.root + 'email/',
data: dataString,
//cache: false,
complete: function(xhr, result) {
if(result != 'success') return;
var response = xhr.responseText;
var usernameList = [];
$(response).filter('li').each (function() {
usernameList.push($(this).text());
)};
callback(usernameList);
}
});
}
});
Can you tell me what's the problem Thank you I want to use a database query to grab all of a member's friends from a table in order to add the friend's email address to a form, to ready it for POSTing. I am using the jquery ui, so on my form.php page, I have the script and html: Code: <script>
$(function() {
$( "#friendsearch" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.id + " " + ui.item.value :
"Nothing selected, input was " + this.value );
}
});
});
</script>
<form>...
<input id="friendsearch" />
</form>
And on my search.php I have: Code: //code to connect to database.... etc
$query = "
//this code goes through a table LEFT JOIN to grab a list of the logged-in member's friends' info (id, email, first name, last name)
"
$sql = mysql_query($query);
while($row = mysql_fetch_array($sql)) {
$fid = $row["id"];
$firstname = $row["firstname"];
$lastname = $row["lastname"];
$email = $row["email"];
echo $fid <br /> $f_firstname <br /> $f_lastname <br /> $email <br /> ";
The "echo" above works. It lists out all the info perfectly, so I know my query is good. The problem, I am having, is with what comes next in the search.php: Code: $q = strtolower($_GET["term"]);
// supposed to do something with $q here (not sure what!)
$return = array();
while ($row = mysql_fetch_array($query)) {
array_push($return,array('id'=>$row['firstname'],'value'=>$row['lastname']));
}
echo(json_encode($return));
This is the part that's suppose to work with the jquery autocomplete. I know it's wrong, but I need to know how I can fix it to do the following: 1) when the user starts typing the first name or last name of the friend, auto-complete shows a drop-down list of firstname lastname. 2) once the friends' names are placed in the input box, on submit, i want to POST the friends' email addresses (not their name)! Complex, I know... Any help would be much appreciated! Thanks, June http://auspost.com.au/apps/postcode.html Basically I want to build the same thing. The data is freely available there as a download. I couldn't find anything existing in the jquery plugin space. Can anyone offer pointers on how to achieve it? Hi All, Im a newbie when it comes to Javascript and trying to learn as I go along. I am working on an internal work site. In the site I have a text box and on entering a specific code I want it to open a new page that links to a document that has the same name. ie. if user types red, I want it to find the document red.html in a folder. To make my colleagues job easier, I want the text box to autocomplete. Below is a section of the code I plan to use Code: <script> var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"]; </script> </head> <body> <h2>Autocomplete Textbox Example</h2> <p>Type in a color in lowercase:<br /> <input type="text" value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" /></p> </body> </html>Can anyone help me to modify this to: 1) link the text entered to the document I want opened 2) open this document upon 'enter' pressed If anyone can provide help it will be greatly appreciated. Thanks Glen Hi there Im a relative newbie and am trying to have a searchbar that users can complete, with the text entry being from a pre-defined list. The hope is that a new page will open with the link that relates to the search bar entry. Im using an Autocomplete code but cant work out how to get the link part to work. See below code Code: <html>
<head>
<script src="jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "092 610 343 505 Utilities".split(" ");
$("#example").autocomplete(data);
});
var data = [ {text:'Link A', url:'/page2'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
location.href = item.url;
});
</script>
</head>
<body>
Number: <input id="example" /><p></p>
</body>
</html>
Can someone help me complete this code? For example, how can I change the code so that a text entry of "092" opens "www.google.com" when I hit enter after text entry? Your help with this is greatly appreciated Glen Here is what I'm envisioning: The user selects a state, then in the 'Cities' box, he starts typing the name of his city. However, it autocompletes the name for him based on the state he chose. So if he chose California and started typing in "Los Angeles", it would autocomplete "Los Angeles" for him. Does that make sense? Is there a script out there that can do this? I have a JQuery autosuggest working properly on my form.php page... Now I want to get my form to actual POST the input values. So currently if I just run search.php, I get the following (using echo json_encode): {"label":"Henry Gale","value":"henrygale@gmail.com"},{"label":"Amy Gerges","value":"amy@yahoo.com"}, and the list goes on. So since the search is working properly. Now, I want to POST only the values that I place in the form's input field. I currently have: Code: <script>
$(document).ready(function() {
$( "#autocomp" ).autoSuggest("search.php", {
minChars: 2,
selectedItemProp: "label",
searchObjProps: "label",
selectedValuesProp: "value",
selectionLimit: 8,
formatList: function(data, elem){
var my_image = data.image ;
var my_label = data.label;
var new_elem = elem.html(my_image + my_label);
return new_elem;
}
});
});
</script>
<input name="contacts" type="text" id="autocomp" maxlength="35" />
But if I do an echo of the $_POST['contacts'] I just get the word: Array I am doing something wrong, just not sure what... Since my input gets a list of comma separated values, how can I: 1) make sure the input values get the "value" attribute which corresponds to the emails. 2) post the emails so I can do things with the emails (run them through format checks, insert them into a mysql db, etc). I would like to use a JavaScript to fill in the total based on the responses given by the user in this form stub:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Formstub</title>
</head>
<body>
<form id="theform" id="theform" action="formstub.html" method="post">
<table width="90%" border = "1
" style="margin-left:40px; font-family: helvetica, ariel, sans-serif; font-size: 0.95em; color: #2D8AB9;">
<tr style="height:3em">
<td width="2em"><input type="checkbox" name="skipperReg" id="skipperReg" value="30" /></td>
<td width="12em">Registration Fee</td>
<td width="4em" >$<input type="text" name="skipperFee" id="skipperFee" readonly="readonly" size ="2" value="30" style="text-align:right" /></td>
<td width ="20em"> </td>
</tr>
<tr>
<td ><input type="checkbox" name="guestReg" id="guestReg" value="8" /></td>
<td>Guest Fee</td><td>$<input type="text" name="guestFee" id="guestFee" readonly="readonly" size ="2" value="8" style="text-align:right" /></td>
<td> # Guests <input type="text" name="guestQty" id="guestQty" size="2" /></td>
</tr>
<tr>
<td ><input type="checkbox" value="" name="miscAmt" id="miscAmt" /></td>
<td>Misc</td><td>$<input type="text" name="miscTotal" size ="2" style="text-align:right" /></td>
<td> List details <input type="text" name="miscDetails" size="35" /></td>
</tr>
<tr style="height:2em"><td > </td>
<td>Total</td><td>$<input type="text" id="total" name="total" size ="2" style="text-align:right" ></td>
</tr>
</table>
</form>
</body>
</html>
The script should add the skipperfee to the total if the skipperReg box is checked, multiply the guestFee by the guestQty and add that to the total if the guestReg box is checked, and add the miscTotal to the total if the miscAmt box is checked. i have this, Code: $(function() {
$('#input').autocomplete('test.php', {json: true});
});
that bring back values from the database here is my php section Code: $result = mysqli_query($db,$query);
while( $row = mysqli_fetch_array($result) )
{
$aResults[] = array( "id"=>($row['s_id']) ,"value"=>($row['s_last']), "info"=>($row['s_first']) );
}
$return = array();
foreach ($aResults as $key => $res) {
$return[] =$res['value'] . ' , ' . $res['info'];
}
echo json_encode($return);
}
}
}
i would like, when i select a name from the auto suggest to be able to have the id be filled in a input text area... uncle Google says this, but i am having a hard time implementing it. Code: myCallback = function(li, $input) {
// I need to refer to the appropriate "myXxxInput" here
alert($input.attr('id'));
}
setup = function() {
setupInput($('#myFirstInput'));
setupInput($('#mySecondInput'));
}
function setupInput($input) {
$input.autocomplete('blah.php', {onItemSelect: function(li) {
myCallback(li, $input);} });
}
Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong |
|||||||