js array output recognition 1

[JohnShell]

Hi,

Trying to better phrase my question, so here goes.
I have 3 functions. I do not know how to have 2 functions recognize the output of an array from the other function. All of this revolves around input(text boxes). What is the array's output? In other words, how do I get the newly added textboxes recognized by the initial functions - what are they called? I have tried adding names like "No. of Hours[1]"; "No. of Hours(1)"; or,"No. of Hours1"; but none of that works.
For example, one of the inputs is called "No. of Hours". That is the input textbox on the web page. When the add new rows array is invoked it adds new input textboxes and the new element is

Code:
el.type = 'text';
el.name = 'No. of Hours' + iteration;
el.id = 'No. of Hours' + iteration;
el.size = 7;
cellRight.appendChild(el);What is this new input/element called so that I can refer to it for the coded function shown below?

The first function provides validation for user input.

Code:
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 input for the above function is

Code:
<td>
<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>The array outputs added textboxes thusly,


Code:
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++;The other function uses a JQuery for a datepicker.

Code:
<script type="text/javascript">
$(function() {
$("#startdate").datepicker();
$("#enddate").datepicker();
}); </script>The input is this.

Code:
<td><input style="width: 70px" type="text" id="startdate"></td>
<td><input style="width: 70px" type="text" id="enddate"></td>I am lost on this and could really use some help and guidance.

Thanks,

John

 

[vacunita]

For starters element names and IDs must not have spaces, otherwise as you have seen they are unaddressable.

But you don't need to know your elements name, you are already passing its reference by using "this" in the function call. That passes the exact reference to the element who's onblurr event has been triggered.

So using fld.value would reference the value of the textbox that was blurred so to speak.



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

http://behindtheweb.blogspot.com/

 

[vacunita]

A small correction:

For starters element names and IDs must not have spaces, otherwise as you have seen they are unaddressable.

"Must not" is a little harsh. "Should not have spaces" is better, and they can still be addressable if they have spaces though.

You can either use the getElementsByName() function to get an array of elements with a specific name.

var boxes=document.getElementsByName('No. of Hours');

So you would the address is as
boxes[x] where x is the number of the textbox you want


or you can do it through the full object reference:

document.forms.nameofyourform.elements['No. of Hours'][x].value

where x is a number designating which box you want.

If your element has a name that doesn't have spaces, then you can simply address directly as:

document.forms.nameofyourform.nameofyourelement[x]

But as I said before, since you are already passing the "this" reference, there's no need for 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.

http://behindtheweb.blogspot.com/

 

[JohnShell]

Phil AKA Vacunita,

Thank you for your patience and guidance. I am new to javascript and, therefore, am learning it as I trudge through this ColdFusion program. I am unsure of the correct code and where and how to place it.
I changed one element's name from "No. of Hours" to "No_of_Hours".
I presume I create a new function for document.getElementsByName. Is that correct?


Is all that I need what you show; var boxes=document.getElementsByName(No_of_Hours); and do I need to place single quotation marks inside the parenthesis with the new name for the element?

And I do not know how to translate this, "document.forms.nameofyourform.nameofyourelement[x]"?

I understand using the index numbers of 0, 1, 2, and 3 for the x in the brackets. So I must presume that I will list this line of code 4 times - correct?

I do not believe I am using a form for this.

To my knowledge, the only forms in the code are

<form style="width: 5px; height: 1px;">
<input type="text" name="No_of_Hours" id="No_of_Hours" style="width: 70px;" onblur="checkQuarters(this);" /> </form>


<cfform width="2px">
<cftextarea name="reason" cols="30" rows="5" id="reason" ></cftextarea> </cfform>

<cfform width="5px">
<cftextarea name="Comments" cols="30" rows="5" id="Comments" ></cftextarea> </cfform>

<form id="form1" name="form1" method="post" action="">
<p>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0" /> Yes &nbsp;
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1" /> No </p></form>

I presume that I write the same code for 'startdate' and 'enddate'?

Again, thanks a lot for the help.

 

[vacunita]

I presume I create a new function for document.getElementsByName. Is that correct?

Not entirely sure what you mean by that, getElementsByName is already a function.

What exactly is it you want to do with startdate and enddate?
Do you want to validate like you are doing with number of hours?

As far as accessing your textboxes goes, since it appears you are giving unique names and id's to them by adding the "iteration" value to the end of the names and ids you can use that with getElementById to access the specific box.

document.getElementById('No of Hours[red]2[/red]');
or
document.getElementById('No of Hours[red]5[/red]');

etc...

but I don't quite understand what it is you are attempting to do so I gather I may be providing irrelevant information to you.

You have a set of inputs, but your forms don't actually surround your new inputs except for the radio buttons , so now I'm even more confused as to how you would send all this information over to your Coldfusion script.

I mean you could use Ajax, but I have a feeling that may be even more complex for you.




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

http://behindtheweb.blogspot.com/

 

[JohnShell]

Vacunita,

I am quite pleasantly surprised that you answered so quickly, thank you.
I will add document.getElementById('No_of_Hours2'); to the existing function - thanks.
Concerning 'startdate' and 'enddate', they are input textboxes that have a link to an existing JQuery that is a calendar/datepicker. I presume I should do the same for 'start/enddate' as for 'No_of_Hours' - getElement with the iterated index numbers.
I have a function (add rows) coupled to a button which allows users to add 3 additional rows of textboxes -three input, 'startdate', 'enddate', and 'No_of_Hours', and one select/list input, 'TypeOfHours'. I want to link the JQuery to the newly added textboxes, i.e., 'startdate1', 'startdate2', and 'startdate3' - same for 'enddate'.
I am learning ColdFusion and by necessity, JavaScript. Think I would like to get a firm grasp on those before I attempt AJAX.
Let me take a shot at your recommendations and, again, thank you very much.
FYI - I have gone from IT mgt. to coding - the fortunes of a changing economy - and am in the process of expanding my IT knowledge from rudimentary to advanced.

Thanks again,

John

 

[JohnShell]

Vacunita,

I do appreciate your help. And I am sorry to trouble 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')

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){
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.