I'm having problems getting this code to work. I can do a static search using the 'q', 'bpm' or 'genres' parameters in SC.get(). However when I try to make it dynamic with a variable ('category')...the values are passed off correctly but the performed search doesn't match.:
function getTracks(){
query = document.getElementById('search').value;
category = document.getElementById('category').value;
SC.get('/tracks', { category : query}, function(tracks) {
console.log(query);
console.log(category);
... rest of search code
}
Inside HTML:
<form>
Search by Title: <input type="text" name = "search" id = "search">
<select id = "category">
<option value = "genres">Genre</option>
<option value = "q">Title</option>
<option value = "bpm">BPM</option>
</select>
<input type="button" onclick = "getTracks()" value="Submit"/>
</form>
Is there something I'm missing? Console.log catches the correct values for both 'search' and 'category' values but the API is returning as if they are null.
In your example the { category: query } is assigning category as a key name, not taking the variable category and assigning that as the key name. This is a bit of an inconsistency in Javascript.
You want to do this:
parameters = {};
parameters[category] = query
SC.get('/tracks', parameters, function(tracks…
Related
This a sample of the dropdowns using select that I have
<label class="form__label" for="country"> Country Of Residence</label>
<select id="country" class="form__input" name="country"/>
<option value="null">Select Country</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="Bahrain">Bahrain</option>
<option value="Kuwait">Kuwait</option>
<option value="Oman">Oman</option>
</select>
The value is stored in the database as a 'String'.
I would appreciate some help in understanding the best way forward for 2 things
On Load
The string value from the database should be the option displayed in my dropdown. And if for some reason the string value in the database does not match, then the 'Select Country' option should be displayed.
On Change
The selected value should be the value that's sent to the database as a String. The functionality for this is already implemented but earlier I was using a input of type=text .. So what type of changes are needed to send this value now from a select field.
I've researched on the net but the more I research the more I get confused. And most answers seem to be jQuery solutions. I am looking for some help with Vanilla Javascript. Somethings I need to get clarity on is 'Do I need to have a hidden field to store the value and send and receive from database?' .. I am really confused with the information I've researched.
Any help would be appreciated.
Get select element value on event using pure JavaScript, Try this and get value.
var select_element = document.getElementById('country');
select_element.onchange = function() {
var elem = (typeof this.selectedIndex === "undefined" ? window.event.srcElement : this);
var value = elem.value || elem.options[elem.selectedIndex].value;
alert(value);
// your another required code set!
}
After a couple of days of struggling, I am using this solution. If this is overkill and there's a simpler approach, please do share in comments.
So I first identified the select element
const country = document.getElementById('country');
Then created a function as below
const displayCountry = function() {
//CREATE ARRAY OF ALL OPTIONS
const optionsArray = Object.entries(country.children);
console.log(optionsArray);
// GET NAME OF COUNTRY FROM SELECT FIELD
const nameOfCountry = country.getAttribute("value");
console.log(nameOfCountry);
// FIND OPTION WITH THE SAME COUNTRY NAME
const option = optionsArray.find(
(option) => option[1].value === nameOfCountry
);
// UPDATE OPTION FIELD BY SETTING ATTRIBUTE OF SELECTED
option[1].setAttribute("selected", true);
console.log(option[1]);
};
It can be shortened as below
const displayCountryShortened = function() {
Object.entries(country.children)
.find((option) => option[1].value === country.getAttribute("value"))[1]
.setAttribute("selected", true);
};
I have this that takes the value and send it to my backend along with others in a form
<select
v-model="formData.account_bank"
id="branch"
#change="getbranch"
>
<option v-for="bank in selectBank" :key="bank.id" :value="bank.code">{{
bank.name
}}</option>
</select>
but before it is sent I need to get some data to populate a second selectbox using bank.id which I should have as :value = "bank.id" in the code above.
To get the value to make the api call that populates the second selectbox I just do
var branch = document.getElementById('branch').value;
and use it in the API call.
But here I need to get the bank.id to make the first api call that populates the selectbox and still have the bank.code there as form data to submit.
I have thought about getting the key using javascript which has the bank.id. But can not figure how or a different way it should work.
One solution to this problem is to bind the entire bank object to your <select> model.
Then you can use its id to populate your other select options and its code to construct your form data payload.
For example
<select
v-model="selectedBank"
id="branch"
#change="getbranch"
>
<option v-for="bank in selectBank" :key="bank.id" :value="bank">{{
bank.name
}}</option>
</select>
data: () => ({
formData: {
// whatever you originally had here
},
selectedBank: {} // empty object or perhaps a default bank
}),
methods: {
getBranch () {
const bankId = this.selectedBank.id
// make API call, etc
},
submitForm () {
// build form data
const formData = {
...this.formData,
account_bank: this.selectedBank.code
}
// submit form, etc
}
}
See https://v2.vuejs.org/v2/guide/forms.html#Value-Bindings
My goal is grab the return value of a javascript function an then pass as spring path variable
I tried to do this code:
The dropdown, populate data that the user want to pick up
<label for="cust">Select a customer</label> <select
id="cust" class="form-control">
<option th:each="customer: ${customers}"
th:value="${customer.id}" th:utext="${customer.name}" />
</select>
The script, It get the selected customer
<script>
function getSelected() {
var cust_id = document.getElementById("cust").value;
return cust_id;
}</script>
The button, This is where I been lost. How to send this cust_id to my controller with this th:href?
<input type="button" class="button form-control btn-primary"
th:value="Next" onclick="getSelected()" th:href="#{/locate/{id}(id=${cust_id})}">
My question is how to pass cust_id as parameter?
If there is a easiest way to do this, please show me how
I had a similar situation. This is how I implemented it:
$('#cust').bind('change',function() {
var custid = $(this).children("option:selected").val();
alert("You have selected the Customer with id - " + custid);
window.location = '/myAppURL?pareaName='+ $(this).val();
});
It means to pick a value from a select (option) I had to bind it with the change event (I used JQuery). Not sure if it fits your "exact" requirement but hoping you got the idea.
I am trying to trim some data from a select drop-down in a form just before it is submitted. The problem is the value is turning to null instead.
<form>
<select name = "test" id = "dropdown">
<option value = "userId_1">User 1</option>
</select>
</form>
Submit
scheduleForm.submit(function (e) {
var user = $('#dropdown').val();
user = user .replace(/userId_/g, '');
$('#dropdown').val(user);
$.ajax(..........
I am guessing I cannot alter the value like this?
you may try this:
scheduleForm.submit(function (e) {
var value= $('#dropdown').val();
$('#dropdown').val(parseInt(value.replace(/\D/g,'')));
user = $('#dropdown').val();
$('#dropdown').val(user);
$.ajax(..........
In dropdown you can select only those options which exists in the option lists: Suppose you have a drop down with option values 2,3,4,5 then you can not set the value of the dropdown to 10. You must have 10 in the option list. Why don't you do the following:-
scheduleForm.submit(function (e) {
var user = $('#dropdown').val();
user = user .replace(/userId_/g, '');
Now use the variable "user" in your ajax instead of the $('#dropdown').val(). I think this may help you.
To begin with, I'm new to Javascript.
I have a form with a select element with various options and I do not have access to change the form. There are no id's to the options, but just the values as shown in the code below.
<form>
<select class="country" name="country" id="countryid">
<option value="usa" selected="selected">USA</option>
<option value="canada">Canada</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
</form>
My goal is to populate the field in the above form automatically based on the url parameters.
For example, www.example.com?country=china should populate China in the form field. The following is the javascript code:
<script>
var param1var = getQueryVariable("country");
function displayresult(){
//document.getElementById(param1var).selected=true; //if there was id given in the form field
//cannot use document.getElementByValue(param1var).selected=true;
//document.querySelectorAll('input[value=' + param1var + ']').selected=true; does not work
}
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
</script>
I cannot use document.getElementById(param1var) because there is no id.
Javascript does not support document.getElementByValue(param1var).
document.querySelectorAll is not working.
Is there a way that I can reference the element using the option value?
Thanks!
You can just do it this way by setting the value of the select element. Also note that value is case sensitive, plus make sure that the function displayresult runs on onload or after the element appeared in the html.
document.getElementById("countryid").value=param1var;
Demo