Humble appologies if this is a stupid question but I cant for the life of me figure out what is wrong here.
I have an echoed element inside php mode:
echo'<select name="picks" id="winner">';
echo'<option value="'.$row['team1'].'">'.$team1.'</option>';
echo'<option value="'.$row['team2'].'">'.$team2.'</option>';
echo'</select>';
Now outside php
I try to do a basic javascript GET:
document.getElementById("winner");
However the elemnt is not accessible am I missing something here, is it not possible to get echoed elements Ids?
You should make sure your DOM has at least loaded before performing element selects. If you can use jQuery, then this is as easy as the following, and you can place this script in the head section, or anywhere in the body:
$(document).ready(function() {
// Perform any selects on the DOM
});
JS
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// The DOM is loaded and ready to be selected
var select = document.getElementById("winner");
var optionText = select.options[select.selectedIndex].text;
var optionValue = select.options[select.selectedIndex].value;
});
</script>
Of course you can also perform DOM selects using jQuery:
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// The DOM is loaded and ready to be selected
var optionText = $("#winner option:selected").text();
var optionValue = $("#winner option:selected").val();
});
</script>
Another possibility
If $row, $team1 or $team2 are not defined and you have PHP errors and notices turned on, then the HTML will render like so:
<select name="picks" id="winner"><b>E_NOTICE : </b> type 8 -- Undefined variable: row -- at line 4<br /><b>E_NOTICE : </b> type 8 -- Undefined variable: team1 -- at line 4<br />
<option value=""></option><b>E_NOTICE : </b> type 8 -- Undefined variable: row -- at line 5<br /><b>E_NOTICE : </b> type 8 -- Undefined variable: team2 -- at line 5<br />
<option value="" selected="selected"></option>
</select>
However, if you have PHP errors and warnings turned off, you would see something like this instead:
<select name="picks" id="winner">
<option value=""></option>
<option value="" selected></option>
</select>
If you are unable to access the value of options in your select HTML (because they are empty), this would be a good pace to start investigating.
Using JQUERY you can try following:
// I have used mouse down event for demo purpose.
$(document).delegate('#winner', 'mousedown', function ()
{
alert('hi');
});
Try accessing the value of the selected id
I am giving a demo fiddle
Demo fiddle
document.getElementById("winner").value;
Echoing JS codes is common but there are these possibilities:
1-You put document.getElementById("winner"); before php creating that element.
2-There is a syntax error in script tag which cause error and there for your select does not work.
since the php part will be available before page load you can simply do like this:
<?php
$row['team1']=1;$team1='India';$row['team2']=2; $team2='SA';
echo'<select name="picks" id="winner">';
echo'<option value="'.$row['team1'].'">'.$team1.'</option>';
echo'<option value="'.$row['team2'].'">'.$team2.'</option>';
echo'</select>';
?>
<script>
console.log(document.getElementById("winner"));//see this in console.
</script>
Related
I am relatively new to Spring MVC and Dojo/Dijit widgets and I am stuck with a problem. I need to unblock a particular div based on the option selected from the dropdown i.e. when the user selects the reason as "Unexperienced" I am supposed to unblock a div with id = "unexpUser" style="display:none;" to collect some additional information.
JSP -
<select data-dojo-type="dijit.form.Select" name="userReason" id = "reason">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</select>
JC -
<script>
if(dijit.byId('reason').value == "opt1"){
unexpUser.style.display = 'block';
}
</script>
When the page loads, the option displayed on the dropdown is "Experienced". When I change the option to "Not experienced" , I need to unblock the div but this particular code doesn't seem to be the right code for comparing. Please help.
.value is not the right way to get value from a dijit widget instead use:
dijit.byId('reason').get("value")
Use onchange listener :
dijit.byId('reason').on("change",function(evt){
alert(evt); //(evt == value of option )
// your code here
});
okay I got my mistake. This is the solution. #Harpreet Singh your solution works perfectly with this code.
JSP-
<form:select data-dojo-type="dijit.form.Select" path "" name="userReason" id = "reason" onchange="myFunction1();">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</form:select>
and in my JS I created a function for the String comparison.
JS -
<script>
function myFunction1(){
if(dijit.byId('reason').get("value") == "opt1"){
unexpUser.style.display = 'block';
}
</script>
this works. Thank you so much for your help!
I have a select element as shown below.I am passing the value of the selected option to a PHP page as a variable with javascript as shown below :
<script>
var area1=document.getElementById("area").value;
$("#list").load("selectcity.php?city1="+city1+"&area1="+area1);
<script>
<select id="areas" name="areas">
<option value="Queens Town">Queens Town</option>
<option value="QueensTown">QueensTown</option>
</select>
Now the thing is , In the PHP page I am able to echo $_GET['area1']; when QueensTown is selected but whenever I am trying to pass Queens Town ,its now working.Can anybody help.
You have to escape the values properly, otherwise you would end up with a URL like this:
selectcity.php?city1=xyz&area1=Queens Town
Which is unlikely to work the way you want. Use this instead:
var data = {
city1: city1,
area1: $('#areas').val()
};
$('#list').load('selectcity.php?' + $.param(data));
See also: jQuery.param()
I'm new to JavaScript and I've searched this site and other for hours for a solution, but can't get this to work. I'm probably making a basic mistake here.
If I call innerHTML inline like this it works perfectly:
<select id="myselect" onchange="this.innerHTML = '<option value="1">1</option><option value="100">100</option>'"></select>
But if I try to call it from an external JavaScript file or HEAD it doesn't work:
<script type="text/javascript">
function addSomeOptions(obj) {
obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
}
</script>
<select id="myselect" onchange="addSomeOptions(this)"></select>
I really would like to add the javascript in an external file rather than inline, since there may be hundreds of options. I also realise there are JS functions for adding Option tags, but because of the way the options are generated, I think it is preferable in this case to use the innerHTML function.
You can try following code in your html page,
<script type="text/javascript">
function addSomeOptions(obj) {
obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
}
</script>
<select id="myselect" onchange="addSomeOptions(this)">
<option>TestFirstValue</option>
<option>TestSecondValue</option>
</select>
innerHTML is a really crude tool to add dynamic HTML.
The DOM API offers a much more reliable interface for dynamically modifying HTML.
Your example:
function addSomeOptions(obj) {
var option = document.createElement("option");
option.setAttribute("value", 1);
option.appendChild(document.createTextNode("1"));
obj.appendChild(option);
/* repeat for all options */
}
Now, as you can see, this is really clunky (but reliable). There exist frameworks that try to do a better job. It's worth taking a look at those.
Your problem is most likely appears because the object you are trying to access in head is not yet loaded. Try to wrap your js calls inside onload, like this:
window.onload = function () {
function addSomeOptions(obj) {
obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
}
}
If you try to access an object before it was created, it won't work. You need to either do it after the page loads (see the code above) or, if you like script tags, place the code inside a script tag after the html declaration of your div / input / etc.
Edit: as Frits pointed out, you are doing the call on the onchange event, so it's ok.
However, looking at your code, you need to have some options inside the select tag in order to be able to trigger it:
The code below works just fine for me:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function addSomeOptions(obj) {
obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
}
</script>
<select id="myselect" onchange="addSomeOptions(this)">
<option value="1">2</option><option value="100">200</option>
</select>
</body>
</html>
In this thread, it is described how you can fetch the selected value from a drop down box using JavaScript. I've been trying to follow the instructions in that thread, but haven't been able to get it working.
Here's a minimal (non-working) example of what I'm trying to do. The code should print the value of the second option from the drop down box, but instead I get the following error in the Chrome's JavaScript console Uncaught TypeError: Cannot read property 'options' of null on row 11 (that is, when I define my second variable).
<html>
<body>
<select name='a_drop_down_box'>
<option value='1'>One</option>
<option value='2' selected='selected'>Two</option>
<option value='3'>Three</option>
</select>
<p id='message'></p>
<script type="text/javascript">
var test = document.getElementById("a_drop_down_box");
var testValue = test.options[test.selectedIndex].value;
document.getElementById('message').innerHTML=testValue;
</script>
</body>
</html>
document.getElementById("a_drop_down_box");
Did you notice that you haven't defined an id for the select item?
The name attribute is used to identify the form element for requests send using the form. You should use an id to retrieve it from the dom.
Alternatively if your select resides inside a form, you could use this:
document.getElementById("myForm").elements["a_drop_down_box"];
You forgot to give your <select> an id attribute.
<html>
<body>
<select id='a_drop_down_box' name='a_drop_down_box'>
<option value='1'>One</option>
<option value='2' selected='selected'>Two</option>
<option value='3'>Three</option>
</select>
<p id='message'></p>
<script type="text/javascript">
var test = document.getElementById("a_drop_down_box");
var testValue = test.options[test.selectedIndex].value;
document.getElementById('message').innerHTML=testValue;
</script>
</body>
</html>
The dropdown's name attribute is "a_drop_down_box" - you're calling it as thought this was its id.
Any time you get an '...of undefined' error it means the object (or element, in your case) you think you're working on has not been found. So always confirm this before wondering why errors are happening. In your case, you could have done:
alert(test); //undefined - no element found with that ID
You forgot to add id to your select tag
var e = document.getElementById("a_drop_down_box");
var strUser = e.options[e.selectedIndex].value;
Will return 2. If you want Two, then do this:
var e = document.getElementById("a_drop_down_box");
var strUser = e.options[e.selectedIndex].text;
Here is a simple example
http://jsfiddle.net/VCerV/3/
I'm not sure what's the issue that is causing that error message when I try debugging with Firebug. Everything looks good to me.
Current Issue:
$("#SlideList option:selected") is null
Select Box Code (abridged) :
<select id="SlideList" name="D1" style="width: 130px;">
<option value = "Numbers.pdf" >Numbers</option>
</select>
<img src="Button.png" onclick="SlidePDFOpen()" />
Javascript:
function SlidePDFOpen() {
window.open($("#SlideList option:selected").val());
}
You are using a jquery selector but you don't have jquery included in the page.
The error you are getting therefore makes sense as the page can't find the function val().
At the very least with jquery you would get an empty string.