I'm trying to load page content into a div via Ajax when a select option is selected.
This is my code, but it will not work.
$('mySelect').on('change',function(){
function loadPage(url){
$("#page").load(url);
}
});
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" onchange="loadPage('One.html')">One</option>
<option value="2" onchange="loadPage('Two.html')">Two</option>
</select>
</div>
<div id="page"></div>
</body>
</html>
I have a select box with 2 options the values are One.html and Two.html and under that I have a div and want the content from One.html and Two.html to load in the div when the select box changes... Via Ajax any suggestions?
Thanks
You're missing the id sign # :
$('mySelect').on('change',function(){
Should be :
$('#mySelect').on('change',function(){
___^
Try to avoid the inline event onchange() and use data-* to store the url param then pass it to the loadPage function inside the change event.
$(function() {
loadPage("One.html");
$('#mySelect').on('change', function() {
loadPage($(this).find(':selected').data('url'));
//OR
// $("#page").load( $(this).find(':selected').data('url') );
});
});
function loadPage(url) {
$("#page").load(url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" data-url="One.html">One</option>
<option value="2" data-url="Two.html">Two</option>
</select>
</div>
<div id="page"></div>
it's quite simple:
$("#SelectOne").change(function() {
$("#someDiv").load($(this).val());
});
<select id="SelectOne">
<option>One.html</option>
<option>Two.html</option>
</select>
<div id="someDiv"></div>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1 id="hey">List King</h1>
<div class="Select-DB">
<select id="DB" class="chosen-select" title="Select Database" data-placeholder="Select database you want!" style="width: 300px;">
<option value=""></option>
<option value="Pubchem3D"> Pubchem3D</option>
<option value="molport"> Molport</option>
<option value="ChemAxon"> ChemAxon</option>
<option value="ChemSpider"> ChemSpider</option>
</select>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script src="chosen_v1.6.2/chosen.jquery.js" type="text/javascript"></script>
<script src="ff.js" type="text/javascript"></script>
</body>
</html>
jquery chosen not working, what's wrong in my code?
My select tag just appear as default form....
p.s. Jquery code is located in another file ("ff.js")
$(document).ready(function(){
$(".chosen-select").chosen({no_results_text: "Sorry, We don't have such database ;-)"});
});
You need to change your javascript file like this
$('.chosen-select').change(function(){
var aaa = $("#DB").val(); // get option value
if(aaa === '') {
// user select empty item
console.log("Sorry, We don't have such database ;-)");
}
else{
// user select valid item
console.log(aaa);
}
});
How about using on change event?
$('.chosen-select').change(function(){
console.log(this.val());
});
I don't quite understand your question but try this
LINK
HTML
<h1 id="hey">List King</h1>
<div class="Select-DB">
<select id="DB" class="chosen-select" title="Select Database" data-placeholder="Select database you want!" style="width: 300px;">
<option value=""></option>
<option value="Pubchem3D"> Pubchem3D</option>
<option value="molport"> Molport</option>
<option value="ChemAxon"> ChemAxon</option>
<option value="ChemSpider"> ChemSpider</option>
</select>
</div>
JS
$('.chosen-select').change(function(){
var aaa = $("#DB").val();
if(aaa != ""){
console.log(aaa);
}
else{
console.log("Sorry, We don't have such database ;-)");
}
});
This is showing all divs if I select councils but when I change to property it only shows the first, but I want to display all divs which contain property ID. I want to display all results which are related to the selection from dropdown menu.
<html>
<head>
<title>Drop Down Example</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
function showTab ( name ) {
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}
$('#dropdown').change(function () {
showTab( $( this ).val() );
});
showTab( $('#dropdown').val() );
}); // this line was missing
</script>
</head>
<body>
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="" selected="selected">All </option>
<option value="Pubs">Pubs </option>
<option value="Councils">Councils </option>
<option value="Property">Property </option>
<option value="Various">Various </option>
<option value="Universitys">Universitys </option>
</select>
</p>
</form>
<div id="Pubs">pubs</div>
<div id="Councils">councils 1</div>
<div id="Property">property 1</div>
<div id="Various">various</div>
<div id="Councils">councils 2</div>
<div id="Universitys">universitys</div>
<div id="Property">property 2</div>
<div id="Property">property 3</div>
</body>
</html>
I want to display results like this:
If I select Councils then Results will show
Councils 1<br>
Councils 2
If I select Property the result will show
Property 1<br>
Property 2<br>
Property 3
If I select Pubs the result will show
Pubs
I know this is simple, and I need to search in Google. I tried my best and I could not find a better solution. I have a form field, which takes some input and a select field, which has some values. It also has "Other" value.
What I want is:
If the user selects the 'Other' option, a text field to specify that 'Other' should be displayed. When a user selects another option (than 'Other') I want to hide it again. How can I perform that using JQuery?
This is my JSP code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
Now I want to show the DIV tag**(id="otherType")** only when the user selects Other.
I want to try JQuery. This is the code I tried
<script type="text/javascript"
src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>
$('#dbType').change(function(){
selection = $('this').value();
switch(selection)
{
case 'other':
$('#otherType').show();
break;
case 'default':
$('#otherType').hide();
break;
}
});
</script>
But I am not able to get this. What should I do? Thanks
You have a few issues with your code:
you are missing an open quote on the id of the select element, so: <select name="dbType" id=dbType">
should be <select name="dbType" id="dbType">
$('this') should be $(this): there is no need for the quotes inside the paranthesis.
use .val() instead of .value() when you want to retrieve the value of an option
when u initialize "selection" do it with a var in front of it, unless you already have done it at the beggining of the function
try this:
$('#dbType').on('change',function(){
if( $(this).val()==="other"){
$("#otherType").show()
}
else{
$("#otherType").hide()
}
});
http://jsfiddle.net/ks6cv/
UPDATE for use with switch:
$('#dbType').on('change',function(){
var selection = $(this).val();
switch(selection){
case "other":
$("#otherType").show()
break;
default:
$("#otherType").hide()
}
});
UPDATE with links for jQuery and jQuery-UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
Demo on JSFiddle
$(document).ready(function () {
toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
// this will call our toggleFields function every time the selection value of our other field changes
$("#dbType").change(function () {
toggleFields();
});
});
// this toggles the visibility of other server
function toggleFields() {
if ($("#dbType").val() === "other")
$("#otherServer").show();
else
$("#otherServer").hide();
}
HTML:
<p>Choose type</p>
<p>Server:
<select id="dbType" name="dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</p>
<div id="otherServer">
<p>Server:
<input type="text" name="server_name" />
</p>
<p>Port:
<input type="text" name="port_no" />
</p>
</div>
<p align="center">
<input type="submit" value="Submit!" />
</p>
You have to use val() instead of value() and you have missed starting quote id=dbType" should be id="dbType"
Live Demo
Change
selection = $('this').value();
To
selection = $(this).val();
or
selection = this.value;
I got its answer. Here is my code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
And my script is
$(function() {
$('#dbType').change(function() {
$('.selectDBType').slideUp("slow");
$('#' + $(this).val()).slideDown("slow");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>
</body>
</html>
$('#dbType').change(function(){
var selection = $(this).val();
if(selection == 'other')
{
$('#otherType').show();
}
else
{
$('#otherType').hide();
}
});
Updated: I would like to control the visibility of the bottom divs based on the value of the top SELECT..
i.e
selected = dogs:: only bulldog, pitbull visible
selected = fish:: GOLDFISH! visible
etc..
Appreciate it.. Sorry I didn't do a better job of explaining my question initially -
<select>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="dog">bulldog</div>
<div id="cat">stray cat</div>
<div id="dog">pitbull</div>
<div id="cat">alley cat</div>
<div id="fish">GOLDFISH!</div>
Try this
$('#pets').change(function() {
$('#somepets div').hide();
$('#somepets div.' + $(this).val()).show();
});
But for this you should change your class names to match the values of the options. Also you need to give your "select" element an ID.
EDIT: To clarify a bit, this selector is going to try and find the select element by its ID "pets" so you need to add id="pets". The name and ID can be the same value.
EDIT: Since you're having some trouble with the HTML here is what it would need to look like to work with my method.
<select id="pets">
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="somepets">
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
function selectionChanged(){
HideAll();
var selected=$('#pets option:selected').text();
var selectString='.';
selectString+=selected;
$(selectString).show();
};
function HideAll(){
$('.dog').hide();
$('.cat').hide();
$('.fish').hide();
};
</script>
<select id="pets" onchange="selectionChanged()">
<option>dog</option>
<option>cat</option>
<option>fish</option>
</select>
<div id=somepets>
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>
I need to make javascript code to swap images with option change.
Here is the code:
<select name="Color:"onchange="document.getElementById('myimage').src = this.value;
">
<option value="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_byr.jpg">Black/Yelow/Red</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_nr.jpg">Navy/Red</option>
<option value="images/taylormade_purelite_standbag_nw.jpg">Red/Black/White</option>
<option value="images/taylormade_purelite_standbag_rb.jpg">Black/Red</option>
<option value="images/taylormade_purelite_standbag_wrb.jpg">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
My problem is this: I need to have option values in plain text such as "Black/Yelow/Red" not a URL because this option value will show up in the check out page. Can anybody help me?
Setting up a mapping from your color options to the URLs might work, I think.
<script>
var colorUrlMap = {
"Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
//Add more here
"White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
Use another attribute on the option:
<option value="Black/White" rel="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
Then get that attribute with getAttribute("rel")
<select name="Color:" onchange="document.getElementById('myimage').src = this.options[this.selectedIndex].getAttribute('rel');">
You could use CSS and just change the class based upon the selection. Then all of your URL's are in a stylesheet.
CSS:
.red
{
background: url(red.gif) no-repeat;
}
HTML/JS:
<select name="Color:" onchange="document.getElementById('myimageholder').setAttribute("class", "red");">
This works for me.
<HTML>
<head>
<TITLE>Image Select Test</TITLE>
<script type="text/javascript" language='javascript'>
function flip() {
myimage.src = ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url');
}
</script>
</head>
<body>
<form>
Select an image:<br/>
<select id="ColorSelect" onchange="javascript:flip();">
<option url="images/0.png" value='Zero'>Zero</option>
<option url="images/1.png" value='One'>One</option>
<option url="images/2.png" value='Two'>Two</option>
<option url="images/3.png" value='Three'>Three</option>
<option url="images/4.png" value='Four'>Four</option>
</select>
</form>
<img src="images/unknown.png" id="myimage"/>
</body>
<script type="text/javascript" language='javascript'>
// place this after <body> to run it after body has loaded.
var myimage = document.getElementById('myimage');
var ColorSelect= document.getElementById('ColorSelect');
</script>
</HTML>
ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url'); does not work.
It is rather ColorSelect.options[ColorSelect.selectedIndex].getAttribute('url');