I have a form in which I have a list of Indian States and Cities. On selecting one of the states, the cities from that state are to be displayed in the <select> to show cities. I am using a php script hosted somewhere (a similar website) and I think that it can solve my purpose. The script takes the value of State options as parameter and returns a <select> with the corresponding cities.
The script is http://www.indane.co.in/state.php?stateid=2196 where 2196 is the ID/value of the selected state.
I need to display contents of this in my cities' .
Please suggest me how can I do this.
So far I have tried this,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function showcat(id,ss,type)
{
var cid=id.value;
if(type=='state')
{
document.getElementById("state_loading").style.visibility="visible";
var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
var id=document.getElementById('bgcity');
id.innerHTML=response;
}
}
function httpGet(theUrl)
{
var xHRObject = new XMLHttpRequest();
var url = theUrl;
xHRObject.open("GET", url, true);
xHRObject.send();
xHRObject.onreadystatechange = function () {
if (xHRObject.readyState==4 && xHRObject.status==200) {
var response = xHRObject.responseText;
return response;
}
}
}
</script>
</head>
<body>
<select name="bgstate" id="bgstate" style="width:200px" onChange="showcat(this,'sub1','state');">
<option value="">[ SELECT STATE ]</option>
<option value="2169" >Andhra Pradesh</option>
<option value="2196" >Arunachal Pradesh</option>
<option value="2170" >Assam</option>
<option value="2171" >Bihar</option>
<option value="5267" >Chhattisgarh</option>
<option value="2174" >Delhi</option>
<option value="2199" >Goa</option>
<option value="2175" >Gujarat</option>
<option value="2176" >Haryana</option>
<option value="2177" >Himachal Pradesh</option>
<option value="2178" >Jammu and Kashmir</option>
<option value="5268" >Jharkhand</option>
<option value="2185" >Karnataka</option>
<option value="2179" >Kerala</option>
<option value="2181" >Madhya Pradesh</option>
<option value="2182" >Maharashtra</option>
<option value="2183" >Manipur</option>
<option value="2184" >Meghalaya</option>
<option value="2197" >Mizoram</option>
<option value="2186" >Nagaland</option>
<option value="2187" >Orissa</option>
<option value="2189" >Punjab</option>
<option value="2190" >Rajasthan</option>
<option value="2195" >Sikkim</option>
<option value="2191" >Tamil Nadu</option>
<option value="2192" >Tripura</option>
<option value="5269" >UNION TERRITORY</option>
<option value="2193" >Uttar Pradesh</option>
<option value="5259" >Uttaranchal</option>
<option value="2194" >West Bengal</option>
</select>
<span id="state_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>
</td>
</tr>
<br/>
<tr valign="top">
<td> </td>
<td height="25" >City <span class="error">*</span></td>
<td colspan="2">
<span id="sub1">
<select name="bgcity" style="width:200px" id="bgcity" >
<option value="">[SELECT CITY]</option>
</select>
</span>
<span id="city_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>
<input type="button" value="Search" onClick="showcat(document.getElementById('bgcity'),'sub2','city');" style="cursor:pointer;" />
</tr>
</body>
</html>
Problem 1-The problem is the URL for city dropdown is returning a selectbox and you are replacing the options of the selectbox in your page with another selectbox
Another problem is access-control-allow-origin header.
Replace the city drop down in your page with the following
<span id="bgcity">
<select name="bgcity" style="width:200px" >
<option value="">[SELECT CITY]</option>
</select>
</span>
Change your showcat as
function showcat(id,ss,type)
{
var cid=id.value;
if(type=='state')
{
document.getElementById("state_loading").style.visibility="visible";
var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
if(response !== undefined)
{
var id=document.getElementById('bgcity');
id.innerHTML=response;
}
}
}
I have removed the id associated with the select box to the span so that it replaces the whole drop down..and remove the second parameter in your showcat function as this change will give error...
Related
This is the code I use to display data from database and filter "Provider " categories with "searchByProvider". Under Provider there is a lot of data, but I want to show only 2 random data that show when someone selected "Provider"?
your text
<!doctype html>
<html>
<head>
<title>document</title>
<!-- Datatable CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.css"/>
<link href='DataTables/custom.css' rel='stylesheet' type='text/css'>
<!-- jQuery Library -->
<script src="jquery-3.3.1.min.js"></script>
<!-- Datatable JS -->
<script src="DataTables/datatables.min.js"></script>
</head>
<body >
<div >
<!-- Custom Filter -->
<table>
<tr>
<td>
<select id='searchByBrand'>
<option value=''>-- Select Brand--</option>
<option value='Coolcasino'>Coolcasino</option>
<option value='Schnellwetten'>Schnellwetten</option>
<option value='Lightning'>Lightning</option>
<option value='Happyslots'>Happyslots</option>
<option value='Payoutz'>Payoutz</option>
<option value='Instawin'>Instawin</option>
<option value='Quickbet'>Quickbet</option>
</select>
</td>
<td>
<select id='searchByProvider'>
<option value=''>-- Select Provider--</option>
<option value='4ThePlayer'>4ThePlayer</option>
<option value='Bad Dingo'>Bad Dingo</option>
<option value='Big Time Gaming'>Big Time Gaming</option>
<option value='Boomerang'>Boomerang</option>
<option value='Booming Games'>Booming Games</option>
<option value='Dicelab'>Dicelab</option>
<option value='Electric Elephant'>Electric Elephant</option>
<option value='Evoplay'>Evoplay</option>
<option value='Fantasma'>Fantasma</option>
<option value=''>Games Lab</option>
<option value=''>High Flyer Games</option>
<option value=''>Inspired</option>
<option value=''>Isoftbet</option>
<option value=''>Jelly</option>
<option value=''>Just For The Win</option>
<option value=''>Kalamba</option>
<option value=''>Max Win Gaming</option>
<option value=''>Microgaming</option>
<option value=''>Netent</option>
<option value=''>NoLimit City</option>
<option value=''>Northernlights</option>
<option value=''>Peter and Sons</option>
<option value=''>PG Soft</option>
<option value='Play N Go'>Play N Go</option>
<option value=''>Pragmatic Play</option>
<option value=''>Print Studios</option>
<option value='Quickspin'>Quickspin</option>
<option value='Red Tiger'>Red Tiger</option>
<option value='Reflex Gaming'>Reflex Gaming</option>
<option value='Relax'>Relax</option>
<option value='Relax Gaming'>Relax Gaming</option>
<option value='Silverback'>Silverback</option>
<option value='Slingo'>Slingo</option>
<option value='Spearhead'>Spearhead</option>
<option value='STHLM Gaming'>STHLM Gaming</option>
<option value='Yggdrasil'>Yggdrasil </option>
</select>
</td>
</tr>
</table>
<!-- Table -->
<table id='empTable' class='display dataTable'>
<thead>
<tr>
<th>Brand</th>
<th>Provider</th>
<th>Product</th>
<th>URL</th>
</tr>
</thead>
</table>
</div>
<!-- Script -->
<script>
$(document).ready(function(){
var dataTable = $('#empTable').DataTable({
'processing': true,
'pageLength': 10,
'serverSide': true,
'serverMethod': 'post',
//'searching': false, // Remove default Search Control
'ajax': {
'url':'ajaxfile.php',
'data': function(data){
// Read values
var Provider = $('#searchByProvider').val();
var Brand = $('#searchByBrand').val();
// Append to data
data.searchByProvider = Provider;
data.searchByBrand = Brand;
}
},
'columns': [
{ data: 'Brand' },
{ data: 'Provider' },
{ data: 'Product'},
{ data: 'URL', render:function (dataField) { return '<a target="_blank" href="' + dataField + '">Game Link</a>'; } },
]
});
$('#searchByBrand').change(function(){
dataTable.draw();
});
$('#searchByProvider').change(function(){
dataTable.draw();
});
});
</script>
</body>
</html>
in the talbe 4 column(Brand,Provider,Product,Url) Brand and Provider show as filter. I want to show when someone filter with Brand with show only 2 random data from Provider and also want to show always randomly
Is this possible?
Please help me.
Thanks a lot!
Simply add order by rand() limit 2 to retrieve 2 random records from the db table
For example, if the select query (in your ajaxfile.php) is like
select [fields...] from [tablename] where [conditions]
then change to
select [fields...] from [tablename] where [conditions] order by rand() limit 2
I'm want to show php include based on the drop down menu choice.
But the trick is that I want to show the include before submitting the page.
<?php include 'page.php'; ?>
<select name="s1"style="width: 70px;" >
<optgroup label="My Input">
<option value="">Select...</option>
<option value="one kind</option>
<option value="second kind</option>
</select>
How can I show my page based on option selected before page is submited?
I found it!
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
I want to display a number of textboxes in a form based on the selected option from a dropdown listbox.
For example, if user selects 1 then 1 textbox should be shown and if user selects 2 then 2 textboxes should be displayed. And I need to do it in PHP.
I found some answers using jQuery. Can we use jQuery inside PHP? If yes, then how?
Edit
#Edwin Alex
This is how my select option looks like.
<h2><u>DEPENDENT DETAILS</u></h2><br />
<table border="1" style="border-style:dotted" width="100%" id="dependenttable">
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td></tr>
<tr id="textboxDiv"></tr>
At the end of file inside <> these I have written your code.
You can use Jquery to get this. Try this,
HTML :
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td>
</tr>
<tr id="textboxDiv"></tr>
Jquery :
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#textboxDiv").html('');
if(selVal > 0) {
for(var i = 1; i<= selVal; i++) {
$("#textboxDiv").append('<input type="text" name="textVal[]" value="" />');
}
}
});
});
</script>
Paste this code at the bottom of your page inside tag.
Your select box ID should be dropdown.
You need to have a div with an ID textboxDiv to place your generated textboxes.
I think you can do it easily with the help of JavaScript. Here is an example of it. Try it and modify it according to your requirement
<html>
<head>
<title>Select DIV to show</title>
<script type="text/javascript">
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<count;i++)
document.getElementById('myDiv'+i).style.display = 'none';
if(no>0)
document.getElementById('myDiv'+no).style.display = 'block';
}
</script>
</head>
<body>
<form name="myForm">
<select onChange="show(this)">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
<div id="myDiv1" style="display:none"> <form>
<select>
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form></div>
<div id="myDiv2" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
<div id="myDiv3" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
</body>
</html>
In this example just change the code in "myDiv1", "myDiv2", "myDiv3". I think it will hep you.:)
I have a html form defined . I have a button for the user to select his occupation . If his occupation happens to be a student then i need to generate another new button dynamically . If the user selects anything other than a student then i dont want any new button . I am unsure how to do . Do i use jquery ? I have no idea to use jquery . Can some one help ? Any pointers
Thanks.
<?php
?>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
</script>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<form>
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
</form>
</body>
</html>
Personally I accomplish this by placing the additional form element in the HTML, simply hidden like so:
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
Then you can use JS, as I prefer jQuery, to show the div or hide the div when applicable:
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
Using jQuery would simplify this:
Let's say you have the following:
<form>
<select name="occupation">
<option value="Non-Student">Non-Student</option>
<option value="Student">Student</option>
</select>
</form>
Then the following would be used to append the button if the user selected 'Student':
$(function(){
$('select[name="occupation"]').change(function(){
var val = $(this).val();
if(val=='Student'){
$('form').append('<button>New Button</button>');
}
});
});
i want to know how can we select more than one option from a select box like given below:
<label for="color">Colors</label>
<select class="inputbox" name="color" id="color" style="width:180px;">
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Tan">Tan</option>
<option value="Navy">Navy</option>
<option value="RoyalBlue">Royal Blue</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
<option value="Kelly(Green)">Kelly(Green)</option>
<option value="Burgundy">Burgundy</option>
</select>
Thanks
All you have to do is use the multiple attribute on the select box.
<select name="some-select" id="some-select" multiple="multiple">
<option>Black</option>
<option>White</option>
<option>Other</option>
</select>
inorder to use multiple values for a named parameter in $_GET/$_POST/$_REQUEST arrays in PHP, you have to name your form field like this:
name="myFieldName[]";
by puting the braces at the end of the name of the field, PHP will be able to store multiple values for that paramter. if you are using multiple checkboxes, or multiple selects, you should name your fields like this.
and don't forget the values for HTML option tags.
in your case, the HTML should be like this:
<select name="some-select[]" id="some-select" multiple="multiple">
<option value="balck">Black</option>
<option value="white">White</option>
<option value="other">Other</option>
</select>
your PHP code that is the action of the form can have the data like this.
$mySelectValues = $_REQUEST['some-select'];
// mySelectValues is an array now
foreach ($mySelectValues as $selected) {
echo $selected;
}
when you are viewing your HTML page, you can select multiple options by holding the Ctrl key and then selecting other options.
Ordinarily an HTML form will allow you to Ctrl-Click multiple options from a combo box, if you use the "multiple" option in the tag.You can also use "Shift-Click" for a range of values.
But the interesting question is how can you implement this so that more than 10% (estimated) of users can figure out how to use it?
I was late here but will try post my answer. may not be the best.
Add multiple attribute to the select and change name="color" to an array like name="color[]"
<label for="color">Colors</label>
<select class="inputbox" name="color[]" id="color" style="width:180px;" multiple>
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Tan">Tan</option>
<option value="Navy">Navy</option>
<option value="RoyalBlue">Royal Blue</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
<option value="Kelly(Green)">Kelly(Green)</option>
<option value="Burgundy">Burgundy</option>
</select>
and php could do something like this
foreach ($_POST['color'] as $selectedColor)
echo $selectedColor."\n";
//and this echos a comma separated string
$colorString=implode(",", $_POST['color']);
echo $colorString;
How to select multiple items? CTRL+Click the Options.
I've had this same problem, and the guys at htmlforums managed to come up with a way.
Heres the forum link:
http://www.htmlforums.com/client-side-scripting/t-select-multiple-items-without-ctrl-117760.html
And heres the answer: (i havn't had time to adapt it to your code, sorry)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
// Variables we need
var previous = new Array();
var lastClicked = '';
// We are going to attach event listeners, no code at the bottom or anything hard coded...
function addEvent(obj, evType, fn)
{
if(obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if(obj.attachEvent)
{
var r = obj.attachEvent('on' + evType, fn);
return r;
}
else
{
return false;
}
}
// Let's begin when the DOM is ready
addEvent(window, 'load', begin);
// Attach the handlers to our selects
function begin()
{
addSelect('numbers');
addSelect('sm');
addSelect('sm2');
}
// We add a couple of handlers to each
function addSelect(id)
{
var sel = document.getElementById(id);
addEvent(sel, 'click', whichElement);
addEvent(sel, 'click', addRemoveClicked);
}
// Find which element we are looking at on this click
function whichElement(e)
{
if(!e)
{
var e = window.event;
}
if(e.target)
{
lastClicked = e.target;
}
else if(e.srcElement)
{
lastClicked = e.srcElement;
}
if(lastClicked.nodeType == 3) // Safari bug
{
lastClicked = lastClicked.parentNode;
}
}
// Make sure we are displaying the correct items
function addRemoveClicked(e)
{
if(!previous[this.id])
{
previous[this.id] = new Array();
}
// Remember what has been used
if(previous[this.id][lastClicked.value] == 1)
{
previous[this.id][lastClicked.value] = 0;
}
else
{
previous[this.id][lastClicked.value] = 1;
}
var selectBox = document.getElementById(this.id);
// Add correct highlighting
for(var i = 0; i < selectBox.options.length; i++)
{
selectBox.options[i].selected = '';
if(previous[this.id][selectBox.options[i].value] == 1)
{
selectBox.options[i].selected = 'selected';
}
}
}
</script>
</head>
<body>
<form name="selectTest" action="">
<select name="numbers" id="numbers" multiple="multiple" size="6">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="sm" id="sm" multiple="multiple" size="6">
<option value="a">To make</option>
<option value="b">Multiple</option>
<option value="c">Selections</option>
<option value="d">Just Click</option>
<option value="e">With The</option>
<option value="f">Mouse</option>
</select>
<select name="sm2" id="sm2" multiple="multiple" size="6">
<option>Everything</option>
<option>Is</option>
<option>Possible</option>
<option>Until</option>
<option>Proven</option>
<option>Otherwise</option>
</select>
</form>
</body>
</html>
I hope this helps.
Thanks,
Matthew Millar