i want to implement a dynamic drop down which will select , batch of students from first drop down and then the corresponding subjects as the options for second drop down ..
this is the code for my Page :
<head>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
};
</script>
</head>
<?php
$dept =$_COOKIE[dept];
include_once("../Include/connectdb.php");
include_once("../Include/data_menu.php");
include_once '../Include/pagemaker.php';
?>
<script type="text/javascript">
$(document).ready(function()
{
$(".batch").change(function()
{
var id=$(this).val();
var dataString = 'year_join='+ id;
$.ajax
({
type: "POST",
url: "ajax_subject.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subject").html(html);
}
});
});
});
</script>
</head>
<body>
<br><br><br><br><br>
<fieldset class="cbox"><legend>Batch</legend>
<form name="frm" action=<?php print "edit_attendencePHP_NEW.php"; ?> method="GET"
id="content">
<br><br>
<div style="margin:80px">
<label>Batch :</label> <select name="batch">
<option selected="selected">--Select Batch--</option>
<?php
$result = mysql_query("select distinct year_joining from student_profile
order by year_joining ")or die(mysql_error());
while($year = mysql_fetch_assoc($result)){
if($year[year_joining]!="" && $year[year_joining]>"2008"){
print "<OPTION value='$year[year_joining]'>$dept $year[year_joining]</OPTION>";
} }
?>
</select>
<label>Subject :</label> <select name="subject" class="subject">
<option selected="selected">--Choose Subject--</option>
</select>
Date :<input type="text" size="12" id="inputField" name="date"/>
<input class="bluebutton" type="submit" value="Go">
</form><br>
<label class="comment">select a batch frm the list and press "Go"</label>
</fieldset>
the second ajax page works fine ... as i tested that with ($_GET)
this is wat with $_GET[year_join] ( view source code ) shows ...
ajax_subject.php
<option value="ENGG.MATHS-I">ENGG.MATHS-I</option><option value="COMPUTER PROGRAMMING
LAB">COMPUTER PROGRAMMING LAB</option><option value="WORKSHOPS">WORKSHOPS</option>
<option value="ENGG.PHYSICS">ENGG.PHYSICS</option><option
value="ENGG.CHEMISTRY">ENGG.CHEMISTRY</option><option ...........
Everything else seems fine ..
Right now it looks like no change event, which leads to the AJAX request, is being fired because your batch select element does not have a class of batch, only a name of batch. That is what you intended with $(".batch").change(function(){} right? Once you change, I would put an alert or console log in your callback function just to make sure it is even firing.
Related
When my select field loads, it successfully renders. Once I type at least the two character, it successfully pulls items from the server and lists them as options. However, if I try to select one of them, nothing happens. The drop-down popup stays open. Nothing gets put in the actual field. There are no errors in the JavaScript console. Its like I didn't click anything.
$(document).ready(function() {
$(".cusName").select2({
placeholder: '--- Select Item ---',
//allowClear: true,
ajax: {
url: '<?php echo base_url();?>search',
dataType: 'json',
delay: 250,
processResults: function(data) {
console.log(data)
return {
results: data
};
},
cache: true
}
});
$(".cusName").on('change', function() {
var data = $(".cusName").select2('data')[0];
console.log(data);
$("#cus_id").val(data.customer_id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />
<select class="cusName form-control" name="cusName"> </select>
<div class="col-sm-8">
<input type="text" class="form-control" id="cus_id" name="cus_id" value="">
</div>
since your problem was not ajax call as per your description i replaced it with the hardcoded values see below code snippet, if it works as you wanted it to
$(document).ready(function() {
$(".cusName").select2({
placeholder: '--- Select Item ---',
allowClear: false
});
$(".cusName").on('change', function() {
var data = $(".cusName").val();
console.log(data);
$("#cus_id").val(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />
<select class="cusName form-control" name="cusName">
<option value="">select Any</options>
<option value="apple">apple</options>
<option value="mango">mango</options>
<option value="juice">juice</options>
</select>
<div class="col-sm-8">
<input type="text" class="form-control" id="cus_id" name="cus_id" value="">
</div>
I want to fetch value through jquery Ajax in PHP. but when I run below this code value is fetch properly but all value are joined together when fetching and together value print all field, but I want to print the separate value in the separate field. my code is below, please solve this problem
index.php
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<select name="Pro" onChange="my_validate_func()" id="pro_serv">
<option value=""></option>
<option value="" ><font size="-1">Add New Product</font></option>
<option value="Development"><font size="-1">Development</font></option>
<option value="Maintance"><font size="-1">Maintance</font></option>
</select>
<br />
<input type="text" name="desc" id="desc" value="" />
<br />
<input type="text" name="unitprice" id="unitprice" value="" />
<br /><input type="text" name="discount" />
<script type="text/javascript" src="bootstrap/jquery1.8.3jquery.min.js">
</script>
<script>
$( document ).ready(function() {});
function my_validate_func() {
var pro_serv = $('#pro_serv').val();
if ($('#pro_serv').val() != "" ) {
$.ajax({
type: "POST",
url: 'check.php',
data: { pro_serv: pro_serv},
success: function(response) {
$('#desc').val(response);
$('#unitprice').val(response);
$('#tax').val(response);
}
});
}
}
</script>
</body>
</html>
check.php
<?php
include('database/db.php');
$type=$_POST['pro_serv'];
$sql="Select * from product_service_details where type='$type'";
$result=mysql_query($sql);
if($dtset=mysql_fetch_array($result))
{
$desc=$dtset['desc'];
$unitprice=$dtset['unitprice'];
$tax=$dtset['tax'];
echo $desc;
echo $unitprice;
echo $tax;
}
?>
You need to use json_encode in php and in jquery you need to parse the response like below:
PHP:
<?php
include('database/db.php');
$type=$_POST['pro_serv'];
$sql="Select * from product_service_details where type='$type'";
$result=mysql_query($sql);
if($dtset=mysql_fetch_array($result))
{
echo json_encode($dtset);
}
JQuery:
$.ajax({
type: "POST",
url: 'check.php',
data: { pro_serv: pro_serv},
success: function(response) {
var res = $.parseJSON(response);
$('#desc').val(res.desc);
$('#unitprice').val(res.unitprice );
$('#tax').val(res.tax );
}
});
You can use a separates for separate values then use JS split function.
echo $desc ."-" . $unitprice ."-" .$tax;
In Js
var arr = response.split('-');
$('#desc').val(arr[0]);
$('#unitprice').val(arr[1]);
$('#tax').val(arr[2]);
in check.php
*echo $tax;* should be echo json_encode('tax'=>$tax);
and in index.php
$('#tax').val(response); can be $('#tax').val(response.tax);
I use dropdown list with PHP to retrieve data from my sql database, It exists on this link.
It worked well but when I change the menu style what I want, does not work.
this menu code is what I want:
<select name="parent_cat" id="parent_cat" data-native-menu="false" class="filterable-select" data-iconpos="left">
I think the problem exists because the menu shows in popup : `#&ui-state=dialog`
but I do not know how to solve this problem.
this full HTML code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parent_cat").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
$("#sub_cat").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="parent_cat" id="parent_cat" data-native-menu="false" class="filterable-select" data-iconpos="left">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['category_name']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>
Please help
I am sending state,city,zip code to ajax.php file. using jquery.
I am unable to get those values in response
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Jquery Ajax</title>
</head>
<body>
<!------------------------Jquery-------POST DATA----------------------------------------->
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id-submit').click(function() {
var reg_state = $('#reg_state').val();
var reg_city = $('#reg_city').val();
var reg_zip = $('#reg_zip').val();
var dataString = 'reg_state='+ reg_state;
//alert(dataString);
$.ajax
({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(data)
{
//$("#state").html(data);
alert(data);
}
});
});
});
</script>
<!------------------------Jquery-----------POST DATA END------------------------------------->
<form id="registration_form" action="" method="post">
<div id="state"></div>
<div class="reg-id">
<label>
<input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value="">
</label>
</div>
<div class="reg-id">
<label>
<input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value="">
</label>
</div>
<div class="reg-id-last">
<label>
<input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value="">
</label>
</div>
<input type="submit" value="submit" tabindex="3" name="reg_btn" id="id-submit">
</div>
</form>
</body>
</html>
This is the ajax.php file , from where i need to send response, and make it visible in div id="state
<?php
if($_POST['reg_state'])
{
echo $_POST['reg_state'];
}
else{
echo 'nothing';
}
?>
Try create an object
var dataString = { reg_state: reg_state, reg_city: reg_city, reg_zip : reg_zip }
I believe your problem lies in the type=submit. Replacing this with type=button gives you the result you want.
I'm unsure why this is, but I'm guessing it type=submit gives extra functionality to the input. The page seems to reload after hitting the submit button.
ps. don't forget you actually need to click the button in order for the function to trigger. Hitting enter after filling out the input fields will do nothing.
When ever we use input['type']="submit" in form
we have to use
$('#id-submit').click(function(e) {
e.preventDefault();
}
Here is the full working code
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Jquery Ajax</title>
</head>
<body>
<!------------------------Jquery-------POST DATA----------------------------------------->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id-submit').click(function(e) {
e.preventDefault();
var reg_state = $('#reg_state').val();
var reg_city = $('#reg_city').val();
var reg_zip = $('#reg_zip').val();
var dataString = { reg_state: reg_state, reg_city: reg_city, reg_zip : reg_zip }
//alert(dataString);
$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(data)
{
$("#state").html(data);
// alert('hi');
}
});
});
});
</script>
<!------------------------Jquery-----------POST DATA END------------------------------------->
<form id="registration_form" action="" method="post">
<div id="state"></div>
<div class="reg-id">
<label>
<input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value="">
</label>
</div>
<div class="reg-id">
<label>
<input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value="">
</label>
</div>
<div class="reg-id-last">
<label>
<input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value="">
</label>
</div>
<input type="submit" value="Response" tabindex="3" name="reg_btn" id="id-submit">
</div>
</form>
</body>
</html>
ajax_city.php
<?php
if($_POST['reg_state'])
{
echo 'STATE: '.$_POST['reg_state'].'<br/>';
echo 'CITY: '.$_POST['reg_city'].'<br/>';
echo 'ZIP: '.$_POST['reg_zip'].'<br/>';
}
else{
echo 'nothing to respond';
}
?>
Here is my link: http://vkacademy.in/medvanndemo/test/ type Class.I want to get the selected dropdown value in jquery. I have tried onkeyup,keypress, change and bind also. here is my code.
<html>
<script type="text/jscript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#categoryfield').autocomplete({source:'suggest_cate.php', minLength:2});
});
</script>
<script>
$(document).ready(function(){
//alert('ok');
$("#categoryfield").change(function()
{
var catid1=this.value;
//alert(catid1);
var url="sample.php?cateid1="+catid1;
//alert(url);
$.post(url,function(data){
//alert(data);
$("#option1").html(data);
});
});
$("#option2").click(function(){
$("#option2_error").html("Sorry! Please select the product.");
});
});
</script>
<body>
<form name="frm1" action="" method="post">
<input type="text" name="category" id="categoryfield" value='' class="buttonlength" placeholder="E.g. Tuition, Music, Dance"/>
<span id="option1">
<select name="pname" id="option2">
<option value="">Select the field</option>
</select></span>
<span id="option2_error" style="color:red; font-size:15px;"></span>
<br><input type="submit" name="sub"/>
</form>
</body>
</html>
Here: I have given my link using jquery autocomplete I am bringing the data.but my problem is I have used change function. so I will not get the full selected drop down value.
I have tried bind,onkeyup,keypress, keydown nothing is working for me.
sample.php
Here I want to get only one value like Class I-V Tuition (All Subject),Class I-V Tuition (Maths).when echo it, it stops at class full value is not coming how to get the selected dropdown in jquery.base on this In php I want to show the form in php.
<select name="pname">
<?php
$query=mysql_query('select p.p_cat as test from parent_cat p where p.p_cat like "%'. mysql_real_escape_string($_GET['cateid1']) .'%" union select c.ch_cat as test from child_cat c where c.ch_cat like "%'. mysql_real_escape_string($_GET['cateid1']) .'%" union select s.sub_cat as test from sub_cat s where s.sub_cat like "%'. mysql_real_escape_string($_GET['cateid1']) .'%"');
while($row2=mysql_fetch_array($query))
{
?><option value="<?php echo $row2['pid'];?>"><?php echo $row2['test'];?></option><?
}
?>
</select>
try it $(this).val() instead of this.value;
$("#categoryfield").change(function()
{
var catid1=$(this).val();
//alert(catid1);
var url="sample.php?cateid1="+catid1;
//alert(url);
$.post(url,function(data){
//alert(data);
$("#option1").html(data);
});