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
Related
Can anyone give me an example how to disable dropdown list? What I want is when user choose Coaches and Mentoring or Others, second and third dropdown list will disable. Thank you for your help.
<tr>
<td>Action</td>
<td><select name = "TTID1" id="TTID1" style="width:250px" onchange="otherAction(this.value)">
<option value="O"></option>
<option value="600">Classroom Training</option>
<option value="601">Coaches and Mentoring by IM</option>
<option value="602">On Job Training</option>
<option value="9999">Others</option>
</select></td>
<td>Proposed Training in ILSAS</td>
<td><select name = "trainGroup1" id="trainGroup1" style="width:250px" onchange="otherIlsas(this.value)">
<option value="O"></option>
<option value="700">Power Engineering & Energy Training</option>
<option value="701">Management Training</option>
<option value="702">IT & Corporate System Training</option>
<option value="703">Business Operation Tools Certification</option>
<option value="9999">Others</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><?php
$qry="SELECT trainID, trainText FROM tbltraininglist order by traintext asc";
$result=mysql_query($qry);
echo "<select name = 'trainID1' id='trainID1' style='width:250px' )'>";
echo "<option value ='null'></option>";
while ($row = mysql_fetch_array($result)) {
?>
<option value="<?php echo $row['trainID']; ?>"><?php echo $row['trainText']; ?> </option>
<?php
}
?>
</select></td>
<script type="text/javascript">
$(document).ready(function() {
$('#TTID1').change(function() {
if($(this).val() == "601" || $(this).val() == "9999")
{
$('#trainGroup1').prop('disabled', true);
}
else
{
$('#trainGroup1').prop('disabled', false);
}
});
});
</script>
Here is a super basic answer using the onchange event. Making it more dynamic and tweaking it for properly resetting your select fields I'll leave up to you to customise. :)
Try this simple example like below :
$('#TTID1').on('change', function(){
if ( $(this).val() == 601 || $(this).val() == 9999 ) {
$('#trainGroup1 option[value="700"], #trainGroup1 option[value="701"]').prop('disabled', true);
} else {
$('#trainGroup1').find('option').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>Action</td>
<td><select name = "TTID1" id="TTID1" style="width:250px">
<option value="O"></option>
<option value="600">Classroom Training</option>
<option value="601">Coaches and Mentoring by IM</option>
<option value="602">On Job Training</option>
<option value="9999">Others</option>
</select></td>
<td>Proposed Training in ILSAS</td>
<td><select name = "trainGroup1" id="trainGroup1" style="width:250px">
<option value="O"></option>
<option value="700">Power Engineering & Energy Training</option>
<option value="701">Management Training</option>
<option value="702">IT & Corporate System Training</option>
<option value="703">Business Operation Tools Certification</option>
<option value="9999">Others</option>
</select></td>
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...
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>');
}
});
});
Is this the best way of doing this...
I have some drop downs and when a user selects an option I take their selection and send it to a php page to query a database then return that data to a div...
code is below
<?PHP
include('includes/inc_header.php');
#<-- SQL QUERIES START ------------------------------------------->
$sql1 = "SELECT Team.ShortLabel ShortLabel,Team.Label Label
FROM adlTeam Team
INNER JOIN adlPlanet Planet ON Team.TeamKey = Planet.TeamKey
GROUP BY ShortLabel";
$queryrow1 = mysql_query($sql1);
#<-- SQL QUERIES END ------------------------------------------->
?>
<script type="text/javascript">
$(document).ready(function()
{
$("#selectOwner").change(function ()
{
$.post('process.php', $(this).serialize()
,function(data){$("#ownerInfo").html(data)});
return false;
});
$("#selectZoom").change(function ()
{
$.post('zoomchange.php', $(this).serialize()
,function(data)
{
$("#mapchanges").html(data)
});
return false;
});
$("#nameStatus").change(function ()
{
$.post('mapchanges.php', $(this).serialize(), function(data)
{
$("#zoomchanges").html(data)
});
return false;
});
});
</script>
<div id="primary_content">
<form name="myform" id="myform" action="" method="POST">
<h3>SELECT TEAM</h3>
<select name="selectOwner" id="selectOwner" size="10"
style = "width:250px;margin-top:-12px;margin-left:15px;">
<?PHP
while ($clanlist = mysql_fetch_array($queryrow1))
{
#<-- SQL QUERIES START ------->
$sql3 = "SELECT Red, Green, Blue FROM adlteam
WHERE ShortLabel = '".$clanlist['ShortLabel']."'";
$queryrow3 = mysql_query($sql3);
$colors = mysql_fetch_array($queryrow3);
#<-- SQL QUERIES END ------------>
?>
<option id="ownerID_input" name="ownerID"
value="<?php
echo $clanlist['ShortLabel']; ?>"><?php echo $clanlist['Label']; ?>
</option>
<?PHP
}
?>
</select>
</form>
<div id="ownerInfo"></div>
<div id="planetInfo"></div>
<div id="mapchanges"></div>
<div id="zoomchanges"></div>
<div id="mapoptions">
<span class="h4">ZOOM:</span>
<select name="selectZoom" id="selectZoom">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<input type="checkbox" style="margin-top:10px;"
name="nameStatus" id="nameStatus">
<span class="pinfo">Planet Names</span>
</div>
</div>
<div id="secondary_content">
<iframe src="mapgendisplay.html" name="testFrame" id="testFrame"
width="695" height="564" scrolling="no"
frameborder="0" allowtransparency></iframe>
</div>
<?PHP include('includes/inc_footer.php'); ?>
From what I can see, that does look like a good way of doing what you're trying to do. More information would be useful though.
It's possible you could reduce the code by making the functions more general:
var phpfile = new Array();
phpfile["selectZoom"] = "zoomchange.php";
...
...
var elementID = new Array();
elementID["selectZoom"] = "#mapchanges";
...
...
$("select").change(function() {
$.post(
phpfile[$(this).id()],
$(this).serialize(),
function(data) {
$(elementID[$(this).id()]).html(data)
}
);
});