I am trying to moving the items in a select box by using buttons.. for this i used swapNode().
But it is working only in IE. in chrome not working how to make it to work in chrome
Here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Moving the options up and down in Multiple select box </title>
<script type="text/javascript">
function move(id)
{
if (id=='up')
{
var len= document.f1.selectbox1.options.length;
if (document.f1.selectbox1[0].selected)
{
alert("This is the first record");
return false;
}
var up_id=document.f1.selectbox1.selectedIndex;
document.f1.selectbox1[up_id].swapNode(document.f1.selectbox1[up_id-1]);
}
if (id=='down')
{
var len=document.f1.selectbox1.options.length;
if (document.f1.selectbox1[len-1].selected)
{
alert("This is last record");
return false;
}
var down_id=document.f1.selectbox1.selectedIndex;
document.f1.selectbox1[down_id].swapNode(document.f1.selectbox1[down_id+1]);
}
if (id=='top')
{
var len=document.f1.selectbox1.options.length;
if (document.f1.selectbox1[0].selected)
{
alert("This is the first record");
return false;
}
var top_id=document.f1.selectbox1.selectedIndex
for (var j=top_id;j>0 ;j-- )
{
document.f1.selectbox1[j].swapNode(document.f1.selectbox1[j-1]);
}
}
if (id=='bottom')
{
var len=document.f1.selectbox1.options.length;;
if(document.f1.selectbox1[len-1].selected)
{
alert("This is last record");
return false;
}
var bot_id=document.f1.selectbox1.selectedIndex
for (var k=bot_id; k<len-1;k++)
{
document.f1.selectbox1[k].swapNode(document.f1.selectbox1[k+1]);
}
}
}
</script>
</head>
<body>
<form name="f1">
<select multiple size="20" style="width:30%" name="selectbox1" id="select_box">
<option id="1">First item</option>
<option id="2">Second item</option>
<option id="3">Third item</option>
<option id="4">Fourth item</option>
<option id="4">Fifth item</option>
<option id="4">Sixth item</option>
<option id="4">Seventh item</option>
<option id="4">Eighth item</option>
<option id="4">Ninth item</option>
<option id="4">Tenth item</option>
</select><br>
<input type="button" value="Up" onClick="move('up')">
<input type="button" value="Down" onClick="move('down')">
<input type="button" value="Top" onClick="move('top')">
<input type="button" value="Bottom" onClick="move('bottom')">
</form>
</body>
</html>
swapNode() is a Microsoft DOM extension and so as a result will not be recognized by browsers other than IE.
I ran your example in FireFox and used FireBug (You should download this plugin and use it in situations like this if you don't already) and sure enough the console was throwing an error that swapNode() was "not a function".
If I were to advise you from here, I would suggest going to lookup a jQuery plugin or something of that sort that achieves this kind functionality. Libraries like jQuery tend to offer cross browser solutions to these sorts of javascript problems and best of all are more often then not open source (so you can have a peek at the code and rework your own implementation if you would like).
http://jquery.com/
Alternatively, you could simply provide the swapNode() function in your code so that other browsers could pick it up. If you plan to go this route, you should be able to find an implementation with a quick Google search. I have provided a link to one such implementation below (I have not reviewed or used this code, use only after reviewing). In my humble opinion however, it is best to avoid solutions that have browser dependency as they are not always future proof and can often result in unforeseen issues.
http://sundberg.it/2006/05/12/swapnode_in_firefox
Good Luck!
Related
This is my HTML:
<div id="hiddenDiv" style="display: none;">
<h1 id="welcomehowareyou">How are you today, ?</h1>
<select name="mood" id="mood">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
<!--<input type="submit" value="Done!"/>-->
</select>
<p></p>
</div>
How do I make a different alert (doesn't matter if PHP or JavaScript; which ever is easiest) appear when they select an option?
Also, when they click ok to the option, how do I make that re-direct them to a different link?
See the fiddle
You'll have to use the onchange listener for the <select>..So, the <select> should be as follows
<select name="mood" id="mood" onchange="myFunction()">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
<!--<input type="submit" value="Done!"/>-->
</select>
and the script that is used is as follows
function myFunction() {
var x = document.getElementById("mood").value;
alert(x);
}
This works with pure Javascript. No need for jQuery.
UPDATE
As #LyeFish mentioned in his comments you can code it like the one in this fiddle..
Here the <select> is as follows
<select name="mood" id="mood" onchange="myFunction(this.value)">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
</select>
and the javascript for this will be
function myFunction(val) {
alert(val);
}
UPDATE 2
function myFunction(val) {
alert(val);
window.location.href = "http://google.co.in/";
}
You can call your JavaScript function in onchange evenet , as follows
<div id="hiddenDiv" >
<h1 id="welcomehowareyou">How are you today, ?</h1>
<select name="mood" id="mood" onchange="alert(this.value);window.location = 'http://www.google.com';">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
</select>
</div>
<!--
You can write JS function to do as per your requirement and call the function in onchange event.
Here it is alerting the selected value and redirecting to http://google.com.
You can redirect to different website also using conditional statement.
-->
You need to detect the change event of the select, and then view the elected option.
Like that:
$('#mood').on('change', function() {
//alert( this.value ); // or $(this).val()
switch(this.value){
case "m1":
alert("option 1");
break;
case "m2":
alert("option 2");
break;
case "m3":
alert("option 3");
break;
}
});
https://jsfiddle.net/2qpwhz6h/
I have a simple form with cross-browser issues. The form has two select lists, “class_chorus” and “accompaniment”. On page load, class_chorus is displayed and accompaniment is hidden. If the user selects the Children’s Chorus option, the accompaniment select list should display. It works correctly in Firefox 35 and IE11. I cannot get it to work in Chrome 40 or Safari 5.1.7. What am I missing here?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form method="post" action="">
<table id="formTable" border="0">
<tr valign="top" style="margin-bottom:0">
<td>Class/Chorus </td>
<td>
<select name="class_chorus" size="1">
<option value="" onclick="hideAccomp();">Any</option>
<option value="Preschool" onclick="hideAccomp();">Early Childhood</option>
<option value="Elementary" onclick="hideAccomp();">Elementary</option>
<option value="Childrens Chorus" onclick="showAccomp();">Children's Chorus</option>
</select>
</td>
</tr>
<tr valign="top" style="margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0">
<td>
<div id="accomp" style="display:none"><br />
Accompaniment<br /><br />
</div>
</td>
<td>
<div id="accomp2" style="display:none"><br />
<select name="accompaniment" id="accompaniment" size="1" >
<option value="">Any</option>
<option value="None">None</option>
<option value="Piano">Piano</option>
</select>
</div><br />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function showAccomp() {
document.getElementById("accomp").style.display = "inline";
document.getElementById("accomp2").style.display = "inline";
}
function hideAccomp() {
document.getElementById("accomp").style.display = "none";
document.getElementById("accomp2").style.display = "none";
}
</script>
</body>
</html>
No you don't need to use jQuery, the problem isn't your Javascript but rather your HTML. The onclick attribute is not supported in Chrome and IE when used on option elements. The best cross browser method would be to use the onchange attribute on your select (remove all onclicks on the option tags) and then write a third function to determine whether to call the show or hide functions you wrote.
Your new HTML:
<select name="class_chorus" size="1" onChange="checkValue(this.selectedIndex)">
<option value="">Any</option>
<option value="Preschool">Early Childhood</option>
<option value="Elementary">Elementary</option>
<option value="Childrens Chorus">Children's Chorus</option>
</select>
Your new JS function:
function checkValue(index)
{
if(index == 3)
showAccomp();
else
hideAccomp();
}
Bear in mind that this assumes your Children's Chorus value is always fourth in the list. If that position could change periodically, it might be better to get the value itself and compare that instead.
You are probably running into issues as a result of putting the event listener on the individual <option> elements, rather than the <select> (browsers are VERY picky about what you can do with <option> elements).
Try binding a function to the onchange for the <select>, instead, and then, when the value changes, get the new value and trigger the correct function based on that.
Trying to use the code that you already have, you could do something like this:
<select name="class_chorus" size="1" onchange="toggleAccomponement(event);">
<option value="">Any</option>
<option value="Preschool">Early Childhood</option>
<option value="Elementary">Elementary</option>
<option value="Childrens Chorus">Children's Chorus</option>
</select>
. . . and then, in the <script> section:
function toggleAccomponement(event) {
var sCurrSelection = event.target.value;
if (sCurrSelection === "Childrens Chorus") {
showAccomp();
}
else {
hideAccomp();
}
}
better Use JQuery show()
http://api.jquery.com/show/
and hide()
http://api.jquery.com/hide/
I am trying to create a downloads page, where the user is to select the item they wish from the dropdown list, in doing this the page should spawn in text in the text area based on what they selected, which is a small HTML formatted description of the file they selected. Then i wish to have a "Download!" button, which when clicked will check the value in the dropdown and then take the user to thier download which is hosted at mega.
I have the basic idea for how to make the text spawning work, however for some reason my if statements seem as good as useless; i can't get it to spawn ANY text into the text area, and i can't figure out how to link this to the button. I apologise in advance that this is quite vague and LQ code (I prefer PHP/python to JS).
This is what i have so far:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var file;
function ChooseDownload()
{
if(document.getElementById("item").value == "Shell"){
document.getElementById("what").value="You selected Shell";
file = "http://mega.co.nz/[file]";
}
else if(document.getElementById("item").value == "Bot"){
document.getElementById("what").value="You selected Sources";
file = "http://mega.co.nz/[file2]";
}
}
</script>
</head>
<body>
<h5><p>Please Select File to download:</p></h5>
<p>
<form>
<select name="item" onchange="ChooseDownload()">
<option value="Blank">Select Download</option>
<option value="Shell">My PHP Shells</option>
<option value="Bot">Botnet Sources</option>
<option value="Skype">Skype 6.9 Win</option>
<option value="Xchat">Xchat Free</option>
<option value="Cod5">Custom Maps</option>
</select>
</form>
<p><form method="get" action="url">
<button type="submit">Download!</button>
</form> </p>
</p>
<p> </p>
<p><br>Contents:<br><textarea name='what' rows='15' cols='60'></textarea><br/></p>
</body>
</html>
Thanks for any ideas/Help.
Your problem is that you need to pass some kind of parameter to the ChooseDownload function, based on that you can make decisions.
try this:
function ChooseDownload(selected)
{
switch(selected.value){
case "Shell":
//some action
break;
case "Bot":
//some action
break;
case "Skype":
//some action
break;
case "Xchat":
//some action
break;
case "Cod5":
//some action
break;
default:
//unknown option
break;
}
}
and your HTML to this:
<select id="item" onchange="ChooseDownload(this)">
<option value="Blank">Select Download</option>
<option value="Shell">My PHP Shells</option>
<option value="Bot">Botnet Sources</option>
<option value="Skype">Skype 6.9 Win</option>
<option value="Xchat">Xchat Free</option>
<option value="Cod5">Custom Maps</option>
</select>
Could someone please tell me how to get this code working on a webpage? Particularly what should go in the header?
http://jsfiddle.net/mekwall/TJcP4/1/
Sorry if this is a basic question...steep learning curve!
Thanks
Your code is using the jQuery JavaScript library ... so your head will need to contain :
<script type="text/javascript" src="<jquery url>"></script>
Replace the <jquery url> with a valid url to the jQuery library. I suggest you use the Google CDN for the url or alternatively download a copy and store it on your server -> http://docs.jquery.com/Downloading_jQuery#Download_jQuery
Then to ensure your code runs once the DOM is ready wrap all of your JavaScript within the following :
$(document).ready(function() {
// your code here
});
Docs for ready() here
If your going to be using jQuery more I suggest you start reading here http://docs.jquery.com/How_jQuery_Works and if you going to learn JavaScript, you can't go wrong with reading this too -> https://developer.mozilla.org/en/JavaScript/Guide
Copy the code below, save it with a .html extension (e.g. test.html) and then double click to open.
<html>
<head>
<title>Page Title here</title>
</head>
<body>
<select id="t_dermal_name">
<option value="t_default_dermal">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<select id="t_wrinkle_name">
<option value="t_default_wrinkle">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<span id="output"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!--You can use a local version of jquery-->
<script type="text/javascript">
$(document).ready(function(){
function onSelectChange(){
var total = 0,
dermal = $("#t_dermal_name").find('option:selected'),
wrinkle = $("#t_wrinkle_name").find('option:selected');
if(value = dermal.attr('rel')){
total += parseInt(value);
}
if(value = wrinkle.attr('rel')){
total += parseInt(value);
}
$("#output").html(total);
}
$("#t_dermal_name").change(onSelectChange);
$("#t_wrinkle_name").change(onSelectChange);
});
</script>
</body>
UPDATE: The original question asked was answered. However, the code revealed for all. So, I've modified my question below:
So I have the following dynamically generated html via php
<div class="image-link link-posttypes mainSelector1">
<select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
<option value="">default</option>
<option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
</select>
</div>
<div class="image-link link-pages1">
<select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
<option value="50" class="level-0">About</option>
<option value="65" class="level-0">Contact</option>
<option value="2" class="level-0">Sample Page</option>
<option value="60" class="level-0">Staff</option>
</select>
</div>
<div class="image-link link-posts1">
<select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
<option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
</select>
</div>
<div class="image-link link-custom1">
<input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>
***THEN IT REPEATS four times: where the #1 goes to 2..3...4 (max to 4 at this time).
I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).
So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.
I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!
***Also, this will be loaded via an external js file.
Here is the final answer that worked:
jQuery(document).ready(function($) {
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").slideDown('slow');
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal=="page"){
$(this).parent().nextAll(".link-pages").slideDown('slow');
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal!=""){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().next().nextAll(".link-custom").slideDown('slow');
}else{
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}
});
});
jQuery(document).ready(function($) {
$(".image-content select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="content-limit"){
$(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
$(this).parent().nextAll(".content-custom").hide();
}else if(selectedVal=="custom-content"){
$(this).parent().nextAll(".content-limit-chars").hide();
$(this).parent().next().nextAll(".content-custom").slideDown('slow');
}
});
});
Thanks for your help!
Assuming that you're outputting proper IDs, you can do something like this (note I replaced the id):
$(window).load(function(){
// hide all the divs except the posttypes
$('.image-link').not('.link-posttypes').hide();
$('#wp_accordion_images_20110630022615_post_type').change(function() {
var divSelector = '.link-' + $(this).val();
$('.image-link').not('.link-posttypes').hide();
$(divSelector).show();
});
});
Also, consider changing your options like this:
<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>
Here's a jsfiddle for this: http://jsfiddle.net/JrPeR/
There's my understandable jquery script
jQuery(document).ready(function($) {
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(".link-pages").hide();
$(".link-posts").show();
$(".link-custom").hide();
}else if(selectedVal=="page"){
$(".link-pages").show();
$(".link-posts").hide();
$(".link-custom").hide();
}else if(selectedVal!=""){
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").show();
}else{
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
}
});
});
Demo here. Take me couple minute to make you easy to understand. Have fun.
http://jsfiddle.net/JrPeR/3/
added a conditional so if its not the two variables it defaults to the custom.