Currently I have a basic javascript which will alert the value of a selection. I would like to tie this into a javascript function so instead of alerting the value, it replaces the value within the script.
<script type="text/javascript">
function cselect(){
var CID = document.getElementById('country').value;
alert(CID);
}
</script>
<select id="country" onchange="cselect()">
<option value="4242">US</option>
<option value="4243">Canada</option>
</select>
I would like to pass the option value into the script below in place of the static value. Any help greatly appreciated!
<script>// <![CDATA[
cii_EmbedProductLinks('Chairs','{{ prodID }}','4242', CI_LinkID);
// ]]></script>
Maybe something like this:
var sub = $("body").html().replace('4242',CID);
$("body").html(sub);
Related
I'm trying to change the value of an input based on what was selected on a dropdown menu, but it always returns "undefined". Here is the HTML:
<select id="dropdown">
<option id="AU">Australia</option>
<option id="CH" >Switzerland</option>
</select>
<input type="text" id="regionInput">
And the JS:
document.getElementById('dropdown').setAttribute("onchange","myFunction()");
function myFunction(){
var country = document.getElementById('dropdown').options[document.getElementById('dropdown').selectedIndex].text;
var region = document.getElementById('regionInput').value;
if (country == "Australia"){
region = 'test';
} else {
region = 'test 2';
}
}
Any help would be greatly appreciated !
It sounds like you're defining the function a local scope of another function. Code called from onXXX attributes is executed in the global scope.
You can use addEventListener and provide a function reference:
document.getElementById('dropdown').addEventListener("change",myFunction);
Notice that the event name doesn't begin with on, and you don't put () after the function name (that will call the function instead of passing a reference).
Try removing the quotation mark "" in myFuction() like this: document.getElementById('dropdown').setAttribute("onchange", myFunction() );
This question already has answers here:
onclick function runs automatically
(4 answers)
Closed 7 years ago.
I have a problem with a javascript function.
It runs by itself when the page loads even if it`s set to run .onchange
I have a select that looks like this:
<select name="make_brand" id="make_brand" class="form_tag dispB width_full">
<option value="" selected disabled>Please select</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Mercedes-Benz</option>
</select>
And my js looks like this:
// defining select fields
var brand = document.getElementById("make_brand");
// get values
function getSelectedValue(element, show_mark){
return element.options[element.selectedIndex].value;
}
// on select change
brand.onchange = getSelectedValue(brand, true);
When I refresh the page, the function runs automatically and I don`t know why. Can anyone help me with this?
I want the function to run on select change.
Your code is running your getSelectedValue function and then setting setting brand.onchange to it's return value. You can only set event handlers in that way if you do not need parameters.
You have two options for passing parameters to dom element events:
You can make an anonymous function like so:
brand.onchange = function(event){
return getSelectedValue(event.target, true);
}
Or you can add your event to your html element directly:
<select name="make_brand" onchange="getSelectedValue(this,true)" ...
this should do...
<html>
<head>
<script>
function init(){
var brand = document.getElementById("make_brand");
// on select change
brand.addEventListener("change", function(){getSelectedValue(brand, true)});
}
// get values
function getSelectedValue(element, show_mark){
return element.options[element.selectedIndex].value;
}
</script>
</head>
<body onLoad = "init()">
<select name="make_brand" id="make_brand" class="form_tag dispB width_full">
<option value="" selected disabled>Please select</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Mercedes-Benz</option>
</select>
</body>
</html>
you have to let the document load before adding a listener to an element in the document. Notice the body tag, I called my init() function within onLoad.
brand.onchange should be a function like this :
brand.onchange = function(event){
getSelectedValue(brand, true);
}
I am trying to pass value stored inside a div tag to a javascript function based on the onchange property of a drop down menu in HTML.
But nothing is being passed. Undefined error is shown.
Here my code:
Suppose $temp_c has a value 30.
<span id="temperature_div"><?php echo $temp_c; ?></span>
<label for="ddl_temptype"></label>
<select id="ddl_temptype" name="ddl_temptype" onchange="choose_temperature(this.value,temperature_div.value,temperature_div.name); ">
<option value="celcius" selected>°C</option>
<option value="farenheit">°F</option>
</select>
And JavaScript
function choose_temperature(conv, value, name) {
alert(conv);
alert(value);
alert(name);
}
Where did I go wrong??
In JavaScript you can't just use temperature_div as a variable and assume it will be the object with id temperature_div. There are functions for fetching elements from the DOM. In plain JavaScript: document.getElementById('temperature_div') will return the element. If you're using JQuery, then $('#temperature_div') will do a similar thing.
Edit:
Try this function:
function choose_temperature(conv) {
alert(conv);
var element = document.getElementById('temperature_div');
alert(element.innerHTML);
alert(element.attributes["name"].value);
}
Called by: choose_temperature(this.value);
Edit: Changed to use innerHTML and attributes["name"].value instead of value and name. I'm assuming that these are what are wanted.
First of all you have used the parameter 'value' which I think is a key word and better not to use.
and I am assuming you are referring to the 'name' html attribute in the 'temperature_div', which you have not defined. I am putting a name attribute just for the sake of understanding.
<html>
<script type="text/javascript">
function choose_temperature(conv, t_value, name)
{
alert(conv);
var div = document.getElementById("temperature_div");
alert(div.innerHTML);
alert(div.getAttribute("name"));
}
</script>
<label for="ddl_temptype"></label>
<select id="ddl_temptype" name="ddl_temptype" onchange="choose_temperature(this.value); ">
<option value="celcius" selected>°C</option>
<option value="farenheit">°F</option>
</select>
Use jquery instead, it is easier.
Get value inside a div as: $('#temperature_div').html() Or $('#temperature_div').text()
You can write onchange for a select box as:
$(document).on('change', '#ddl_temptype', function() {
// Write your function here
var div_value = $('#temperature_div').html();
var select_val = $(this).val();
alert(div_value);
});
Or like this
$('#some_id').on('change', function() {
// Write your function here
var div_value = $('#temperature_div').html();
var select_val = $(this).val();
alert(div_value);
});
Use getElementById() in javascript
<span id="temperature_div"><?php echo $temp_c; ?></span>
<label for="ddl_temptype"></label>
<select id="ddl_temptype" name="ddl_temptype" onchange="choose_temperature(); ">
<option value="celcius" selected> °C</option>
<option value="farenheit"> °F</option>
</select>
function choose_temperature()
{
var value=document.getElementById('temperature_div').innerHTML; //to get html inside span
var conv=document.getElementById('ddl_temptype').value;
alert(conv);
alert(value);
}
<script type="text/javascript">
var productStoreId = $('#productStoreId').val(); //productStoreId on change event
</script>
<select name="productStoreId" id="productStoreId">
<option value='' selected="selected">Select Location</option>
<#list productStoreList as store>
<option value='${store.productStoreId}'>${store.storeName}</option>
</#list>
</select>
<#assign AvblCrseList=prodStoreCoursesMap.get(${productStoreId})>// but productStoreId is undefined here.
I want productStoreId in a variable, because I have a map "prodStoreCoursesMap". I have to access it using the key productStoreId.
I want to access a map using the variable in the script tag as a key in the code in html/ftl.
<script type="text/javascript">
var productStoreId = $('#productStoreId').val(); // productStoreId on change event
</script>
This will only work at launch but won't update as you select from the dropdown.
Try this:
var productId;
$('#productStoreId').on('change', function(){
productId = $(this).val();
});
Is it possible at all to be able to assign the selected value of a select and assign it to the variable of a script and re-run the script?
Here is my current code sample:
<select onchange="reload_script;">
<option value="123">Select 123</option>
<option value="456">Select 456</option>
<select>
<div id="123">
link title
<br/><br/>
Link
</div>
<script language="javascript" type="text/javascript">
var code = '123' // <-- THIS VARIABLE WOULD BE THE VALUE OF THE SELECTED DROPDOWN VALUE
</script>
See: var code = '123' .... That's what's changed when the select box is changed ... then I would need the script to re-run...
Is this possible at all?
If you use jQuery you can always bind change event:
var code = "123";
$("#mySelect").on("change", function() {
code = this.value;
reload_script();
});
Otherwise, in plain JavaScript it may look like this:
var code = "123";
document.getElementById("mySelect").onchange = function() {
code = this.value;
reload_script();
};
Try this
<select onchange="reload_script();">
<option value="123">Select 123</option>
<option value="456">Select 456</option>
<select>
<div id="123">
link title
<br/><br/>
Link
</div>
<script language="javascript" type="text/javascript">
var code = '123' // <-- THIS VARIABLE WOULD BE THE VALUE OF THE SELECTED DROPDOWN VALUE
function script_to_run()
{
//do code here
}
// Call the script one time on page load (only if you need it on page load)
script_to_run();
function reload_script()
{
script_to_run();//run again
}
</script>