I have the following select box and I'm trying to modify the All Product Categories text.
<select class="postform" id="ofproduct_cat" name="ofproduct_cat">
<option selected="selected" value="0">All Product Categories</option>
<option value="28" class="level-0">Los Bengala</option>
<option value="27" class="level-0">Merchandising</option>
<option value="29" class="level-0">The Faith Keepers</option>
</select>
I'm using the following code:
var selectFunction = function() {
document.getElementById('ofproduct_cat').options[0].text = 'Productos';
}
But it doesn't seem to work. It is linked from the header in a separate file.
I'm sure, it is function loading problem.
your code is correct only.
Try to load the script in page loading .. Like below code..
$(function(){
document.getElementById('ofproduct_cat').options[0].text = 'Productos';
});
Another Way
Create the function:
var selectFunction = function() {
document.getElementById('ofproduct_cat').options[0].text = 'Productos';
}
Call the Function:
$(function(){
selectFunction();
});
Because you said linked the file from separate file.
Related
I'm trying to create a cookie to store a value from a select form field - I'v been trying different options but unsuccessful everytime 😥 - can someone please help me?
The site is currently on Drupal but I'm wanting to add via Tag Manager, so any help with vanilla JS would be amazing
The Hubspot form in question can be located: https://www.huddle.com/get-started
The select field is : Comapany Size
The value I'm trying to target is the first option: 1-10
This is my code:
<script>
var formField = document.querySelector('form["name="size_of_organisation__c"]').value;
var formValue = "1-10";
var cookieName = sizeOfOrg;
var cookieValue = smb;
if (formField == formValue) {
document.cookie = "cookieName=cookieValue";
}
</script>
Any help would be much appreciated
Humm,
it seems you are using react, so it will be definitely nice to create this process in a react fonction inside your form component, etc.
I'm not really sure of your needs, but this code retrieve the value of the dropdown on change and add it in a cookie :
<html>
<body>
<form>
<select name="size_of_organisation__c">
<option value="" disabled="" selected="">Please Select</option>
<option value="1-10">1-10</option>
<option value="11-50">11-50</option>
<option value="51-200">51-200</option>
<option value="201-500">201-500</option>
<option value="501-1000">501-1000</option>
<option value="1001-5000">1001-5000</option>
<option value="5001-10000">5001-10000</option>
<option value="10001+">10001+</option>
</select>
</form>
</body>
<script src="./temp.js"></script>
</html>
//selector to select dropdown. return an array so take the first one
var select = document.getElementsByName("size_of_organisation__c")[0];
console.log(select);
// add event handler to update the cookie each time you change the select
select.addEventListener("change", function() {
document.cookie = "sizeOfOrg=" + select.value;
console.log(document.cookie);
});
edit: add the html and the console.log() to debug
I've created in an html webpage a dropdown with four options. It worked well but I realized that when the page was refreshed, the value would reset itself to the first option. Since I wanted the user's choice to be kept in memory, I added a javascript code snippet that I found somewhere.
It works very well, except that at the initialization the default value of the dropdown is an empty field.
I would need the first option to be displayed at initialization.
I guess it's easy but I don't know JavaScript at all. Could you please help?
Here is what the code looks like:
<select name="options" id='dropdown'>
<option value="1">1st Option</option>
<option value="2">2nd Option</option>
<option value="3">3rd Option</option>
<option value="4">4th Option</option>
</select>
<!-- The script below helps to keep in memory the dropdown value after the page has been refreshed -->
<script type="text/javascript">
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);
$('#dropdown').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
</script>
I think you should check if SessionStorage Key exists or not.
I have created working example of your code : https://jsfiddle.net/vieckys/Lwv1n8p7/7/
Here is HTML Markup:
<select name="options" id='dropdown'>
<option value="0" selected>--- select here ---</option>
<option value="1">1st Option</option>
<option value="2">2nd Option</option>
<option value="3">3rd Option</option>
<option value="4">4th Option</option>
</select>
and JS Code
let selectedItem = sessionStorage.getItem("SelectedItem");
if (selectedItem) {
$('#dropdown').val(selectedItem);
} else {
$('#dropdown').val(0);
}
$('#dropdown').change(function() {
let dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
Let me know if you face any issue with this.
Based on your scenario, you can explicitly trigger the change event after the value is set for the dropdown using trigger('change') on the select dropdown. This will run the change function and will save the initial value in the sessionStorage. So, add this line of code, $('#dropdown').trigger('change') something like:
<script type = "text/javascript" >
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);
$('#dropdown').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
$('#dropdown').trigger('change'); // trigger the change explicitly
</script>
I applied the modal function I found in this article. It is a jQuery modal that puts the source file in an <iframe> and display as modal. Now, the problem is that I need to return to value to the background page from the modal after the user selected an item.
Here is some jQuery code: (This is were the page is loaded)
var openMyModal = function(source)
{
modalWindow.windowId = "myModal";
modalWindow.width = 480;
modalWindow.height = 405;
modalWindow.content = "<iframe width='480' height='405' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'></iframe>";
modalWindow.open();
};
Posible code in Modal:
<select name="selItem">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
<option value="item4">Item 4</option>
</select>
<input type="button" id="btnSel" name="btnSel" value="Select" />
There is a button in the modal display which when clicked, it will pass the value to an input text back to the background page then remove the modal.
How can I achieve this? Thank you very much!
Possible solution is to add click listener on the button of the model after it opens. here is some code:
modalWindow.open(function()
{
//callback
$('#btnSel').on('click', function()
{
//do what you need here.
});
});
Note:
Make sure there is some way to run a callback function like I suggested.
from the documentation you can add your logic in the open option:
var modalWindow = {
....
open:function()
{
//your stuff - click listener
}
};
I have here two select boxes. The process is like this http://www.w3schools.com/ajax/ajax_database.asp. What I need to display only the value between the two select boxes. How I can do that in one function? Any help will appreciate.
<script>
function showUser(str) {
var $txtHint = $('#txtHint');
if (str=="") {
$txtHint.html('');
return;
}
$txtHint.load('ajax.php?q='+str)
}
</script>
<select name="customers" id="customers" onchange="showUser(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
<select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
First, take the function that you're calling inside change(), and declare it separately. Then, call .change() on that function twice.
E.g.
$(document).ready(function() {
var myChangeFunction = function() {
var city = $(".city").val();
var customer = $("#customer").val();
if (city && customer) {
// do something only if both are set
}
};
$(".city").change(myChangeFunction);
$("#customer").change(myChangeFunction);
});
I think I understood what you need.
You need both selects to call the same function onchange.
That function will get some info, and load it. You need it to load it in different places regarding which was the select that changed.
If that's what you need, check this fiddle:
http://jsfiddle.net/hige/4878B/
Remember to uncomment the .load() line, and delete the console.log() one.
Hope it helps!
This is really odd, but I am probably missing something simple. I have a simple select statement where a user can choose a value.
onChange calls a function getDrop2() which currently I am trying to get it to alert me which option is chosen.
my html is:
<select onChange= "getDrop2()" id = "drop1" >
<option value="0">All</option>
<option value="1">Alphabetical</option>
<option value="2">Brewery</option>
<option value="3">Style</option>
</select>
My Javascript is:
function getDrop2(){
var choice = $("#drop1").val()
alert(choice);
}
The output of the alert statement is just blank.
In jQuery, you're better off doing something like:
<select id = "drop1" >
<option value="0">All</option>
<option value="1">Alphabetical</option>
<option value="2">Brewery</option>
<option value="3">Style</option>
</select>
With the following JavaScript:
$(function(){
$('#drop1').change(function() {
var choice = $(this).val();
alert(choice);
}
});
The idea is that jQuery is now attaching the change function automatically to the select with the id of "drop1" By using this pattern, you've decoupled the HTML from the JavaScript that's doing the business logic.
Although what others have selected is a better approach. My answer is just to tell you why your code is not working
Try this
var choice = $('#drop1 option:selected').val()
Instead of
var choice = $("#drop1").val()