I'm using JavaScript (Google Apps Script to be precise) and I'm having some trouble with objects.
I have a var, formData, which is full of data passed back from an HTML form. I can happily access the values like this; exhibitions is the name of a select element;
formData.exhibitions.value
But I want to change the value from "*" to "ALL". I have tried all the following;
formData.exhibitions.value = "ALL"
formData["exhibitions"] = "ALL"
formData.element["exhibitons"] = "ALL"
and a few other versions of the above but nothing alters the value.
edit- cut down code, HTML form
<form>
Exhibition search <select id="exhibitionList" name ="exhibition">
<option value="*">All</option>
<option value="shoes">shoes</option>
</select>
<input type = "button" value ="Item Search" onclick="printSearch(this.form)"/>
</form>
and the function is
printSearch(formData){
if(formData.exhibition.value != "*"){
whereData.push(exhibition+"='"+formData.exhibition.value+"'");
}else{formData.set('exhibition','ALL');}
}
everything works fine I just can't seem to change the value past the ELSE statement.
What you're trying to do can't work. The value of a <select> has to be the value of one of its <option> elements. This is because the value is actually stored in the select's selectedIndex property. When you assign to formData.exhibition.value, it searches the options for one whose value matches this, and then sets formData.exhibition.selectedIndex to its position. If there's no match, it fails and doesn't change the value.
Since you have no <option value="ALL"> element, trying to set the value to that must fail.
Related
I'm trying to set the value of a hidden input field based on the value of a selected option from a select box
This is what I've tried.
HTML
<select id="track_type_selected">
<option value="0">51 Track 3m</option>
<option value="1">64 Track 3m</option>
<option value="2">103 Track 3m</option>
</select>
<input type="number" name="required_tracks_name" id="required_tracks_id" class="sku" sku="" disabled="">
Javascript
if ('#track_type_selected' == 1) {
'#required_tracks_id'.sku('TRACK3');
}else if('#track_type_selected' == 2) {
'#required_tracks_id'.sku('TRK30');
}else if ('#track_type_selected' == 3) {
'#required_tracks_id'.sku('TRACK-1033');
}
When the option is selected I want to set the value of the SKU.
Before i go on with the solution, i can understand that you have basic to zero knowledge about JavaScript.. make sure you understand how JavaScript syntax works then continue.
To get the selected option use this code:
var e = document.getElementById("track_type_selected");
var selectedIndex = e.options[e.selectedIndex].value;
selectedIndex variable should now include the current selected index. (1,2,3.. etc)
So you can do this:
if(selectedIndex==1){/* some code */}
Now, to get sku attribute (since you confirmed that you use jquery) you can do this:
$("#required_tracks_id").attr("sku");
Make sure you check .attr usage and edit it to your needs.
<select ng-model="myModel" id="searchAsset" class="search">
<option ng-repeat="asset in assettype" ng-click="assetclick()" value="{{asset}}"></option>
</select>
<select class="search" id="searchLevel">
<option class="chooseLevel" ng-repeat="level in levellist" value="{{level}}"></option>
</select>
While performing some logic on second dropdown, I want to fetch the selected value of the first dropdown or vice-versa. How can I do this?
I tried using $("#searchLevel").value and $("#searchLevel option:selected").text()
The direct answer to this question is to use the .val() method for jQuery like so:
var selectedVal = $("#searchLevel").val();
However, the slightly less direct, but true answer is that you should not be doing anything like this in an angular app - changes in the dom should only be affecting your view model.
When your using angular, jquery is really not required.
As per your code, The first select menu value will be stored in the ng-model attribute value i.e. myModel.
In your second select menu, specific the ng-model as well. You can just fetch the value of the drop down menu by calling ng-model name.
<select class="search" id="searchLevel" ng-model="secondSelect">
<option class="chooseLevel" ng-repeat="level in levellist" value="{{level}}"></option>
</select>
For example,
If you want to access the value inside your controller on change event, then
$scope.changeEventhandlerForFirstSelect = function() {
// $scope.myModel will contain the value
}
Similarly, for second select menu $scope.secondSelect will give that value.
try
$("#searchLevel").val();
with: $("#searchLevel option:selected").text() you get the text not the value.
//initial code
var selectInputs = document.querySelectorAll('option:checked');
var selectArray=[];
for(var i=0;i<selectInputs.length;i++)
{
selectArray[i]=selectInputs[i].value;//am doing this since I found out (from stackoverflow) that selectInputs contains a NodeList and in order to use it, it must be converted or saved as an array
}
//later stage manipulation code
var input_select= document.querySelectorAll('option:checked');
for(var i=0;i<input_select.length;i++)
{
input_select[i].value=selectArray[i];//I am trying to change the value of the <select> option
}
PURPOSE: User selects option in a form and data is saved in local storage.
I want to reflect the same when the form reloads. I am not working for a specific form so using Jquery seems futile(as it works with class or id and I don't know the id or class of any tag of the generic form)
PROBLEM:
The problem is that I wanna select the entire options set of tag and not just the ones that have been checked/selected.The code above sets the value of the default selected option to the one stored in local storage but doesn't reflect the change in the form. It always displays the default value though giving
alert(input_select[i].value);
reflects the internal change perfectly!
Guess I gotta answer my own question :-D
If you could see, there's just one silly change in the
//later stage manipulation code
ABOVE.
ANSWER:
var input_select= document.querySelectorAll('select');
for(var i=0;i<input_select.length;i++)
{
input_select[i].value=selectArray[i];//I am trying to change the value of the <select> option
}
Instead of
var input_select= document.querySelectorAll('option:checked');
It must be
var input_select= document.querySelectorAll('select');
REASON: I have been trying to assign the stored value into the option itself (the option tag) rather than the select tag as a whole.
WARNING: In the code
input_select[i].value=selectArray[i];
It could also be
input_select[i].value="Friday";
provided that you already have an option like that, else it would show a blank.
<select name="days" id=days">
<option value="0"> Friday </option>
<option value="1"> Monday </option>
</select>
works
<select name="days" id=days">
<option value="0"> Saturday </option>
<option value="1"> Monday </option>
</select>
doesn't work. Shows a blank.
In HTML, there are attributes like the selected attribute:
<option selected>This option is selected</option>
It's either present or not present, which translates to on/off (Boolean).
I can't find a way to create an attribute like this for an AngularJs directive. Is there any way?
An example would be:
<modal ng-show="modal.show" with-backdrop> // "with-backdrop" is a boolean attribute.
I read again your question and i was wrong. To archieve what you want, you should do the next:
HTML Element:
<modal id="myModal" ng-show="modal.show" with-backdrop>
And in your controller:
function somethingController() {
var modalElement = document.querySelector('#myModal');
// If you want to check that element have your attribute.
var isMyAttributeSet = modalElement.getAttribute('with-backdrop') !== null;
// If you want to set up the attribute.
modalElement.setAttribute('with-backdrop', '');
}
The setAttribute method requires 2 arguments (attributeName, attributeValue), but if you pass an empty string as second parameter, the attribute would be seen as you want, i have tested it in chrome console :)
It's going to be different depending on what you're doing. In your example, you want to know which option is selected. That would be found by checking the model for the <select> to see what's in it. For example:
<select data-ng-model="user.defaultThing"
data-ng-options="thing.id as thing.name for thing in thingCollection">
<option value="">None</option>
</select>
With this setup, any time the selection is changed, the thing.id is stored in user.defaultThing.
NB: The 'None' option I have there, allows for a null selection.
Now, if you were looking to see if a checkbox is checked, it's similar as you'd just see what's in the model it's tied to.
<input type="checkbox" data-ng-model="form.someOption">
When you go to process the form, just see if form.someOption is true or false.
The select values are confusing me. When the user edits a row in my app I clone a tag with jquery (called empty-X) and put it on a modal window so that the user can edit the values. At the same time I get a json object (data) from server and fill in the current fields on the modal window as it stands in the database :
empty_X.find('#id_deals-1-currency').val(data[0].fields['currency']);
Now when the modal shows, the user can see how the correct currency is selected in the dropdown.
Yet when I check the HTML for this element with Firebug, I get a different picture, nothing seems selected.
<select id="id_deals-1-currency" name="deals-1-currency">
<option selected="selected" value="">---------</option>
<option value="1">USD - $</option>
<option value="2">EUR - €</option>
<option value="3">GBP - £</option>
</select>
And yet when I send the form to the server, there are no validation errors and the currency is the same value as it was previously set through val(). Life is good.
While this works by itself, there is a problem. What if the user wants to get back to the edit mode and verify the currency once more before saving it?
In this case I can't load the values from the database any more. His previous local changes matter now. I have to clone the current record with currency inside back in the modal window, so the user can see what he had changed previously and verify it. The problem is now the user doesn't see the currency he had changed in the previous step. In fact he would see an empty dropdown instead.
What are my options here? Is there a way to set the selected flag to the actual selection rather than using val()?
When cloning a <select>, the option with the 'selected' attribute becomes the current option in the cloned object - instead of the actual current object (as per value attribute).
To counter this, you can find the currently selected option from the value returned by val() and then apply the selected attribute to it prior to cloning it. This way you wont need to set the value after cloning.
Demo: http://jsfiddle.net/DqADq/
Code: (.x1 is the <select>)
// simple cloning
$('.x1:first').clone().appendTo('.out');
// setting selected attr before cloning
var v = $('.x1:first').val();
$('.x1:first option').removeAttr('selected'); // remove 'selected' from all options
$('.x1:first option').each(function() {
if($(this).attr('value') == v) {
$(this).attr('selected', true); // apply 'selected' to current option
}
});
$('.x1:first').clone().appendTo('.out');