I am getting select box value like code below:
$(document).on('change','.test',function(){
var val = $('option:selected',this).val()
alert(val);
});
How can I get that selected value in below function:
function test_data()
{
//get select box value here
}
you could do like below :
var value = $('select.test').val();
alert(value)
or you can use on change event
<select onchange="test(this.value)" ></select>
<script>
function test(value) {
//value is selected option value
}
</script>
jsfiddle
It's depend -
1. You can easily pass the value to function.
$(document).on('change','.test',function(){
var val = $('option:selected',this).val()
test_data(val);
});
function test_data(val) {
//get select box value here
}
2. you can store value inside globe variable.
var gval;
$(document).on('change','.test',function(){
var val = $('option:selected',this).val()
gval = val;
});
function test_data() {
alert(gval)
//get select box value here
}
3. To get value using select element.
function test_data() {
var value = $('select.test').val();
alert(value)
}
You can call the metod test_data on change event of select.
$(document).on('change','.test',function(){
var val = $('option:selected',this).val();
test_data(val);
// alert(val);
});
function test_data(val)
{
alert(val)
}
See Fiddle
OR
$(document).on('change','.test',test_data);
function test_data()
{
var val = $('.test option:selected').val();
alert(val)
}
Fiddle
Related
I'm working on saving textarea value on browser refresh. When there's a change to textarea by keyboard events, the value gets stored in local storage. However, When the textarea value gets changed indirectly...like button clicks, the value doesn't get saved. That's the problem, So, I changed my event handler from onkeyup to onchange. Still, This remains a problem. Do anyone have a better idea for this. Here's the code -
<textarea id="thetext" class="" value="Write some value, and off focus this input. Refresh the browser, and see the text getting saved." onchange="saveValue(this);"></textarea><br/><br/>
<button id="thebutton" onclick="change()">Change</button>
<script>
document.getElementById("thetext").value = getSavedValue("thetext");
function saveValue(e){
var id = e.id;
var val = e.value;
localStorage.setItem(id, val);
}
function getSavedValue (v) {
if (!localStorage.getItem(v)) {
return "";
}
return localStorage.getItem(v);
};
function change() {
document.getElementById("thetext").value = "This value doesn't get saved if there's no keyboard action. But I want this to get saved on button click."
}
</script>
<style>
textarea{height:100px;width:100%}
</style>
Edit - Above code is working well on my environment.
you can do in easy way
function change() {
let newValue = "This value doesn't get saved if there's no keyboard action. But I want this to get saved on button click."
var event = new Event('input');
thetext.dispatchEvent(event);
// or
// document.getElementById("thetext").value = newValue;
// localStorage.setItem("thetext", newValue );
}
or complex usinng Object.defineProperty
thetext = document.getElementById("thetext")
thetext.value = getSavedValue("thetext");
function saveValue(e) {
console.log(e)
var id = e.id;
var val = e.value;
localStorage.setItem(id, val);
}
function getSavedValue(v) {
return localStorage.getItem(v) || "";
}
function change() {
document.getElementById("thetext").value = "This value doesn't get saved if there's no keyboard action. But I want this to get saved on button click."
}
function monitorValue(element, property) {
let descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), property);
Object.defineProperty(element, property, {
get: function() {
return descriptor.get.apply(this, arguments);
},
set: function() {
descriptor.set.apply(this, arguments);
// create and dispatch input event
var event = new Event('input');
element.dispatchEvent(event);
return this.value;
}
});
}
monitorValue(thetext, "value")
<style>textarea{height:80vh;width:100%}</style>
<textarea id="thetext" class=""
value="Write some value, and off focus this input. Refresh the browser, and see the text getting saved."
oninput="saveValue(this);
"></textarea><br/><br/>
<button id="thebutton" onclick="change()">Change</button>
So what you want is that, the <textarea> value be stored in the localStorage every time it's changed.
I'd prefer defining a setter property on the textarea.
var ta = document.getElementById('thetext');
Object.defineProperty(ta, 'savedValue' , {
set: (value)=> {
ta.savedValue = ta.value = value;
localStorage.setItem(ta.id, value);
}
};
thebutton.addEventListener('click', (evt)=> {
ta.savedValue = 'my sample click value';
});
ta.addEventListener('change', (evt)=> {
ta.savedValue = evt.target.value;
};
I am attempting to change a href link based on two different select tags changed
So far I have got it to append with 1 select tag, however i cannot get it to work with the other.
Any help or suggestions would be appreciated. Thanks
$('#to').on('change', function() {
var value2 = $(this).val();
});
var base_href="/converter/";
$('#from').on('change', function() {
var value=$(this).val();
if (base_href=="")
base_href = $("#cch-link").attr("href");
$("#cch-link").attr("href",base_href+value+'-to-'+value2);
});
You are defining the value2 variable in the context of the first handler, outside of that context the variable is undefined, you can define a global variable or:
var base_href = "/converter/";
function setHref()
{
$("#cch-link").attr('href', function()
{
var to = $('#to').val();
var from = $('#from').val();
return base_href + from + '-to-' + to;
});
}
$('#to, #from').on('change', setHref); // .change();
I'm trying to make a text based selection for my product variationon on my single product page.
I basically generate a p-tag for every option in every variation and use javascript to select the option in the default Woocommerce select dropdown. The option gets selected fine but the check_variations event doesn't get triggered.
Does anyone know how to trigger the check_variations event from my theme? The check_variations listener is in woocommerce/assets/js/frontend/add-to-cart-variation.js
JS
var ProductVariations = (function () {
function ProductVariations() {
this.$variationClickables = $('.variations .value p');
this.setupClickHandlers();
}
ProductVariations.prototype.setupClickHandlers = function () {
var _this = this;
this.$variationClickables.bind('click', function (event) {
_this.variationsClicked(event);
});
};
ProductVariations.prototype.variationsClicked = function (event) {
var $target = $(event.target);
var targetVariation = $target.attr('value');
$('option[value=' + targetVariation + ']', $target.closest('.variations')).attr('selected', 'true');
$target.closest('.variations_form').trigger('change');
};
return ProductVariations;
})();
Andreas!
Did you try this?
$('.variations_form').trigger('check_variations');
$.fn.fillSelect = function (data) {
return this.clearSelect().each(function () {
if (this.tagName == 'SELECT') {
var dropdownList = this;
$.each(data, function (index, optionData) {
var option = new Option(optionData.Text, optionData.Value);
if ($.browser.msie) {
dropdownList.add(option);
} else {
dropdownList.add(option, null);
}
});
// code for access "selectedindex"
}
});
};
Above is the code snippet for dynamically generating a drop down using jQuery.
I need to set selectedIndex property value dynamically for the purpose of showing the saved value earlier. I am going to insert that code into // code for access "selectedindex" place inside above code. So how can I set selectedIndex property for the dropdownList?
You should be able to set the selectedIndex property the same as any other.
Assuming that dropdownList is a HTMLSelectElement, dropdownList.selectedIndex = 5;, should work.
I'd do this in this bit of the code:
$.each(data, function (index, optionData) {
var option = new Option(optionData.Text, optionData.Value);
if (/* code to determine if this is the chosen one */) {
option.setAttribute("selected", "selected");
}
if ($.browser.msie) { /* etc */
You're setting the selected attribute on the relevant option.
How can I get text from textarea or textbox.
function myClickHandler() {
var app = UiApp.getActiveApplication();
var textbox = app.getElementById("TextBox1");
var text = textbox.text;
textbox.setText(text + "1");
return app;
}
After run of this function is in my textarea: "undefined1".
On googledevelopers help page https://developers.google.com/apps-script/class_textbox
is not getText method.
How can I get text from textbox?
It's not textbox.text. It should be textbox.value.
function myClickHandler() {
var app = UiApp.getActiveApplication();
var textbox = app.getElementById("TextBox1");
var text = textbox.value;
textbox.setText(text + "1");
return app;
}
Try this -
var text = textbox.value;
In order to pass a widget's value to a callback handler you must do two things:
Assign a name to the widget when you create it.
texbox.setName('foo');
Add the widget as a callback element to the server handler you create.
clickHandler.addCallbackElement(textbox);
If you've done that, then the value of the textbox will be passed in the event parameter of your callback function.
function myClickHandler(event) {
var textboxValue = event.parameters['foo'];
...
}