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);
});
Related
I am working on a website where i want to do chained autocomplete using mysql database where i want to search the second text field using the first text field input
here is the html code:
<script type="text/javascript">
$(document).ready(function(){
$("#name").autocomplete({
source:'node_fetch.php',
minLength:1
});
});
</script>
</head>
<body>
<form method="post" action="">
Name : <input type="text" id="name" name="name" />
Name2 : <input type="text" id="name2" name="name2" />
</form>
and here is the php code:
<?php
include('config.inc');
$term=$_GET["term"];
$query=mysql_query("SELECT DISTINCT root1 FROM tree where root1 like '%".$term."%' order by root1 ASC");
$json=array();
while($student=mysql_fetch_array($query)){
$json[]=array(
'value'=> $student["root1"],
'label'=>$student["root1"]
);
}
echo json_encode($json);
?>
i want to autocomplete name2 from root2 using input selected in name1
any help? thanx in advance
Add select function in autocomplete options as below:
<script type="text/javascript">
$(document).ready(function(){
$("#name").autocomplete({
source:'node_fetch.php',
minLength:1,
select: function (event, ui) {
$("#name2").val(ui.item.label);
});
});
</script>
This will show selected item from autocomplete in the second text box.
Please mark as answered if that solve your problem.
I have a form and I want to set the values of the input fields on change of a form select. On change of the select ajax jquery runs and calls a PHP file with get method. But I don't know how to return the values from PHP (array or echo or any other way) and how to set them to the input values.
Using jQuery, this could be desired solution:
<form name="frm">
<input type="text" name="age" id="txtAge" />
<input type="text" name="country" id="txtCountry" />
<select name="name" id="selName">
<option value="Ceyhun Ganioglu">Ceyhun Ganioglu</option>
<option value="ABC">ABC</option>
<option value="CED">CED</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('select#selName').change(function(){
var name = $(this).val(); // selected option's value
$.getJSON("<URL_TO_PHP_SCRIPT>", { name: name }, function(data){
// on success, put returned value in textbox
// return data is in JSON (note, I am using `.getJSON` now)
$("#txtAge").val(data.age);
$("#txtCountry").val(data.country);
});
});
});
</script>
Your PHP Code could be:
<?php
echo json_encode(array('age' => 21, 'country' => 'US')); // you need to return on the basis of name, :)
?>
Read Ajax doc for jQuery $.getJSON here: http://api.jquery.com/jquery.getjson/
Other Ajax functions in jQuery: http://api.jquery.com/jquery.ajax/
I have a code like this
$(function() {
$('#book_id').change(function(){
$('#book_code').show();
var get_value = $(this).val();
$( "#book_code" ).html( get_value );
});
});
<td>
<select id="book_id" name="book_name" class="form-control">
<option value="">Select Book</option>
<?php while($row=mysql_fetch_array($book_query)){?>
<option value="<?php echo $row['book_code'];?>">
<?php echo $row['book_name']; ?>
</option>
<?php }?>
</select>
</td>
<td>
<div id="book_code">
<input type="text" class="form-control" value="" disabled="disabled" placeholder="Book Code" />
</div>
</td>
What i want to do is
On each select event, i need to show the book code inside a input text box (not editable)
The above code works but doesn't show the value inside the input box
How can I do that?
In other words, on each select event display the book code inside a text box
Thanks,
Kimz
You may try this (Working Example) :
$(function() {
$('#book_id').on('change', function(){
$('#book_code').find('input').val($(this).val());
});
});
You have to pass the class of input as well
$(function() {
$('#book_id').change(function(){
var get_value = $(this).val();
$( "#book_code .form-control" ).val( get_value );
});
});
in my code i am creating a drop down box and storing the changed value of the drop down in hidden variable.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select id="sweets">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<input type="hidden" id="inputfield">
<div></div>
<script type="text/javascript">
$(document).ready(function() {
$("#sweets").change(function() {
var var_name = $(this).val();
$('input[id=inputfield]').val(theValue);
}
});
});
});
</script>
</body>
</html>
<?php
if(isset($_POST['form']))
echo $_POST['inputfield'];
?>
once the combo box is changed the php should get the hidden field value and i ve to perform db transaction. again i need to load another drop down box based on the selected value.. Can you guide me
You can bypass all the horse trading with the hidden field and send it to php directly via ajax.
$(document).ready(function() {
$("#sweets").change(function() {
$.post('myphpfile.php', {sweet : $(this).val() });
});
});
myphpfile.php will receive the value as a post with the name of 'sweet'
Unless I'm misunderstanding, shouldn't
$('input[id=inputfield]').val(theValue);
be
$('input[id=inputfield]').val(var_name);
?
You can wrap the select and hidden elements in form element adding a post method and action attribute. Give the hidden field a name as in name="hidden field"
this way you can access it in the post variable.
<form action="currentpage.php" method="post">
<select id="sweets">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<input type="hidden" id="inputfield" name="hiddenfield"/>
<input type="submit" value="Submit" name="submit"/>
</form>
When the change event executes to update the hidden field and you submit in php you can do
if(isset($_POST["submit"]))
{
$val = $_POST["hiddenfield"] ;
}
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.