Javascript variable in element name - javascript

I have a text box, and a select box with choices that are the same as the columns in a table. I want to be able to type in the box, select a column, press a button, and have it copy whatever is in the box, to every box in the column. I am having a hard time with the syntax as using a variable is the only thing that prevents this from working. When I put in real values, it works fine.
function testScript(fill) {
choice=document.form1.column.value;
alert (fill);
alert (choice);
for($i=0;$i<fill;$i++){
document.form1.choice[$i].value=document.form1.copy.value;
}
}
Fill (tested by the alert) provides me with the number of rows in the table and works fine. Choice is my select (drop down) box. If I type in "document.form1.make[$1].value= it fills what I type in every row of the make column. If I choose make in the select box, choice does say make as indicated by my test alert.
Any ideas how to use the variable correctly in the for loop?

If I understand you correctly, the syntax you are looking for is:
document.form1[choice][$i].value=document.form1.copy.value;
In a general sense, to access a property "prop1" of an object obj you can use two syntaxes:
obj.prop1
// or
obj["prop1"]
With the square bracket syntax you can use any expression as long as it evaluates to a string that is the name of the property you want, so:
var x = "prop1";
obj[x]
// or
var x = "pr", y = "op1";
obj[x + y]
...are both going to access the same property as obj.prop1.
Note also that you should declare your choice and $i variables with the var keyword (as in my examples) or they will become global variables.

function testScript(fill) {
choice=document.form1.column.value+'[]';
for($i=0;$i<fill;$i++){
document.form1.elements[choice][$i].value=document.form1.copy.value;
}
}
Updated
view sample here:
jsfiddle link

Related

I need to throw a pop up box based on a selection from a dropdown box that meet a range of criteria

I am trying to throw a pop up box when a selection is made on a drop down box, and the selection meets a range of criteria. (The dropdown box is created from a coldfusion output query). I am new to Javascript so I don't know what I am doing wrong. My code is as follows...
function secondoccupantcheck(obj){
qtenantid = new Array(#ValueList(qRecurring.iTenant_ID)#);
qoccupancy = new Array(#ValueList(qRecurring.ioccupancyposition)#);
qdescription = new Array(#ValueList(qRecurring.cdescription)#);
for (i=0;i<=(qRecurring.length-1);i++){
if ((obj.value ==qtenantid[i]) && (qoccupancy[i] == 1) && (qdescription[i].indexOf("Second Resident")>=0))
{
alert('Resident will be second occupant and occupancy will be zero');
break;
}
}
}
If an occupant in an assisted living house (iTenant_id) wants to move to another room and is currently the main tenant in his or room (iOccupancyposition =1). If he or she will be the second tenant in the room he or she wants to move to, I need to throw an alert box with a message. I can't seem to get it to work. Any help will be appreciated.
A few quick things:
I am assuming you have your JS code surrounded by a CFOUTPUT to
get actual values on client side.
Another assumption include number of values will be same in all
three fields viz. iTenant_ID, ioccupancyposition and
cdescription. If this is not the case or there are consecutive blank values then this logic will not work!
For qdescription you need to use quotedValueList() function
instead of valueList() otherwise browser will throw a JS error.
For the for loop the length should come from qtenantid.length
instead of qRecurring.length OR you need to change your code to: for (i=0;i<=(#qRecurring.recordCount#-1);i++){
Your JavaScrip function is using parameter as an obj and use only
one value out of this object. Why you are passing an object? Pass only the selected value and call is something like val and use it in if condition like: if ((val ==qtenantid[i]) && (qoccupancy[i] == 1) && (qdescription[i].indexOf("Second Resident")>=0))
There are more things that you can check for error handling. Hope this helps.

Javascript set attribute using variable

I'm unsure of the syntax here, but the code I have so far is this... (Note: I am passing the id's of three textboxes in the form '#begmile','#endmile','#totmile', and I want to set the value of the 'totmile' checkbox to endmile-bigmile)
function subtract(begmile, endmile, totmile){
y=$(begmile).attr('value');
z=$(endmile).attr('value');
y=z-y;
$(totmile).setAttr('value',???);
}
I'm not sure if my syntax here so far is correct, but assuming it is (that y is properly set to endmile-begmile, how do I use setAttr to set the value of totmile to the value of y?
This is the correct syntax:
var href = 'http://cnn.com';
$(selector).attr('href', href);
your last line isn't calling the right method:
$(totmile).setAttr('value',???);
should be:
$(totmile).attr('value',???);
e.g.
$(totmile).attr('value', y);//set the value to the variable "y"
you can also call .val(); instead to easily get the value of a field, or .val(newValue); to set the value.
also note that if your values for "y" and "z" are not actually representing numbers you'll get a weird result.
The value attribute refers to the default value for the textbox, not the current one. The current one is stored in the value property.
function subtract(begmile, endmile, totmile) {
document.getElementById(totmile).value =
document.getElementById(endmile).value - document.getElementById(begmile).value;
}
This also removes the need for jQuery, since the JavaScript Sledgehammer is far too excessive for this job. To make sure it works, just remove the # when you pass IDs to the function.

proper coding with array.push

I've found some code on a site and been tinkering with it a little. It involves some functions to add and delete students (the add code is below) from an array - into a value field. I can't figure out why in tarnations we need this extra piece of code, however.
Here is the js code:
var students = ['Paulie', 'Nicole', 'Kevin', 'Mare'];
function addClick(){
var addRemove = document.getElementById('addRemoveStudent');
var studentsBox = document.getElementById('studentsBox')
students.push(addRemove.value);
addRemove.value = '';
studentsBox.value = students.join(', ');
}
My question is: Why do we need the addRemove.value = ''; line? I've tested it without that code and it still works fine. Is there a reason we need that?
I can send more code including the HTML but didn't what to overwhelm anyone with the volume.
Thanks so much in advance!
-Anthony
It's not necessary. I guess semantically it means to clear the addRemove box first before replacing the value.
It's optional, but it's simply to clear the text box so the user can enter a brand new value if they want to run the function again.
To clear the value of the addRemoveStudent ( I think it is a input type="text") Just for it, It is not needed in the array. Just to clear the value of that control.
Presumably addRemove is an input element. Setting the value property of an input element to an empty string '' means that the input is emptied: it will have no text in it.
My guess is that this function is run when a button is clicked, so it adds a new student to the array, updates the studentsBox field with the right data, and clears the input element so you can add more if the user wishes to do so.

Switching HTML menu value before submit?

So I have a menu with a list of every country and its abbreviation. I want to send the full name (the text of the menu option) instead of the value. So I tried to make a function, switchval(), to do this but it did not switch the values. Any ideas?
function switchval(){
var countries = document.getElementById('countries');
countries = countries.options[countries.selectedIndex].text;
document.getElementById('countries').value = countries;
}
Set the value of the option element. I changed the variable names so they make more sense. Please consider your coding style and use good variable names, and don't use a variable twice for a different datatype (that is insane). Also, setting the value of the option element is just plain wrong, I felt dirty typing this.
function switchval(){
var selectEl = document.getElementById('countries');
var optionEl = selectEl.options[selectEl.selectedIndex];
var country = optionEl.text;
optionEl.value = country;
}
I'll second what buddhabrot showed and said - changing the value property is wrong and might not be supported in all browsers.
I would use a hidden element and set the text property into that, changing the name of the select element to something like "countries-select" and making the hidden element "countries".
That way when your form posts, it will have the proper "name" for the form processor, plus you'll have a reliable method in your code.

how to capture the mouseover element?

i am developing an autocomplete feature.but i am facing one problem there...
when i click on the suggestion box one of the results will not enter into the suggest html box...
function handleOnMouseOver(oTr)
{
deselectAll();
oTr.className ="highlightrow";
position = oTr.id.substring(2, oTr.id.length);
updateKeywordValue(position);
}
can you plz tell the solution
thanks
function updateKeywordValue(oTr)
{
var oKeyword = document.getElementById("keyword");
var strKeyword="";
var crtLink = document.getElementById("a" +oTr.id.substring(2,oTr.id.length)).toString();
crtLink = crtLink.replace("-", "_");
crtLink = crtLink.substring(0, crtLink.length);
oKeyword.value=unescape(crtLink.substring(googleurl.length, crtLink.length));
strKeyword=oKeyword.value.toString();
if (oTr.id.substring(2,oTr.id.length)==0)
{
oKeyword.value=strKeyword.substring(3,strKeyword.length);
}
selectedKeyword=oKeyword.value;
}
you should get rid of the second parameter in the substring() method. Since you just want the remainder of the string, I'm guessing, that is the default if you don't set a second value.
position = oTr.id.substring(2);
My guess is that you are getting the value of the keyword from the id, and pushing that into the input box, right? If that's the case, we'll need to see more of your code. Specifically, I'd like to see the updateKeywordValue function and I'd also like to know if the text that they are hovering over is the text you are trying to send the input box. If so, you could probably simplify the whole thing and go with something like:
function handleOnMouseOver(oTr)
{
deselectAll();
oTr.className ="highlightrow";
keywordbox.value = oTr.innerHTML;
}
But this is based on the assumption that the only data inside the hovered row is the text, and no other html. And I had to make up a name for your input box.
But if this way off, this is because we need more information to see the real problem.

Categories