Phillip AKA Vacunita 1

[JohnShell]

Vacunita,

I do appreciate your help. And I am sorry to trouble you again but, I am lost.
I know variables must be declared, and arrays rest in memory, but I do not know how or where to place the statements
document.getElementById('No_of_Hours1')
document.getElementById('No_of_Hours2')
document.getElementById('No_of_Hours3')
which are to recognize the rows added with their respective
input boxes and corresponding functionality.

And I also came across a JavaScript key word - this
Would this be a means to achieve my desired outcome?

The functions involved are

For the datepicker:
<script type="text/javascript">
$(function() {
$("#startdate").datepicker();
$("#enddate").datepicker();
$("#RcompStart").datepicker();
$("#RcompEnd").datepicker();
});
</script>

For the numeric validation:[/]
<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 array is thus:

<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>4){
alert("Maximum rows is 4. For more entries please
submit another request.");
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>

I would think these are variables and are stored in memory until called. How? What is the syntax for these elements?

Again, sorry to trouble you. Just trying to get this working and better understand javascript coding.

Many thanks,

John

P.S. - tried many different approaches, unsuccessfully.

 

[vacunita]

I can't tell you where to place them because like I said in the other thread, I don't quite understand what it is you want to do.

All I can tell you is what the functions do. getElementById(); returns a reference to the object identified by the ID between the quotes.

Your jquery section merely as far as I can tell, adds a datepicker to elements who's ID is startdate and enddate.

So if you wanted to add a datepicker to your dynamically created elements you would need to use the object reference and assign the datepicker.

Since I don't know which datepicker library you are using I can't be certain but I guess it would be something like this:

...
   var el = document.createElement('input');          
    el.type = 'text';          
    el.name = 'enddate' + iteration;          
    el.id = 'enddate' + iteration;
    el.size = 7; 
    [red]el.datepicker();[/red]
...

This is just a guess though I could be completely wrong.


As far as the "this" keyword goes, it works similarly to the getElementById except it its a reference to the object under which the JS is running.

For instance if I have a textbox and say I want it to clear it when the user clicks on it to start typing into it:

<input type="text" value="This value will be cleared" onFocus="[red]this.value='';[/red]">

I use "this" to reference the textbox in which my JS code (this.value) is running. Since its inside the textbox element it references .

Whether you can use the "this" keyword or not I don't know, only you can determine that.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown. 

Behind the Web, Tips and Tricks for Web Development. 
[URL unfurl="true"]http://behindtheweb.blogspot.com/[/URL]