JavaScript - Javascript Added To My Code

Below, I added: bmiresult to my database but I get the error: There has been an error: could not prepare statement (1 table bmical has no column named bmiresult)

Code:

 html5rocks.webdb.createTable = function() {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 INTEGER, weight1 INTEGER, added_on DATETIME, bmiresult INTEGER)", []);
        });
      }
      
      html5rocks.webdb.addTodo = function(todoText) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          var weight1 = document.getElementById("weight1").value;
          
        var height2 = todoText / 100
  		var BMI = weight1  / (height2 * height2)
        
        var BMI = BMI;
		var bmiresult = BMI.toFixed(3);
          
          
          var addedOn = new Date();
          tx.executeSql("INSERT INTO bmical(height1, weight1, added_on, bmiresult) VALUES (?,?,?,?)",
              [todoText, weight1, addedOn, bmiresult],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
         });
      }

Hi everyone, now I need to add items into a dropdown list, and the items would be sorted alphabetically and it does not allow duplicate items to be added. Can anyone help take a look and see what's wrong with my code?

Javascript
Code:

function addAnotherOption()
{
        var newItem = document.getElementById("Text44"); 
        if (!newItem.value == "")
        {
            var answer = confirm ("Are you sure you want to add? ") 
            if (answer)//if answer is true
            {        
                var lst = document.getElementById('comboBox');  // listbox control id
                // Now we need to create a new 'option' tag to add to MyListbox 
                var newOption = document.createElement("option"); 

                newOption.value = newItem.value; // The value that this option will have 
                newOption.innerHTML = newItem.value; // The displayed text inside of the <option> tags
                for (var i = 0; i < lst.options.length; i++) 
                {
                    arrTexts = lst.options[i].text; 
                    if (arrTexts.toLowerCase() == newItem.toLowerCase()) 
                    {
                        alert ("That option is already included in the list - please enter another item.");
                        return false;
                    }
                    
                    else
                    {                                          
                        // Finally, add the new option to the listbox 
                        lst.appendChild(newOption);             
                        //sort items in listbox in alpha order
                        arrTexts = new Array();    
                        for(i=0; i<lst.length; i++) 
                        {
                            arrTexts[i] = lst.options[i].text;
                        }     
                                    
                        arrTexts.sort();
                        for(i=0; i<lst.length; i++)
                        {
                            lst.options[i].text = arrTexts[i];
                            lst.options[i].value = arrTexts[i];
                        } 
                     }
                }                                
            }
        }
        else
        {    
            if(newItem.value == "")
            {
                alert("Key something to textbox please.");
            }
                    
            else
                alert("Cancelled.");                
        }                              
 }

HTML

Code:

<input id="Text44" type="text" />
<input id="Submit22" type="submit" value="Add" onclick="addAnotherOption()" /><br />

<select name="combo" id= "comboBox" style="width: 323px">
                                    <option value="H">Hearts</option>
                                    <option value="D">Diamonds</option>
                                    <option value="C">Clubs</option>
                                    <option value="S">Spades</option>
</select>

Hi, I would like to prevent the addition of duplicate items in the following situation.

Firstly, I have a listbox with a few options such as

Code:

<select id="listbox" name="listbox" multiple="multiple" style="width: 580px;">
                                      <option>Java</option>
                                      <option>PHP</option>
                                      <option>Perl</option>
                                      <option>Javascript</option>
                                      <option>C#</option>
                                      <option>Powershell</option>                                      
</select>

Next, I have a submit button with a textbox. The user will be able to submit new options into the listbox via the textbox and submit button. Therefore, I need to prevent the user from entering duplicate items into the listbox. How should I do?

The following code is used to add items into the listbox.



Code:

function addItem()
{
        var lst = document.getElementById('listbox');  // listbox control id
        var newItem = prompt("Enter New Item","Enter Value Here"); 
        
        //Option object is created for every option in a selection
        //new Option([text[, value[, defaultSelected[, selected]]]]) // Syntax
        if(newItem == null)
        {
                return false;
        }
        
        else
        {
               lst.options[lst.length] = new Option(newItem,newItem,false,false);
               return false;
        }
}

I'm stuck! - I have a search form, that when data is entered and submitted, the data is sent to another page! - this works well see eg below.

http://www.nctfleetlist.co.uk/normal.php

My problem is, I have a piece of javascript called "greybox", it basically loads an external page, dimming the first page and focusing on the external - see eg below.

http://www.nctfleetlist.co.uk/div4.php

The new window can be called via either a href "rel" link or an "onclick" command.

I have tried implementing the the two together but when I use the javascript to call the new window the data from the original form is not passed over! - this is what I have so far...

example 1 - using onclick command (http://www.nctfleetlist.co.uk/eg1.php)

Code:

<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post">
<input type="text" name="var1" value="">
<input type="submit" name="submit" value="submit" onclick="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)">
</form>

example 2 - using onsubmit within the form tag (http://www.nctfleetlist.co.uk/eg2.php)

Code:

<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post" onSubmit="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)">
<input type="text" name="var1" value="">
<input type="submit" name="submit" value="submit">
</form>

example 3 - using a javascript link to submit the form, adding a "rel" tag (http://www.nctfleetlist.co.uk/eg3.php)

Code:

<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post">
<input type="text" name="var1" value="">
<a href="#" onclick="document.forms[0].submit()" rel="gb_page_center[720, 300]">Search</a>
</form>

Any help is appreciated!

Hi, i know i should have 2 fields for a first and last name in my form but i dont - and was wondering if someone would be able to help me with - or has - a java script valadation rule to only allow a one letter character (letter in between spaces such as a middle initial) in a text field if at least 2 words are also included (2 words of at least 2 or more characters)

so if the user input ' John H ' an error prompt would display until one more word is added/at least 2 words are found

right now im using the below coding to allow at least 2 words in the text field but would like to see if its possible to enhance it so it will only block a one letter word if there are less than 2 other words in the form - right now if any words is added with less than 2 characters it will display an error... if anyone knows of a better form of code that needs a minimum of 2 words added and still allows single characters such as middle initials to in a validation script i'd greatly appreciate your help... i get lost on validation process'

'cheers' in advance to anyone that may know of something or a site that can point me in a better direction

function(value,element){return this.optional(element)||/^((\b[a-zA-Z]{2,80}\b)\s*){2,}/

Voting button on the poll in the left column works fine if you take the sharethis javascripts out. Why won't they work together though?

<script type="text/javascript" src="http://www.claimsheaven.co.uk/polls/admin/script.js"></script>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

e.g. on this page:

http://www.claimsheaven.co.uk/news/20120305.php

Hey all!

I have a script below that is very basic. when a user submits a blank form this popups. although i want to set the value of the input field to 'you@domain.com'. how would i add this value to this javascript so that even though there is 'you@domain.com' in the box, an error will still popup??

Thanks,

Code:

function validate(form_id,email) {
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   var address = document.forms[form_id].elements[email].value;
   if(reg.test(address) == false) {
      alert('Please enter a valid email address');
      return false;
   }
}

i'm trying to concatenate to a string 2 variables that i'm adding together but i'm getting Nan as the result

what am i doing wrong?


str_amount=parseInt(document.getElementById('amount').value);
strfeeamount=parseInt(document.getElementById('feeamount').value);

urltoajax=urltoajax + '&amount=' +str_amount +strfeeamount

Hello,

I am trying to get something to work and I am not having any luck.

I want to dynamically add a set of fields to a table when when the user onBlur the selection drop-down. I want the cursor to be in the text field of the newly added set.

I have been playing around with onfocus function on the hyperlink to see if when focus is gained, it would throw the user into the text field. I am getting the impress that the field has not been created yet, so the getElementbById function cannot find the object just recently created.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script language="JavaScript">
function addEvent() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById("theValue").value -1)+ 2;
  numi.value = num;
  var divIdName = "my"+num+"Div";
  var newdiv = document.createElement('div');
  newdiv.setAttribute("id",divIdName);
  newdiv.innerHTML = '<div>'+ num +'</div><div class=name><input class=name id=item-' + num + ' type=text name=item-'+ num + '></div><div><select name=selRow-' + num + ' onBlur="addEvent();"><option value="0">Check</option><option value="1">Cash</option><option value="2">Money Order</option><option value="3">EFT</option></select></div>';
  ni.appendChild(newdiv);
}

function setTxtFocus()
{
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById("theValue").value -2)+ 2;
  document.getElementById('item-' + num).focus;
}

</script><style type="text/css">
@import url(style.css);
</style>
</head>

<body onload="addEvent();">
    <div id=image></div>
    <form action=process.php method=post>
    <input type="hidden" value="0" id="theValue" />
    <div id="myDiv"></div>
	<p><a href="javascript:;" onclick="setTxtFocus();">Add Other Suggestion</a></p>
    <p><input type=submit id="submitbutton" value=Submit disabled> <INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"></p>
    </form>
</body>
</html>

Thanks
jlimited

Hi all,
I have table in Javascript and it has addrow, deleterow, submit, and functions.
when i click it automatically adds new row and it has select option to choose some of them
for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte.

So i need once i select the name from combobox, should not allow user to select same name in coming rows

Here is my code.

Thanks beforehands


PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head><title>dinamik sheet</title> 
<script>  
var i=iteration; 
function addrow(){ 
    var tbl = document.getElementById('sheet'); 
    var iteration = tbl.rows.length; 
document.getElementById('count_rows').value = iteration; 
    var row=tbl.insertRow(iteration); 
  
    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration); 
    cellLeft.appendChild(textNode); 
  
    var cellRight = row.insertCell(1); 
    var el = document.createElement('input'); 
    el.type = 'text'; 
    el.name = 'txtRow'+iteration; 
    el.id = 'txtRow'+iteration; 
    el.size = 15; 
    el.value = '0'; 
    el.onblur = sum; 
    cellRight.appendChild(el); 
  
    var cellRight = row.insertCell(2); 
    var elaz = document.createElement('input'); 
    elaz.type = 'text'; 
    elaz.name = 'txtRowaz'+iteration; 
    elaz.id = 'txtRowaz'+iteration; 
    elaz.size = 20; 
    elaz.value = '0'; 
    elaz.onblur = sum; 
    cellRight.appendChild(elaz); 
  
  
  
    var cellRight1 = row.insertCell(3); 
    var ela = document.createElement('input'); 
    ela.type = 'text'; 
    ela.name = 'txtRowe'+iteration; 
    ela.id = 'txtRowe'+iteration; 
    ela.size = 20; 
    ela.value = '0'; 
    ela.onblur = sum; 
    cellRight1.appendChild(ela); 
  
    var cellRightsel = row.insertCell(4); 
    var sel = document.createElement('select'); 
    sel.name = 'selRow' + iteration; 
    sel.id = 'selRow' + iteration; 
    sel.onchange = sum; 
    sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); 
    sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); 
    sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); 
    sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); 
    sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); 
    sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); 
    cellRightsel.appendChild(sel); 
    sum(); 
} 
function removeRowFromTable() 
{ 
  var tbl = document.getElementById('sheet'); 
  var lastRow = tbl.rows.length; 
  if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 
  
function sum(){ 
    var s1 = 0; 
    var s2 = 0; 
    var tbl=document.getElementById('sheet'); 
    var iteration=tbl.rows.length-1; 
    for(var i=1; i<=iteration; i++){//loop through table rows 
        var el1 = document.getElementById('txtRow'+i);//Row's Income field 
        var el2 = document.getElementById('selRow'+i);//Row's percentage menu 
        var ela = document.getElementById('txtRowe'+i);//Row's Tax cell 
        var elaz=document.getElementById('txtRowaz'+i); 
  
        if(!el1 || !el2 || !ela||!elaz) continue; 
        var txt = el1.value; 
        if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries 
  
var tax = Number(txt) * Number(130); 
  
if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ 
    var  tax = Number(txt) * Number(150); 
  
  
} 
if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ 
    var  tax = Number(txt) * Number(100);     
  
} 
if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ 
    var  tax = Number(txt) * Number(85);     
  
} 
if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ 
    var  tax = Number(txt) * Number(95);     
  
} 
if (el2[el2.selectedIndex].value=="GraphigCard ATI") 
{ 
  
        var tax = Number(txt) * Number(88); 
} 
  
        ela.value = tax.toFixed(2); 
        elaz.value=tax.toFixed(2)/Number(txt); 
        if(isNaN(elaz.value)){ 
        elaz.value=0; 
        } 
        s1 += Number(txt); 
        s2 += tax; 
  
} 
    var t1 = document.getElementById('total'); 
    var t2 = document.getElementById('taxtotal'); 
    if(t1){ t1.value = s1.toFixed(2); } 
    if(t2){ t2.value = s2.toFixed(2); } 
} 
  
onload = function(){ 
    addrow(); 
} 
</script> 
</head> 
<body> 
<form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> 
<table align="center" width="75%"> 
<tr> 
<td align="center">Balance sheet</td></tr> 
<tr> 
<td align="center"> 
    <table id="sheet" border="1"> 
    <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> 
  
    </table> 
</td> 
</tr> 
<tr> 
<td align="center"> 
<input type="hidden" name="count_rows" id="count_rows" /> 
<input type="button" value="Add" onclick="addrow()" /> 
<input type="button" value="Remove" onclick="removeRowFromTable()" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /><br /> 
</td> 
</tr> 
<tr> 
<td align="left"> 
<input id="total" name="total" type="text"/>total amount of products<br /> 
<input id="taxtotal" name="taxtotal" type="text"/>total price of products 
</td> 
</tr> 
</table> 
</form> 
  
</body> 
</html> 

I am very very new to programming and trying to create a web interface for a model. The user needs to be able to add as many compounds as they want and add a variable number of subgroups for each compound. Also, each input needs a distinct name.
I have tried adapting someone else code to add/remove form inputs but am not having any luck creating subgroups. below is my code

Code:

<html>
<head>
<title>form</title>
<content="text/html"; />
<script type="text/javascript">
<!--
window.onload = function () {
	if (self.init)
		init();
	}
var counter = 0;
var counter1 = 0;

function init() {
	document.getElementById('moreFields').onclick = moreFields;
	document.getElementById('moreFields1').onclick = moreFields1;
	moreFields();
	moreFields1();
}

function moreFields() {
	counter++;
	var newFields = document.getElementById('readcomp').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name
		if (theName)
			newField[i].name = theName + counter;
	}
	var insertHere = document.getElementById('writecomp');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}

function moreFields1() {
	counter1++;
	var newFields = document.getElementById('readsubgr').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name
		if (theName)
			newField[i].name = theName + counter1;
	}
	var insertHere = document.getElementById('writesubgr');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}
// -->
</script>
</head>

<body>

<div id="readcomp" style="display: none">
	Comp name<input type=text name="comp" value="" size="2"/>
	Concentration<input type=text name="comp_qty" value="" size="2"/>
	<input type="button" value="Remove comp"
		onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br/>
	<span id="writesubgr"></span>
	<input type="button" id="moreFields1" value="add subgroup" /><br/><br/>
</div>

<div id="readsubgr" style="display: none">
	Subgroup Name<input type=text name="subgroup" value="" size="2"/>
	Quantity <input type=text name="subgroup_qty" value="" size="2"/>
	<input type="button" value="Remove subgroup"
		onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>

<form action="cgi_bin\show_input.pl" method="post">
	<span id="writecomp"></span>
	<input type="button" id="moreFields" value="add comp" /><br/><br/>
	<input value="Run Program" type="submit"> <input value="Reset all fields" type="reset">
</form>
</body></html>

any help would be appreciated.
thanks

Hi,

I have a dynamic JS table and the user can add several rows then populate rows with data.
There are 4 columns in table. First row, first two columns have JQuery calendar. Third column has populated select list. Fourth column, first row has JS function to ensure that user enters integer/decimal with corresponding alert for incorrect entry.
Two things I want to do:
1. Populate added rows with JQuery calendars and integer/decimal alert.
2. Capture added rows and data from user entries so that information can be sent to database via ColdFusion programming.

The following is the js code I am using:

For the datepicker I linked to an in-house URL so this is the function -

Code:

$(function() {
		$("#startdate").datepicker();
		$("#enddate").datepicker();
		$("#RcompStart").datepicker();
		$("#RcompEnd").datepicker();
	});
</script>

The objects (inputs) for the above are

Code:

<td><input style="width: 70px" type="text" id="startdate"></td> 
<td><input style="width: 70px" type="text" id="enddate"></td>

For the numeric alert the function is

Code:

<script type="text/javascript">
function checkQuarters( fld )
{
    var val = parseFloat(fld.value);
    if ( isNaN(val) || ( val*4 != Math.floor(val*4) ) )
    {
        alert("Value must be a numeric and a multiple of 0.25");
        return false;
    }
    return true;
}
</script>

The object (input) for the above is

Code:

<td><p>
<form style="width: 5px; height: 1px;">
<input type="text" name="No. of Hours" id="No. of Hours" style="width: 70px;" onblur="checkQuarters(this);" /> </form> </td>

And to add and remove rows the function is

Code:

<script language="Javascript" type="text/javascript">
/*<![CDATA[*/
		   
  var new_rows=new Array();
  var row_count=0;

function addRow()
 {
    var tbl = document.getElementById('ReqDtTbl');
      new_rows[row_count]=new Array();
    var lastRow = tbl.rows.length;
    var iteration = lastRow;
  if (lastRow>7){
   return;}
    var row = tbl.insertRow(lastRow);
    var cellLeft = row.insertCell(0);
    var textNode = document.createElement('input');          
      textNode.size = 7;
      textNode.name = 'startdate' + iteration;		  
          cellLeft.appendChild(textNode); 
	new_rows[row_count]['cell']=textNode;
    var cellRight = row.insertCell(1);          
    var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'enddate' + iteration;          
          el.id = 'enddate' + iteration;          
          el.size = 7; 
       new_rows[row_count]['cell2']=el;
         cellRight.appendChild(el);          
          // the last cell!
    var cellRightSel = row.insertCell(2);          
    var sel = document.createElement('select');          
          sel.name = 'TypeHrs' + iteration;          
          sel.options[0] = new Option('-Select-', '""');
          sel.options[1] = new Option('Comp Time', 'Comp Time');
          sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
          sel.options[3] = new Option('Overtime', 'Overtime');
            sel.options[4] = new Option('Rel Comp', 'Rel Comp');          
          cellRightSel.appendChild(sel);
            new_rows[row_count]['cell3']=sel;
     var cellRight = row.insertCell(3);          
     var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'No. of Hours' + iteration;          
          el.id = 'No. of Hours' + iteration;          
          el.size = 7;         
          cellRight.appendChild(el);
          new_rows[row_count]['cell']=el;
          row_count++;
     }
     function removeRow()
     {
          // grab element again
          var tbl = document.getElementById('ReqDtTbl');
          // grab length
          var lastRow = tbl.rows.length;
          // delete last row if there is more than one row
          if (lastRow > 2) tbl.deleteRow(lastRow - 1);
     }
	 /*]]>*/
</script>

The buttons for this function are

Code:

<input type="button" value="Add a row" onclick="addRow('ReqDtTbl',5)";/>

   <input type="button" value="Remove a row" onclick="removeRow();" />

That's it.

Thanks - John

Hi ,

I am new to javascript and have coded an invoice page through help from some available content on web.

here is my requirement

My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that

when Quantity is entered the Price should change to Price=Quantity*Rate on tab out

So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows.

Code is as below
direct_invoice.html


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script type="text/javascript" src="js/direct_invoice_table.js">

</script>

<html>
     <head>
          <title>Direct Invoice</title>
     </head>
     <body leftmargin="0" topmargin="0">
	 
	 <p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" />
	  <b> Invoice</b></p>
	 
		<table id="Client_Details">
		  <tr>
			<th>Client Name:</th>
			<td><input type="text" name="client_name" size="20" maxsize="20" /></td>
		  </tr>
		  <tr>
			<th>Client Address:</th>
			<td><input type="text" name="address_line1" size="20" maxsize="40" /></td>
		  </tr>
		  <tr>
		  <td></td>
			<td><input type="text" name="address_line2" size="20" maxsize="40" /></td>			
		  </tr>
		  <tr>
			<th>Pin Code:</th>
			<td><input type="text" name="client_pin" size="7" maxsize="7" /></td>		
		  </tr>		  
		  <tr>
			<th>City/State/Country:</th>
			<td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td>
			<td><input type="text" id="client_state" size="10"  maxsize="20" /></td><td>/</td>
			<td><input type="text" id="client_country" size="10" maxsize="20" /></td>			
		  </tr>
		<tr>
			<th>Email Address:</th>
			<td><input type="text" name="client_city" size="10" maxsize="30" /></td>			
		  </tr>
		<tr>
			<th>TIN/PAN:</th>
			<td><input type="text" name="tin_or_pan" size="10" maxsize="20	" /></td>			
		  </tr>		  
		</table>
	 
	                <table align="center" width = "75%">
                    <tr>
                         <td align = "center">
                              <!--- very imporant to give the table an id --->
                              <!--- otherwise it won't know where to edit --->
                              <table border="1" id="mySampleTable">
                                     <tr>
									 	<th>Item No</th>
										<th>Item Name</th>
										<th>Description</th>
										<th>Unit Cost</th>
										<th>Quantity</th>
										<th>Price</th>
										<th> <font color="RED">Delete</font></th>
                                   </tr>
									<tr>
										<td>1</td>
					<td><input type="text" name="itemname[]"  size="40" "maxsize="100"/></td>
					<td><input type="text" name="description[]" size="20" " maxsize="100" /></td>
					<td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td>
					<td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td>
					<td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td>
								   </tr>
							  </table>
								<table id="totaltbl" align="right">
								<tr>
								  <td></td>
								 </tr>
								  <tr>
									<th>Vat %</th>
									<td><input type="text" name="total" size="3" maxsize="3" /></td>
								  </tr>
								  <tr>
									<th>Total</th>
									<td><input type="text" id = "total"  name="total" size="20" maxsize="100" /></td>
								  </tr>
								</table>

	
                         </td>
                    </tr>
               </table>
          <form action="save_entry.php" name="eval_edit" method="post" format="html">
					<p>	
						<input type="button" value="Add Row" onclick="addRow();" />	
						<input type="button" value="Calculate Total Amount" onclick="Totalcal();" />	
						<input type="button" value="Print" />
					
					</p>
          </form>
		  
		  	 <p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" />
	  </p>
	  <p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p>
	  	  <p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p>
     </body>
</html>

***************

The below is the javascript function that i wrote


Code:

function addRow()
     {
          // grab the element, i.e. the table your editing, in this we're calling it 
          // 'mySampleTable' and it is reffered to in the table further down on the page 
          // with a unique of id of you guessed it, 'mySampleTable'
          var tbl = document.getElementById('mySampleTable');
          // grab how many rows are in the table
          var lastRow = tbl.rows.length;

          // if there's no header row in the table (there should be, code at least one 
          //manually!), then iteration = lastRow + 1
          var iteration = lastRow;
		  
          // creates a new row
          var row = tbl.insertRow(lastRow);

          // left cell
          // insert a cell
          var cellLeft = row.insertCell(0);
          // here we're just using numbering the cell, like anything else you don't
          // have to use this, but i've kinda noticed users tend to like them
          var textNode = document.createTextNode(iteration);
          // takes what we did (create the plain text number) and appends it the cell
          // we created in the row we created. NEAT!
          cellLeft.appendChild(textNode);

          // right cell
          // another cell!
          var cellRight1 = row.insertCell(1);
          // creating an element this time, specifically an input
          var el = document.createElement('input');
          // a data type of text
          el.type = 'text';
          // the name of the element itemname, and because this is dynamic we also
          // append the row number to it, so for example if this is the eigth row
          // being created the text box will have the name of itemname8. super fantastic.
          // the exact same thing with a unique id
          el.id = 'itemname[]'+ iteration;
          // set it to size of 40. setting sizes is good.
          el.size = 40;
          // same thing as earlier, append our element to our freshly and clean cell
          cellRight1.appendChild(el);
		  
    	  var cellRight2 = row.insertCell(2);
          var e2 = document.createElement('input');
          e2.type = 'text';
          e2.id = 'description[]' + iteration;
          e2.size = 20;
	      e2.maxsize = 100;
          cellRight2.appendChild(e2);

    	  var cellRight3 = row.insertCell(3);
          var e3 = document.createElement('input');
          e3.type = 'text';
          e3.id = 'unitcost[]' + iteration;
          e3.size = 10;
 	      e3.maxsize = 100;
          cellRight3.appendChild(e3);
	
    	  var cellRight4 = row.insertCell(4);
          var e4 = document.createElement('input');
          e4.type = 'text';
          e4.id = 'quantity[]'+ iteration;
          e4.size = 4;
 	      e4.maxsize = 100;
	
          cellRight4.appendChild(e4);

    	  var cellRight5 = row.insertCell(5);
          var e5 = document.createElement('input');
          e5.type = 'text';
          e5.id = 'price[]'+ iteration;
          e5.size = 10;
		  e5.maxsize = 100;
		  
          cellRight5.appendChild(e5);
	  
		 // var cellRight7 = row.insertCell(7);
         // var e7 = document.createElement('input');
         // e7.type = 'CHECKBOX';
         // e7.id = 'cancel[]';
         // cellRight7.appendChild(e7);
		
		  var cellRight6  = row.insertCell(6);
		  cellRight6.innerHTML = "&nbsp;&nbsp;<input type='button' value='Delete' size='6' onclick='removeRow(this);'/>";
		
          e4.onclick = dynamic_onc();	
			
     }

	function removeRow(src)
	{
		/* src refers to the input button that was clicked.	
		   to get a reference to the containing <tr> element,
		   get the parent of the parent (in this case case <tr>)
		*/			
		var oRow = src.parentElement.parentElement;		
		
		//once the row reference is obtained, delete it passing in its rowIndex			
		document.all("mySampleTable").deleteRow(oRow.rowIndex);		
	}
	function countRow()
	 {
		var Rowcount = document.getElementById('mySampleTable').rows.length;
		document.eval_edit.count.value = Rowcount-1;
		
	 }
	 	function CalculatePrice()
	 {
		var Rowcount = document.getElementById('mySampleTable').rows.length;
		document.eval_edit.count.value = Rowcount-1;
		
	 }
	 
	     function onc() {
	
        var a= document.getElementById('unitcost[]');
        var b= document.getElementById('quantity[]');
		var c = Math.ceil(a.value*b.value);
			alert(b);
	document.getElementById('price[]').value =c;
	
 }
		
		function dynamic_onc()
		{
		alert('Jay'	);
		e5.value =7;		
		}
		
		function Totalcal() {
		var a= document.getElementById('unitcost[]');
        var b= document.getElementById('quantity[]');
		var c = Math.ceil(a.value*b.value);
		alert(b.value);
		document.getElementById('price[]').value =c;
		}

I'm trying to add the ui autocomplete function to some form fields using a facebook style, but I'm not sure how to get more than one value to actually pass to the form field. As my script is now it only takes the last selected value into the hidden form field. Here's my current script:
Code:

				<div id="editcbprofileinterests">
		<div id="formWrap">
<div id="interests" class="ui-helper-clearfix">
<input id="cb_intereststerm" type="text">
<input id="cb_interests" name="cb_interests" type="hidden">
					</div>
				
			
		</div></div>
		<script type="text/javascript" src="autocomplete/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				//attach autocomplete
				$("#cb_intereststerm").autocomplete({
					
					//define callback to format results
					source: function(req, add){
					
						//pass request to server
						$.getJSON("autocomplete/autocominterests.php?callback=?", req, function(data) {
							
							//create array for response objects
							var suggestions = [];
							
							//process response
							$.each(data, function(i, val){								
								suggestions.push(val.cb_intereststerm);
							});
							
							//pass array to callback
							add(suggestions);
						});
					},
					
					//define select handler
					select: function(event, ui) {
						
						//create formatted interest
						var interest = ui.item.value,
							span = $("<span>").text(interest),
							a = $("<a>").addClass("remove").attr({
								href: "javascript:",
								title: "Remove " + interest
							}).text("x").appendTo(span);
						
			//add interest to interests div		          
                        span.insertBefore("#cb_intereststerm");	
                                
                  //add interest to hidden form field
                  $('input[name=cb_interests]').val(interest);
					},
					
					//define select handler
					change: function() {
						
						//prevent 'to' field being updated and correct position
						$("#cb_intereststerm").val("").css("top", 2);
					}
				});
				
				//add click handler to activities div
				$("#interests").click(function(){
					
					//focus 'to' field
					$("#cb_intereststerm").focus();
				});
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("interest")).live("click", function(){
				
					//remove current activity
					$(this).parent().remove();
					
					//correct 'to' field position
					if($("#interests span").length === 0) {
						$("#cb_intereststerm").css("top", 0);
					}				
				});				
			});
		</script>

hiya, I just have a specific question regarding to use a canvas-element with javascript

I have one empty canvas that I want to add 9x7 smaller image elements to, the function "regRead" gets an image-element-code from a global register and that element code is then changed to a base64-encoded string for use as src for the currect image.

the problem is that when i run the script, all the 63 images added to the canvas gets the same content even if imgCode show different values in debug, i appreciate some solution feedback.

Code:

function UpdateCanvas (CanvId) {
  var canvIDNames = ["front", "back"]; // DOM IDs
  var currentCanvas = document.getElementById(canvIDNames[CanvId]).getContext("2d");
  var newImg = "";
  var topLeft = CanvId * 63;
  var bottomRight = topLeft + 63;
  var xa = 0;
  var posX = 0;
  var posY = 0;
  var imgCode = "";
  for (xa = topLeft; xa < bottomRight; xa++) {
    newImg = new Image();
    imgCode = regRead(xa, 1);
    newImg.src = getBase64src(imgCode);
    newImg.onload = function () {
      currentCanvas.drawImage(newImg, posX, posY);
      if (posX == 400) {
        posX = 0;
        posY += 90;
      }
      else {
        posX += 50;
      }
    }
  }
}