Switching HTML menu value before submit? - javascript

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.

Related

Can't access JavaScript variable inside function

I'm making an extension for selected text search in different search engines. One of the menu items changes if the selected string is a particular one. I have this done so far and it does what I want, except I can not make the "title" of the menu change. How do I give value to the variable "myTitle" in if statement inside the function?
Thanks in advance.
var myTitle; // if I give value here it does work, but I need the value based on the if statement bellow.
function myFunction(selectedText) {
if(selectedText.match (/someString|SomeOtherString/)) {
var myURL1 = 'https://someURL' + selectedText;
chrome.tabs.create({url: myURL1});
myTitle = "title1"; //I can not make the variable to get this value here
}else{
var myURL2 = 'https://someOtherURL' + selectedText;
chrome.tabs.create({url: topicCall});
myTitle = "title2"; //I can not make the variable to get this value here
}
}
chrome.contextMenus.create({
**"title": myTitle,** // this should change based on the selection
contexts:["selection"],
onclick: function (info)myFunction(info.selectionText);}
});
You have "cause and effect" mixed up. When chrome.contextMenus.create is called, myFunction has not executed yet and the value of myTitle has not been assigned.
Perhaps, you can use chrome.contextMenus.update, after the page is loaded. You could create the menu, with default titles, but with unique IDs. Then use the above method, based on whatever the "selectedText" is, and use the IDs to replace the titles.

Get current field name in to change display option?

I've looked all afternoon to try and find this one. Basically, I want get the name of the current text field and change the display value to noPrint if the text field value is "--". I'm running this as a validation script in a PDF. Any help is much appreciated!
if(event.value == '--')
{
event.target.name.display = event.target.name.display.noPrint;
} else
{
event.target.name.display = event.target.name.display.visible;
}
You have a couple of things a bit off.
event.value doesn't exist (you can check the available event properties)
If you want to get the value of the element that triggered the event you can do:
var elemValue = event.target.value;
If you want to get the name for the same element you can do:
var elemName = event.target.name;
To hide the element from printing, you can see this answer.

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.

Javascript variable in element name

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

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