Update some fields on change and on load - javascript

We have the following script which runs on a change to a drop-down - updates the price based on the currency code chosen. This basically gets the value of the drop-down and updates the priceamm and preicecurr fields within the text on the page.
<script>
function run() {
var f = document.getElementById("dropPrice");
priceamm.innerHTML = f.options[f.selectedIndex].value;
var e = document.getElementById("dropPrice");
pricecurr.innerHTML = e.options[e.selectedIndex].text;
}
HTML
<select id="dropPrice" onchange="run()" class="fa-select">
<option value = "a">aaa</option>
<option value = "b">bbb</option>
Question
Now, we would also like to load the drop-down to one of the options (selected) when loading the page (onload). We are able to populate the variables in the text but not the drop-down to show option bbb. In php this is quite easy but we are a bit lost with javascript. We tried something on these lines onload but does not work:
document.getElementById("dropPrice").value = "<?php echo $geo_price ;?>";
With jQuery this is probably easier but once again no luck:
window.onload = function() {
jQuery(document).ready(function($){
document.getElementById('dropPrice').find('option[value=<?php echo $geo_price ;?>]').attr('selected','selected');
});
}
Any help is appreciated. Thanks

The jQuery selector part is incorrect. You are mixing plain JS with jQuery. When you call document.getElementById('dropPrice') a regular DOM element is returned, but then you call find which is a jQuery method to be used on a jQuery element. So, you either need to wrap the first part to return a jQuery element like so:
$(document.getElementById('dropPrice'))
.find('option[value="b"]').attr('selected', true);
Or, select it via jQuery in the first place like:
$('#dropPrice [value="b"]');
However, your first example:
document.getElementById("dropPrice").value = "b";
should work. That makes me wonder if the value that is being echoed by PHP is correct and/or if there are other JS errors being thrown that would cause that code not to run.

Related

Select partial ID name in javascript

I have an asp.net webform where I include the following script (on a separate .js file):
function pageLoad() {
var mpe = $find("mpeEmpresa");
mpe.add_shown(onShown);
$addHandler(document, "keydown", onKeyDown);
}
function onShown() {
var background = $find("mpeEmpresa")._backgroundElement;
background.onclick = function() {
$find("mpeEmpresa").hide();
}
}
Unfortunately, it won't work because asp.net 3.5 changes the elements id's. The only way I could get it to work is to use ctl00_ContentPlaceHolder1_empresaFilha_mpeEmpresa as the ID.
Sure I could use <%= mpeEmpresa.ClientID %> from the asp.net side, it would work but I'll have to pass that as a var to my external .js file and it's not exactly what I'm trying to accomplish.
I have searched on a few ways to select the element by it's ID name partially, but couldn't get any of them to work... Is there a guaranteed way?
I can see the JQuery tag on your question, so you can easily use this:
$('div[id*="mpeEmpresa"]')
As i know the ContentPlaceHolders are rendered as div.
Update:
If you need to select empresaFilha too so you can't use the above selector.
because $('div[id*="mpeEmpresa"]') select both of ctl00_ContentPlaceHolder1_empresaFilha and ctl00_ContentPlaceHolder1_empresaFilha_mpeEmpresa.
so you need to use this:
Select only mpeEmpresa:
$('div[id*="mpeEmpresa"]').css("background-color","blue");
Select only empresaFilha:
$('div[id*="mpeEmpresa"]').parent('div[id*="empresaFilha"]').css("background-color","red");
Or something like this, maybe this code isn't so optimized because i don't see your ASP code or rendered HTML so have to provide a general solution.
You can simply use this
var mpe=$('div[id$="mpeEmpresa"]');
or
var mpe=$find('div[id$="mpeEmpresa"]');

Weird behaviour with change event in HTML

I have a struts tag like this
<s:select label="Select Item" name="select3ph3meter1" id="select3ph3meter1"
headerKey="0" headerValue="-- Please Select --" list="meterHeaderList"
required="true" onchange="show_3ph3meter1(this.value)" />
The problem is it is not calling the above function on change event. It works when I change the code to this:
... onchange="alert('calling')"
I can't understand what's happening here.
Here is the JavaScript function:
function show_3ph3meter1(select3ph3meter1) {
$("#3ph3meter1").load("meterFiller3p31.action",{select3ph3meter1:select3ph3meter1});
}
function show_depotReceipts(selectrecitem) {
$("#recQuantity").load("depotRecQ.action",{selectrecitem:selectrecitem});
$("#recRange").load("depotRecRange.action",{selectrecitem:selectrecitem});
}
The adjacent function is working perfectly so I assume there is no JavaScript error.
Also, when I put in another function (for instance the adjacent function name in onchange), it is also working. The problem may be with this particular function name show_3ph3meter1().
Hi if you have some other java script written over there contains errors , this code wont work.
So better have like this
<select class="style" onchange="//do something like this
//var e = document.getElementById('selectelement'); //if (e) e.value=100;" />
please check in IE browsers to get the java script errors. write entire code in that change event
First check your calling function name
if this is correct then just write
onchange="javascript : show_3ph3meter1(this)"
and get value on the function
3 else try the access value in function with selector
var elem = document.getElementById("short_code"),
selectedNode = elem.options[elem.selectedIndex];
var valu = selectedNode.value;

Change href value with JS from select box

I have this select box that gets its data from my DB.
What I want to do is add Edit and Delete buttons next to my select box that will do the respective actions on the current selected option.
So I added two buttons that direct to php scripts that do all this work.
My problem is with JavaScript where I need to update the elements of the buttons.
However my JS function doesn't work.
It appears that it isn't even fired.
http://jsfiddle.net/y5g42/33/
HTML:
<select name='selectHotel' onChange='updateButtons(this.options[this.selectedIndex].text)'>
<option value="volvo.php">Volvo</option>
<option value="saab.php">Saab</option>
<option value="mercedes.php">Mercedes</option>
<option value="audi.php">Audi</option>
</select>
<a href='' id='editButton'><button>Edit</button></a>
<a href='' id='deleteButton'><button>Delete</button></a>
JavaScript:
function updateButtons(var) {
element = document.getElementById('editButton');
element.href = var;
}​
You can't use var as variable name - var is javascripts reserved word.
You have several problems with your logic and the fiddle itself.
Best way without using JavaScript library is to attach the onchange handler in the onload of the window and handle everything there:
window.onload = function() {
var oDDL = document.getElementById("selectHotel");
oDDL.onchange = function updateButtons() {
var oLink = document.getElementById('editButton');
oLink.href = oDDL.value;
};
oDDL.onchange();
};
To have it work, add id="selectHotel" to the <select> element and remove the inline onchange from it.
Updated fiddle.
In your initial fiddle you didn't choose proper framework properties.
Note that I am calling the onchange manually one time to reflect the selected value, otherwise clicking the button before selecting other value won't work.
jsFiddle's onLoad option wraps your code in a callback function.
Therefore, your function definition isn't visible outside the code.
You need to select No Wrap instead.
You just passed value rather than text on onchange function
onChange='updateButtons(this.options[this.selectedIndex].value)'
You can try something like this :
window.updateButtons = function(value) {
element = document.getElementById('editButton');
var url = window.location.href;
element.href = url + value;
console.log(element.href);
}
See Demo : http://jsfiddle.net/y5g42/46/

Select an option of select box using the value

I have a dropdown box and I want to select the option based on value. Somehow I am getting handle to value say 3. Now I want to manually select the option which has got value 3.
I have tried something like this
selectBoxElement.options[selectedValues].selected = true;
where selectedValue = 3, but it is not working.
If using jquery (as per your tag), you can do:
$(document).ready(function() {
$("#yourSelectId option[value='3']").attr("selected", "selected");
});
Something like that should work (assuming $ is not overwritten and is alias for jQuery):
$(selectBoxElement).find('option[value="selectedValue"]').prop('selected', true);
or rather:
$(selectBoxElement).val(selectedValue);
which is simpler and achieves similar result :)
If you're using plain JS (except for the jQuery tag, you didn't explicitly say whether you want plain JS or jQuery), this should do what you want:
for (i=0; i<selectBoxElement.options.length; i++) {
if (selectBoxElement.options[i].value == selectedValues) {
selectBoxElement.options[i].selected=true;
break;
}
}
This is simple please try the following
When using the index position of the option tag within the select box
selectBoxElement.selectedIndex = index; // Where the index starts from 0
When using the value
selectBoxElement.value = value;// Where the value is the attribute defined within option tag
Hope this solves your problem.

Javascript id question

I have a beginner question. I have a shoutbox, an Ajax shoutbox.
I made a form where i can update the users depending on them being a DJ or not.
If that option is selected then a small image appears after the user's name.
Is working but I can't make it work but my problem is, that if I set it on my profile, it adds the image to everybody's name.
Here is my code:
var radios = document.getElementById("radios");
if(radios.innerHTML == 'yes') {
radios = "<img src='http://www.site/pic/radios.gif'>";
}
My question is: How to insert the current user's id in this if statement?
In the code sample you've included, there appears to be an error.
With this line of code:
var radios = document.getElementById("radios");
you get the DOM object that has an id="radios". Then, you try to set that same variable to be a piece of HTML:
radios = "<img src='http://site/pic/radios.gif'>";
That won't accomplish anything other than setting a variable that you were previously using to store a DOM object to now be a string. That line of code does not modify the DOM in any way. Did you mean to write it this way?
radios.innerHTML = "<img src='http://site/pic/radios.gif'>";

Categories

Resources