Develop Reference

Update some fields on change and on load

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.

javascript alert value from a tag

I have on a page a tag links generated from a database with an id. What im trying to do is in an alert box display the text inside the a tag.
Ive tried to have a look to see if I can see a previous question, which I have come up with the following but all I get in the alert box is object HTMLCollection
I have the following code:
<a id="bet" onclick="addSlip();" class="btn btn-round" style="text-align: left;">'.$home->one.' <span>'.$home->two.'</span></a>
and...
function addSlip() {
document.getElementById('bet').innerHTML=bet;
alert(bet);
}
Thanks for any constructive answers

You should do the following
function addSlip() {
var bet = document.getElementById('bet').textContent;
alert(bet);
}
the rest as it is.
or using jquery
function addSlip() {
var bet = $("#bet").text()
alert(bet);
}
The main problem of your program was that the alerted variable had no value. (undefined)
The way you wrote it if the variable bet had a value would change the innerHTML of the of the a tag to that value.
Now to the using innerHTML or textContent part. As mentioned here in terms of performance the textContent is better

You need to reverse the variable assignment of bet:
function addSlip() {
var bet = $("#bet").text();// or $("#bet").html() if you want the HTML alerted
alert(bet);
}

In your case alert will give you the HTML Object Collection only.
When you have an element with id, then you can access them anywhere in javascript
e.g. for the following HTML
<div id="bet">This is a div </div>
in JS
alert(bet);
will give you the html object collection.
Solution for you is update your code
function addSlip() {
document.getElementById('bet').innerHTML=bet;
alert(bet);
}
to
function addSlip() {
alert( document.getElementById('bet').innerHTML);
}
If there is some html elements also in the div you can update the function with
function addSlip() {
alert(document.getElementById('bet').textContent);
}

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/

Javascript for mobile HTML form

I am having some problems with Javascript :(
This is an HTML form for a mobile webpage. To save space I put the names of the text fields inside the boxes. The name disappears when you focus on the box, but I am not able to make it reappear if the user didn't write anything.
Here is the Script (in head tag):
<script type="text/javascript"> resetDefault();{if (this.value.length==0); this.value="default";} </script>
Here is the HTML code:
<input onfocus="this.value=''" onblur="resetDefault()" name="nom" type="text" value="Nom complet" default="Nom complet"/><br><input onfocus="this.value=''" onblur="resetDefault()"name="courriel" type="text" value="Courriel" default="Courriel"/><br>
I keep getting a "resetDefault is not defined" error. I don't know if default is an accepted attribute for input, but I can't set it to "value" because value becomes 0 once someone has focused on the text field, right?

There are several problems with your javascript code. First, it is not syntactically correct. You should first change this code
resetDefault();
{if (this.value.length==0);
this.value="default";}
so that it has valid syntax, like this:
function resetDefault(){
if(this.value.length == 0){
this.value = "default";
}
}
The second problem is that this refers to the global object, instead of the DOM node you want. You need to pass in a value so it knows which input to change.
Change the onblur javascript so that it passes in a parameter to the function:
onblur="resetDefault(this);"
and change the function so it accepts a parameter:
function resetDefault(that){
if (that.value.length == 0){
that.value="default";
}
}
The third problem is that "default" will just change the value of the input box to the string, "default". I doubt that is what you want. Make the value match the default attribute you gave the input:
that.value = that.getAttribute("default");
Try it out on JSFiddle

The semicolon after resetDefault() in the script in the head needs to be removed - now it's a function call of a function that's not defined.
<script type="text/javascript">function resetDefault() { if (this.value.length==0) this.value="default";} </script>

You need to define the resetDefault() function like so:
function resetDefault() {
// Function stuff here
}

Problem with dropdown and codeigniter

i'm using 2 dropdowns where the second gets populated from the first choice.
My problem is that i'm not getting the value from the first dropdown.
What i get is [object Object].
Here's the javascript and php code:
Thanks.
Javascript:
function getState(){
$("#selectestate").bind("change",function(){
$("#selectcity").load("results/ajaxcity", {stat: $(this).val()} ); //This is where the problem is
alert({stat: $(this).val()});//Shows [object Object]
});
return false;
}
PHP:
$curstat=$this -> input -> post('state'); //current selected state in first dropdown
<tr>
<?php $js = 'id="selectstate" onChange="getState();"';?>
<td><h3> State: </h3></td>
<td id="selectestate"><?php echo form_dropdown('state', $stat, $curstat, $js);?></td>
</tr>
<tr>
<td><h3> City: </h3></td>
<td id="selectcity"><?php echo form_dropdown('city', $cit);?></td>
</tr>

You need to alter this code:
$("#selectestate").bind("change",function(){
to this:
$("#selectestate select").bind("change",function(){
You are asking for the value of the <td id="selectstate"> ... which is of course null. #selectstate select loads the actual <select> element that you are looking for, which will then enable you to get its value.
You will also want to change $("#selectcity") to $("#selectcity select") to avoid the same problem in your anonymous function.
Finally, your alert is behaving as expected. {} defines an object in Javascript. So you are alerting an object containing a single attribute. Just alert($(this).val());// Should show the value
If it still fails it's because either:
A) Your URL is wrong
or
B) There is something wrong with the php function called by results/ajaxcity
EDIT:
Smacks head: I should have caught this. In your code you have this function:
1. function getState(){
2. $("#selectestate select").bind("change",function(){
3.
4. $("#selectcity select").load("results/ajaxcity", {stat: $(this).val()} );
5. alert($(this).val());
6. });
7. return false;
8. }
Your generated HTML looks something like this:
<select name="state" id="selectstate" onChange="getState();">
THE PROBLEM: When you use the <select> for the first time your function is called and jQuery binds an anonymous function to the change event for select (line #2) that will be executed every time the change event fires from this select from now on. Every time you select the dropdown a new anonymous function is bound by line #2 and all of the functions that are currently bound to the dropdown are executed. (So if you use the dropdown N times the "change" function will fire N-1 times.)
THE SOLUTION: Use $(document).ready() to bind your function. Your restructured code will look like this:
<script type="text/javascript">
function getState(element){
$("#selectcity select").load("results/ajaxcity", {stat: $(element).val()} );
alert($(element).val());
return false;
}
</script>
//... snip ...
<?php $js = 'id="selectstate"';?>
//... snip ...
<script type="text/javascript">
$(document).ready(function() {
$("#selectestate select").bind("change", getState);
});
</script>

There is no value for td element, which you are accessing in "#selectestate" selector. Instead of {stat: $(this).val()} you should find inner select element {stat: $(this).find("select").val()}

You're loading the .val() of a <td> element ($(this), inside your handler for a TD). You need to get the id of the <select> tag.
If you really can't find the ID (or codeigniter doesn't set it.. impossible to tell from your example since form_dropdown() is creating it), then instead of $(this).val() you could try $('select',this).val() which will find the value of the first <select> tag within the TD.
Also in your debugging, {stat: $(this).val()} is an object, so of course that's what alert() shows you. Try using firebug, and then change alert() to console.log() -- the firebug console will show you the full object. You could also simply do alert($(this).val()) -- though realize of course that it will be wrong due to the first paragraph above.