I have two span's which contain a HTML text box with same id say "field1". Based on a drop down value, only of these two span's are shown in the screen at a given time. Either one of the span's is shown or none of them are shown.
I am using .hide(); and .show(); in prototype js to show and hide these span's based on the drop down value. But whenever I try to get the value by $F('field1'); on submit, I only get the first HTML text box's value(which is empty).
Is there a way I can solve this to get the value of visible HTML text box value?
id should be unique within a page.
I am assuming you have different dropdown values. If so, assign different id's to these spans and use selected dropdown value to pick one of them.
Use class. ID for an element should be unique as it's an ID ;)
select all elements with specified class name. you will get an array of elements having specified class name.
var eleCollection = document.getElementByClassName("anyClassName");
After this, u can loop through this array of elements and get their values
for(element in eleCollection) {
var thisValue = element.getAttribute("value");
console.log("Element: ",element," value: ",value);
}
Related
I have an input[type=range], user can select a value (for example, from 0 to 1000), this is kinda price filter, also I have several divs each one with it's own pricevalue. I need div to be shown or hide depending on input values. How to do this with VanillaJS?
Is this hardcoded, or are they dynamic divs? Have you tried just getting the value of the input and hiding the divs that are required?
if(input.val < 1000){
var divToHide = document.getElementById("priceMid");
divToHide.style.display = 'none'; // Hide
}
if you have multiple divs, give each one their own attribute with the value, and then you can iterate over them and only hide the ones above/below a certain value. This answer has more in detail Show/hide 'div' using JavaScript
I have a table with two columns. And i can't change it. In the left column there are checkboxes, their id's and names are made from this pattern - id="selected[0]" and so on.
In the right column there are only anchor tags with text inside.
I need to check if checkbox next to specific cell with specific text is checked or not.
You can use jquery to find a cell containing a specific text.
e.g. if text is 'hello world' than you can do a search for nodes and go to next element to it like this
var checkBox = $("td:contains('hello world')").next(); // to go to next, use prev() to go to previous element to the cell
var isChecked = checkBox.is(":checked"); // to check if checkbox is checked
The following classic report which when we select specific row pops up with new modal region called addExtraDetails with some data grabbed from row and some new additional info required from user:
When (+) is being clicked the new modal region pops up, with populated values taken from the report row. So: in Column link I put:
javascript:function_to_add_to_basket('E',#ID#, 'Extra#ROWNUM#', #PRICE#,'DUMMY');
Then external js function is responsible for passing information. The problem is it does not refresh every time (+) is populated instead it keeps values of the first input.
I found better solution(and cleaner), upon clicking (+) Column Link is passing:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
javascript:$s('P4_SET_TYPE','E');
javascript:$s('P4_SET_OBJECT_ID','#ID#');
javascript:$s('P4_SET_ELEMENT_ID','Extra#ROWNUM#');
javascript:$s('P4_SET_COST','#PRICE#');
javascript:$s('P4_SET_DISCOUNT','DUMMY');
javascript:openModal('addExtraDetails');
Now it updates everytime when we select various rows HOWEVER since we have dropdown javascript grabs all possible value of Quantity column so for this code:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
the output is: '012345678910'.
How can I pass all values to modal region and make it to work with new values every time its being called ?
You need to retrieve the value of the select list when you click the modal button. The value is not static, unlike the other values. The substitution strings are replaced with their value when the page is rendered.
It isn't really necessary to do all those item sets if all you want to do is use them in a javascript function. Your first idea was probably just as good but I'll just run with openModal.
First, determine how to target the select list. You did not specify whether your report is a wizard-generated tabular form or a manual tabular form (ie used apex_item to make the select list). You could either target the select list by the name attribute, which refers to an array, or select by header of the column. Also see this article.
Eg, with the column name for the select list being QUANTITY, selecting the list would be:
td[headers=QUANTITY] select:visible
Alternatively, if you determine the array you can be more precise in targetting the element. Eg if the NAME attribute is set to f02 then you could select the select lists with
input[name=f02]
Then modify the openModal function to select the list value on the same row as pThis - which would be the triggering element, the anchor :
function openModal(pThis, pMethod){
//fetch the value of the select list on the same row
//I use the second method of selecting here
var lListValue = $(pThis).closest('tr').find('input[name=f02]').val();
...
}
You'll also need to adjust your call to openModal:
javascript:openModal(this, 'addExtraDetails');
Solved by #Grundy, solution at bottom of post
I have a form with a radio option where the elements are selected programmatically and without the user directly clicking on the radio element.
var $elem = $("input[name=type][value^=foo_]"); // Select the element with name "type" where the value starts with "foo_" (assume only one value is ever found)
if ($elem.length > 0) // If element is found then toggle the checked value of the radio value
{
$("input[name=type][checked=checked]").attr("checked", false); // Uncheck all existing checked items
$elem.attr("checked", true); // Check the found element from before
}
This works, I can see the attributes change in Chrome's developer tools. The previous checked input is unchecked and the appropriate item becomes checked. This works every time specifically works multiple times (I'll explain why that's relevant later).
Next I hide all the unchecked radio buttons and show only the checked one.
$("input[name=type] + label").hide();
$("input[name=type]:checked + label").show();
This works the first time an input is selected. All the unchecked inputs will be hidden and the checked one will be unhidden. If the input is selected a second time (either immediately again or after other options have been selected in between) then all of the inputs are hidden including the checked one.
If I check the number of matched elements for $("input[name=type]:checked + label") it returns 1 for the first time and 0 for the second time meaning it won't be selected only after the second time. I feel like this is because the checked attribute has been changed dynamically at that point but that may not be the cause of the problem.
EDIT - Here's a Fiddle
fiddle Clicking on the gray box will show you its normal behavior when changed by the user clicking on the values. Each value can be selected multiple times in any order but if you click the text at the bottom (they're poor looking buttons) it will change the form programmatically. It only works for the first time, it does not seem to care if it was selected by the user previously.
Solution - Credit #Grundy
Since I know the $elem object I found earlier is the object being changed I can reference it directly instead of trying to search for an element with the checked attribute. So I use this:
var $elem = $("input[name=type][value^=foo_]"); // Created before all the changes
$elem.next("label").show(); // Referenced after all the changes
Instead of using this:
$("input[name=type]:checked + label").show(); // Referenced after all the changes
try use
$elem.next("label").show();
instead of
$("input[name=type]:checked + label").show();
because $elem is checked checkbox that you find
I have a parent page where a select tag is there. It has a number of options. Now the user can select one of the options.
But the problem is the select tag doesnt have an id instead it has a name which is generated in runtime.
Now i want to fetch the selected value from child page javascript.
Can anyone please provide me the pointers for this?
Given the select element sel, you would get that as follows
var idx=sel.selectedIndex;
var value=sel.options[idx].value;
You could obtain the sel element by giving it an id and using document.getElementById(), or via document.forms['formname'].elements['elementname']