once i select a particular value in dropdown menu based on that corresponding checkbox values should display
this is for getting dropdown values dynamically, based on this below i should get checkbox values
<tr>
<?php
$sub=mysql_query("select * from subjects");
$suboption='';
while($row= mysql_fetch_assoc($sub))
{
$suboption .='<option value = '.$row['sub_id'].'>'.$row['subname'].'</option>';
}
?>
<td width="15%">Subject :</td>
<td id="add_subject"><div id="add_subject1">
<select name="subject" id="subject" onchange="subjectskills(this.value)">
<option value="">Select Subject</option>
<?php echo $suboption; ?>
</select>
</div></td>
</tr>
You should create a 'div' tag where the updated checkbox values would be displayed through ajax. This is the following function which is called everytime the listbox value changes:
This is the script function:
function subjectskills(value)
{
var xmlhttp= new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("check_box").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","subjectskills?from="+value,true);
xmlhttp.send();
}
This is the div tag for checkbox:
<div id="check_box"></div>
Here's subjectskills.php:
<?php
if(isset($_GET['from']))
{
$from=$_GET['from'];
echo"<input type='checkbox' value='$from'>$from";
}
?>
Related
I have a we page (index.html), where user can select option from drop down menu. Based on the selection data will be fetched from database and be displayed on the same page using AJAX (second file is called getParameter.php). Everything works fine. Now I tried to add a Button so that a new page will open and user can edit and send new value to database. But the button press does nothing. I tried it with other html files. It works everywhere else. Any help please
Index.html
//AJAX
<script>
function showParameterData(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getParameterData.php?q="+str,true);
xmlhttp.send();
}
}
</script>
//drop down option selection
<body>
//showParameterData() is the function
<form>
<select name="Device" onchange="showParameterData(this.value)">
<option value="">Select</option>
<option value="1">Device A </option>
<option value="2">Device B </option>
<option value="3">Device C </option>
<option value="4">Device D </option>
<option value="5">Device E </option>
<option value="6">Device F </option>
</select>
</form>
//bitton to edit and send data
<div class="edit_button_class" style= "float:right;">
<form action="edit.html" method="get" target="_blank">
<input type="submit" name="submit" id ="mybutton1" value="Click to Edit" />
</form>
</div>
<div id="txtHint"></div>
</body>
//getParameter.php
<?php
$q = intval($_GET['q']);
include ("DBconnect.php");
$conn= mysqli_connect( $dbhost, $dbuser, $dbpass, $db ) or die("Could not connect: " .mysqli_error($conn) );
$sql="SELECT * FROM parameter WHERE ID = '".$q."'";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_array($result)) {
$price = $row['price'];
$version = $row['version'];}
echo '<table>';
echo "<tr>
<th>Price of the Device :</th>
<td > $price </td>
</tr>";
echo "<tr>
<th>version of the Device :</th>
<td > $version </td>
</tr>";
echo '</table>';
echo '</div>';
When I press the button URL is changing to something weird. It is not going to edit.html. Even if I refresh the page, the weird URL is still there. Even though it shows index.html page some extra stuff in the URL
The stuff you are seeing in the URL are get parameters. You by using method='get' you are telling the form to submit in this way.
What this will do is send all the names of the inputs and their values into the URL and "attach" them to the action page you have chosen.
For example, you clicking the button will send you to edit.html with the get parameters of submit and the value of this which is "Click to Edit". Anything that has the name attribute will be sent as a get parameter. You dont need a name for a submit input.
If you place your select into the form with the submit button, it will send the parameter for the select and that means you can use it in your edit page.
<div class="edit_button_class">
<form action="edit.html" method="get" target="_blank">
<select name="Device" onchange="showParameterData(this.value)">
<option value="">Select</option>
<option value="1">Device A </option>
<option value="2">Device B </option>
<option value="3">Device C </option>
<option value="4">Device D </option>
<option value="5">Device E </option>
<option value="6">Device F </option>
</select>
<input type="submit" id ="mybutton1" value="Click to Edit" />
</form>
</div>
I removed the name from the input as this causes it to be sent as a GET parameter. Using the above you will be sent to /edit.html?submit=Click+to+Edit which you can then use in your edit page to get what you need.
Hope this helps.
I have two chosen select box for fetching values from MYSQL DB
When No-1 Select box change then No-2 select box generate from AJAX response.
Chosen Plugin in No-1 work perfectly. But When No-2 select box generate from ajax then chosen plugin doesn't work in No-2 select box.
Main.PHP
<div class="control-group">
<label for="textfield" class="control-label">Category<span>*</span></label>
<div class="controls">
<select name="category" id="category" multiple="multiple" class="chosen-select input-medium" required onchange="showSubCat(this.value)">
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
</select>
<input type='hidden' value='' id='categoryId' name='categoryId'>
</div>
</div>
<div class="control-group">
<label for="textfield" class="control-label">Sub Category</label>
<div class="controls">
<select name="subCat_2" id="subCat_2" multiple="multiple" class="chosen-select input-large">
<option value="">--- Select Sub Category---</option>
</select>
</div>
</div>
JS CODE :
var xmlhttp;
function showSubCat(str){
if( $('#category :selected').length > 0){
//build an array of selected values
var selectednumbers = [];
$('#category :selected').each(function(i, selected) {
selectednumbers[i] = $(selected).val();
});
}
//alert(selectednumbers);
document.getElementsByName('categoryId')[0].value = selectednumbers;
if (str==""){
document.getElementById("subCat_2").innerHTML="";
return;
}
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("subCat_2").innerHTML=xmlhttp.responseText;
//alert(xmlhttp.responseText);
console.log(xmlhttp.responseText);
}
}
xmlhttp.open("GET","MYurl.php?catId="+selectednumbers,true);
xmlhttp.send();
}
AJAX.PHP
echo "<option value=''>--- Select Sub Category --- </option>";
$sql="SELECT field FROM tableName WHERE condition;
$result = mysql_query($sql) or die('MySql Error' . mysql_error());
while($row = mysql_fetch_array($result)){
echo "<option value='1'> ----- Sub Option 1</option>";
}
Let me know what i have done Wrong..??
Assuming you're calling chosen on the 2nd list, try using
$('#subCat_2').trigger('chosen:updated');
after you update its list.
If you look at plugin page it indicates that
`You can trigger several events on the original select field to invoke a behavior in Chosen.
chosen:updated This event should be triggered whenever Chosen’s underlying select element changes (such as a change in selected options).`
You need to rebuild the selectbox with new data in it.
if (xmlhttp.readyState==4 && xmlhttp.status==200){
// bind new data
document.getElementById("subCat_2").innerHTML=xmlhttp.responseText;
// refresh chosen.
$('#subCat_2').trigger("chosen:updated");
}
in form edit data wants to display in the form...but drop down values should not get selected ...i want drop down value get seleted
here is code in list_search function id return cmb_fruit, val return Apple or Orange
<tr>
<td width="38%" height="28" align="left"><span class="style20"><font color="#DC143C">*</font>Profession</span></td>
<td width="62%" align="left"><label for="profession"></label>
<select name="cmb_fruit" size="1" id="cmb_fruit">
<option value="Select">Select</option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
</select>
<script language="javascript" type="text/javascript">
list_search('cmb_fruit',<?php echo "'" . #mysql_result($rs_modify,0,'fruit') . "'";?>)
</script>
</td>
</tr>
function list_search(id,val)
{
cnt=document.getElementById(id).length
for(x=0; x<cnt; x++ )
{
if( document.getElementById(id).options(x).value==val)
{
document.getElementById(id).options(x).selected=true
break;
}
}
}
var fruit = document.getElementById("fruit");
fruit.options[fruit.options.selectedIndex].selected = true;
You can set the value property of the select. Also, make sure the list_search function is declared in the head if you are calling it from a script that runs in the body.
function list_search(id, val) {
document.getElementById(id).value = val;
}
Note that you don't need javascript for this and you could simpy put the selected attribute on the option element you want to select.
<option value="Apple" selected>Apple</option>
I hope my whole day trouble will at least be over by now. I have 2 drop down box. After submitting I have only first's dropdown box value in the action page. My second drop down box is dependent on the value selected in first dropdown box.
This is the ajax code in head section
<script>
function getXMLHTTP() { //function to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getScreen(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('screendiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
and this is the body of the page
<form method="post" action="a.php" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Device Name</td>
<td width="150"><select name="device" onChange="getScreen('finddevice.php?device='+this.value)">
<option value="">Select device</option>
<option value="1">Iphone 3</option>
<option value="2">Iphone 4</option>
<option value="3">Ipad </option>
<option value="4">android </option>
</select></td>
</tr>
<tr style="">
<td>Screen</td>
<td ><div id="screendiv"><select name="screen">
<option>Select Screen</option>
</select></div></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
It call the finddevice.php page which has following codes
<? $device=$_REQUEST['device'];
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('future');
$query="select screen from screen where device_id=$device";
$result=mysql_query($query);
?>
<select name="screen">
<option>Select Screen</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['screen']?></option>
<?php $row['device_id'] ?>
<? } ?>
</select>
Its working perfectly and bringing the value from the table into the second dropdown box upon selection of the value from the first dropdownbox. But when I submit the data, I can only access the first dropdown box value in the a.php file using $_POST method. That means I can only get the value of $_POST['device'] but there is not value from $_POST['screen']. Please help me out.
In finddevice.php, line 14 (as above) you seem to have missed value of option in 2nd drop down
I mean <option value> should be something like <option value="1">
Try filling in id or something unique as value for options in 2nd drop down
Unless you fill in values of options, 2nd drop down will submit blank value to a.php
finddevice.php:
<?php
$device=$_REQUEST['device'];
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('future');
$query="select id, screen from screen where device_id=$device";
//if screen table contains id field ...
//replace id with primary key or any unique identifier for screen table
//if there aint any primary key in "screen" table, use a field that is unique
//or create a primary key
$result=mysql_query($query);
?>
<select name="screen">
<option>Select Screen</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<!-- <option value><?=$row['screen']?></option> -->
<option value="<?php echo $row['id']; ?>"><?php echo $row['screen']; ?></option>
<?php } ?>
</select>
I'm new to php/ajax and to an extent sql. I'm trying to add a dynamic drop down box which when select will either load up another drop down box with dates or another text box. Can someone point me towards some simple examples that are not very confusing. I understand that ajax is best for this.
script
function showfield(name){
if(name=='byreturn')document.getElementById('div1').style.display="block";
else document.getElementById('div1').style.display="none";
}
if(name=='forwardorder')document.getElementById('div2').style.display="block";
else document.getElementById('div2').style.display="none";
}
function hidefield() {
document.getElementById('div1').style.display='none';
}
page
<tr><td> <body onload='hidefield()'>
Choose Delivery Type </td>
<td> <select name = 'elementtype1'id='elementtype1' onchange='showfield(this.options[this.selectedIndex].value)'>
<option value='forwardorder'>Forward Order</option>
<option value='byreturn'>By Return</option>
</select></td>
<td>
<div id='div1'>Enter By Return Date<input type='text''name='whatever1' />
</div>
<div id='div2'>
<td>Capacity</td>
<td><select name='deliveryDate'>
$listCapacityDates = $cid->ListCapacity();
foreach($listCapacityDates as $x) {
<option value='" . $x[cap] . "'</option>;
</div>
</td></tr>
This is very simple
<select name="first" onChange="populateNextBox(this)">
<options value="1">Microsoft</options>
<options value="2">Oracle</options>
</select>
<div id="populate"></div>
When user select the value from the drop down
required java script function
function populateNextBox(e) {
alert(e.value); //will print the selected value
//used jquery for populating data
$.post('ajax/test.php?id='+e.value, function(data) {
$('#populate').html(data);
});
}
//Your ajax/test.php will create the content for the dropdown