code:
<script>
$(function() {
$( "#college_name" ).autocomplete({
source: 'search.php',
minLength:2,
select: function(event, ui) {
var x = ui.item.value;
$("#college_name").attr('value',x);
}
});
});
</script>
<script>
$(document).ready(function(){
$("#college_name").select(function(){
alert("hi");
});
});
</script>
html code:
<input type="text" id = "college_name" name = "college_name" value="" placeholder = "College Name" autocomplete="off">
<input type='text' name='college_id' id='college_id'>
In this code when I wrote any college name in college_name input field autocomplete search i.e. search.php are working all college are showing. But when I select any college from autocomplete it does not show any message like (hi) or any thing. So, how can I fix this problem.
Thank You
Add alert message in Select event of autocomplete.
<script>
$(function() {
$( "#college_name" ).autocomplete({
source: 'search.php',
minLength:2,
select: function(event, ui) {
var x = ui.item.value;
$("#college_name").attr('value',x);
alert("hi");
}
});
});
</script>
Related
<script>
$(document).ready(function(){
var spinner = $( "#spinner" ).spinner();
$('#spinner').autocomplete({
source:'name.php'
});
$( "#getvalue" ).on( "click", function() {
alert( spinner.spinner( "value" ) );
});
});
</script>
<body>
<label for="spinner">To search name type here:=</label>
<input id="spinner" name="value"/>
<p>
<button id="getvalue">Get value</button>
</p>
</body>[1]
Above is the snapshot of the output and i want to get the particular value from this dropdown on get value button clicked and above is jQuery code and html code.
Value from the spinner field can be extracted like this:
$( "#getvalue" ).on( "click", function() {
.
.
value = $("#spinner").val();
alert(value);
});
I have an autocomplete text input:
<script type="text/javascript">
$(function()
{
var availableTags = <?php
$id_list = array("Name 1", "Name 2", "Name 3");
echo json_encode($id_list); ?>;
$("#FacultyName").autocomplete(
{
source: availableTags,
autoFocus:true
});
</script>
<input type="text" id="FacultyName">
Output:
I want do some task when user select on the available tag.
Is there any function like onClick or onChange to do it?
Autcomplete has a select event for this
Try like this
$("#FacultyName").autocomplete({
source: availableTags,
autoFocus: true,
select: function(event, ui) {
alert("select");
}
})
jQuery has the .change() method. Here is the API documentation to help.
https://api.jquery.com/change/
My form
<div class="replymsg">
<form class="mainform" action="reply.php" method="POST">
<textarea class="replytext" ></textarea>
<button data-value="<?php echo $id; ?>"
class="replybutton">Submit</button>
</form>
</div>
$id comes from a MYSQL database. The following "test" code gives me the id of the reply form using Jquery:
<script>
$(".replybutton").click(function(){
alert($(this).data("value"));
});
</script>
Value of commentid :id is not passed when I use "actual" code for the website as follows (reply:replytext ... sends message is working):
<script>
$(document).ready(function(){
$(".replybutton").click(function(){
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
Any ideas,any help is appreciated?
Most probably you should stop the form to submit if you are using ajax because a buttons default behavior is to submit the form:
<script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault(); //<---------------stops the form submission here
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
or add a type to the button:
<button type='button' data-value="<?php echo $id; ?>" class="replybutton">Submit</button>
//------^^^^^^^^^^^^
another way is to use .submit() event:
<script>
$(document).ready(function(){
$(".mainform").submit(function(e){ //<-----pass the event here
e.preventDefault(); //<---------------still you need this
var id = $(this).find('.replybutton').data("value"); // find the elements
var replytext = $(this).find(".replytext").val(); // and here.
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
and in this case you don't need to have a type to your button, but it's good to have it.
Submitting form with AJAX
In form
<div class="replymsg">
<form class="mainform" action="" method=" ">
<textarea class="replytext" ></textarea>
<input type="text" value="<?php echo $id; ?>" name="comment_id" id="comment_id" style="display: none"> <!-- this contain the ID-->
<input type="submit" class="replybutton" id="replybutton" value="Submit">
</form>
</div>
use AJAX
<script>
$(function(){
$( "#replybutton" ).click(function(event)
{
event.preventDefault();
var comment_id = $("#comment_id").val();
var replytext = $(".replytext").val();
$.ajax(
{
type:"post",
url: "./reply.php",
data:{ id:comment_id, reply:replytext,},
success:function($data)
{
$("#result").html(data);
}
});
});
});
</script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault();
var id = $(this).data("value");
var replytext = $(this).prev().val();
$.post("reply.php",{ commentid: id, reply: replytext
},function(data){
$("#result").html(data);
});
});
});
Thanks for the help,I figured it out,my problem was sending Id and replytext in a comment/reply system when clicking replybutton. Working code above.
I have a textbox (auto-complete) where users can enter an actor/actress name which works fine.
As soon as user insert a name in the textbox, a dynamic dropdown should be populated showing list of movies by that actor.
Problem:
when user insert a name in the textbox, an empty dropdown is populated, but if user click on the dropdown or somewhere in the page, then list of movies are shown in the dropdown! Another issue is that if user press Enter inside the textbox (after he inserted the name), the textbox will be cleared!!
Could someone kindly let me know what is the problem with my code?
Here is the code:
<html>
<head>
<link type="text/css" href="res/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/jquery-ui.min.js"></script>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"type="text/javascript"type="text/javascript"></script>
</head>
<body>
<form>
<p>
<input type="textbox" name= "tag" id="tags" placeholder="Enter an actor/actress name here" />
</p>
<p>
<select id="movieName" name="movieName[]" multiple="multiple" width="200px" size="10px" style="display:none;">
</select>
</p>
<script type="text/javascript">
$(document).ready(function () {
$("#tags").autocomplete({
source: "actorsauto.php",
minLength: 2,
focus: function( event, ui ){
event.preventDefault();
return false;
},
select: function (event, ui){
$("#tags").on('autocompletechange change', function () {
var selectedVal = $(this).val();
$.post("actions.php", {q: selectedVal}, function (response){
console.log(response);
$("#movieName").html(response).show();
});
}).change();
}
});
});
</script>
</form>
</body>
</html>
and this is actions.php:
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
$html = "";
if(isset($_POST['q']) && !empty($_POST['q'])){
try{
include('imdbConnection.php');
$sql = $conn->prepare("SELECT DISTINCT movieName FROM cast_movie WHERE castName = :q");
$sql->execute(array(':q' => $_POST['q']));
while($rows = $sql->fetch(PDO::FETCH_ASSOC)){
$option = '<option value="' . $rows['movieName'] . '">' . $rows['movieName'] . '</option>';
$html .= $option;
}
} catch(PDOException $e){
echo 'ERROR: ' . $e->getMessage();
}
echo $html;
exit;
}
?>
this part.
$("#tags").on('autocompletechange change', function () {
var selectedVal = $(this).val();
$.post("actions.php", {q: selectedVal}, function (response){
console.log(response);
$("#movieName").html(response).show();
});
}).change();
Action will be made on "change". . try to change it as on "keyup"
change will only be trigger if the element loses its focus.
EDIT: you should change this part ..
$("#tags").on('autocompletechange keyup', function () {
var selectedVal = $(this).val();
$.post("actions.php", {q: selectedVal}, function (response){
console.log(response);
$("#movieName").html(response).show();
});
}).keyup();
How can I set the returned value to be added as a value of a textbox instead of a div ?
for example <input type="text" id="link" name="link" value="HERE" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js'></script>
<script language='JavaScript'>
setInterval( 'SANAjax();', 1000 );
$(function() {
SANAjax = function(){
$('#dataDisplay').load('yourfile.php');
}
});
</script>
<div id="dataDisplay"></div>
$.get("yourfile.php", function(data){
$("#link").val(data);
});
EDIT:
var SANAjax = function(){
$.get("yourfile.php", function(data){
$("#link").val(data);
setTimeout(SANAjax, 1000);
}).fail(function(){
setTimeout(SANAjax, 1000);
});
};
$(function(){
SANAjax();
});