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.
Related
I am using this code
$('.calc').blur(function () {
var sum = 0;
$('.calc').each(function() {
if($(this).val()!="")
{
sum += parseFloat($(this).val());
}
});
$('.full_calc').val(sum);
});
to fill dynamically input and I want to get its data dynamically (changed in every new input filled) in php variable and use it for other calculations without a submit button. Can I do this?
try this, change jquery file name like you have there :
<html>
<head>
<title>On Change</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
function sum(){
$("#n3").val(eval($("#n1").val())+eval($("#n2").val()));
}
$(document).ready(function(e) {
$("#n1").change(function(){
sum();
});
$("#n2").change(function(){
sum();
});
});
</script>
</head>
<body>
N1 :<input type="text" name="n1" id="n1" value="0" /><br>
N2 :<input type="text" name="n2" id="n2" value="0" /><br>
N3 :<input type="text" name="n3" id="n3" value="0" />
</body>
</html>
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);
});
I'm using a form plugin / addon where I don't have control over how the form is generated.
The form generates HTML which looks like this:
<form>
<label>First Name</label><input name="Question25" type="text" value="" />
<input class="formBlockSubmitButton" name="add" type="submit" value="Submit" />
</form>
I would like to prefill some of the form values but I can't write, say
<input name="Question25" type="text" value="<?php echo $my_value; ?>" />
Because the form addon generates that HTML. I can write PHP or Javascript before this block, is there a way to search for an input with a name of "Question25" and then prefill it when the block comes up?
You could use jQuery and the .val() method:
<script type="text/javascript">
$(function() {
$('input[name="Question25"]').val('some value');
});
</script>
and if the value must come from the server:
<script type="text/javascript">
$(function() {
var obj = <?php echo json_encode(array('value' => $my_value)); ?>;
$('input[name="Question25"]').val(obj.value);
});
</script>
You can emit all the values you'd like to search as an array of fieldname/values, and then emit a function that tries to map those values to those fields.
<script type="text/javascript">
var values = [{fieldName:'Question25', value:'MyValue'}]; // iterate through your values in PHP and generate the {fieldName:'value',value:'value'} object
$(function() {
$.each(values, function(index, item) {
$('input[name=' + item.fieldName + ']').val(item.value);
});
});
</script>
var value='<?php echo $my_value; ?>'
$("input:text[name='Question25']").val(value);
use something like this
Use Javascript. With jQuery, you could do something along the lines of:
$("input[name=Question25]").val(my_value);
You can then insert PHP vairables into the Javascript with echo, load them with AJAX, or whatever you need.
I am trying to display search query results on a separate page. I copied the code from a forum, but since the display page isn't php, I'm not sure it will work.
Here is the code from the home page:
<form action="search" method="post">
<input type="text" name="q" />
<input type="submit" name="search" value="Search" />
</form>
I want the search results to show on mysite.com/search (obviously)
The code on mysite.com/search is as follows:
<div id="cse" style="width: 100%;">Loading</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">//
google.load('jquery', '1');
google.load('search', '1');
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('XXXXX');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
$(".gsc-input").val("<?php echo $_POST['q']; ?>");//insert into search field requested search text
$(".gsc-search-button").click();//call button click event, show results
}, true);
// ]]></script>
Do I have any options? Is there a workaround?
since the display page isn't php
Then you can't use $(".gsc-input").val("<?php echo $_POST['q']; ?>");, but could use something like
$.get('path-to-php-script/query.php', function(data) {
$(".gsc-input").html(data);
alert('Load was performed.');
});
The idea is that you just use jQuery to retrieve and manipulate the data that you need to run through PHP script(s) before they're returned to the HTML-only display page.
You can achive like this
Put this code in your head tag
<script language="javascript">
function changeData(fromDiv)
{
document.getElementById('toDiv').innerHTML = fromDiv.innerHTML;
}
</script>
And This in your body tag
<div id="toDiv"></div>
<div id="fromDiv" onclick="changeData(this)">Hello World I am here</div>
I am new to using jquery and i have written the following code and it does not work and i am not able to figure out what the mistake is ..syntax might also be wrong.
It has 2 submit buttons while using button1 it should get info from the DB and display on the same page.i.e., get the title from the DB and display on the same page.
While second submit button is used to submit title into the DB and update it(written in script_2.php).
<form id="myForm" method="post">
id: <input type="text" name="search"/>
<input type="button" id="button1" value="Submit to script 1" />
<input type="button" id="button2" value="Submit to script 2" />
title:<input type="text" name="title"/>
</form>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },
function(output) {
$('#age').html(output).show();
}) ;
}) ;
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
</head>
Help appreciated.
You are missing the }); to close the $("#button1").click function:
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },function(output) {$('#age').html(output).show();});
});
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
You have too many closing
<script type="text/javascript" src="jquery.js"></script></script>
to
<script type="text/javascript" src="jquery.js"></script>
jQuerys attr() expects strings, not an object, like:
$('form#myForm').attr("action", "script_2.php");
You form is before your <head> tag. It should be after your </head> and in a <body> tag.
You are putting the results of your ajax call in an element with id age, but I don't see any element with that id on your page.
That's all for errors (that I see as of now), but you can also speed up your selecter here $('form#myForm') by changing it to $('#myForm') since id's are unique, and I doubt you have any element with the id myForm which isn't a form.