Reputation: 3
I have multiple textbox and calling jquery keyup on each text box its working fine on the mozilla firefox and chrome.In internet explorer
Its working fine for the first text box its working perfectly as it should be but other textbox are not working properly ,i mean for them keyup are not calling. .Below are my code:-
I have multiple textbox and calling jquery keyup on each text box its working fine on the mozilla firefox and chrome.In internet explorer
Its working fine for the first text box its working perfectly as it should be but other textbox are not working properly ,i mean for them keyup are not calling. .Below are my code:-
<script type="text/javascript">
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var idloc=document.getElementById("state").value;
var type='p_school';
var dataString = 'locality='+ searchid+'&id='+ idloc+'&type='+ type;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "loaddata.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").on("click", ".show", function() {
var $name = $(this).find(".name").text();
var $id = $(this).find(".pid").text();
var type='state';
var pid='pid='+$id+'&type='+ type;
$.ajax({
type: "POST",
url: "load_state.php",
data: pid,
cache: false,
success: function(html)
{
//alert (html);
$('#p_school').show();
$('#p_school').html(html);
$('#p_school_old').hide();
}
});
$("#searchid").val($name);
});
jQuery(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
if(searchid=='')
{
$('#searchid').click(function(){
jQuery("#result").fadeIn();
}); }
});
$(function(){
$(".search1").keyup(function()
{
alert ("hello second textbox");
var searchid1 = $(this).val();
var idloc1=document.getElementById("state1").value;
var type1='s_school';
var dataString1 = 'locality1='+ searchid1+'&id1='+ idloc1+'&type1='+ type1;
if(searchid1!='')
{
$.ajax({
type: "POST",
url: "loaddata.php",
data: dataString1,
cache: false,
success: function(html)
{
$("#result1").html(html).show();
}
});
}return false;
});
jQuery("#result1").on("click", ".show1", function() {
var $name = $(this).find(".name1").text();
var $id = $(this).find(".sid").text();
//var pid='pid='+ $id.+'&type='+ type;
var type='s_state';
var pid='pid='+$id+'&type='+ type;
$.ajax({
type: "POST",
url: "load_state.php",
data: pid,
cache: false,
success: function(html)
{
//alert (html);
$('#s_school').show();
$('#s_school').html(html);
$('#s_school_old').hide();
}
});
$("#searchid1").val($name);
//alert ("Danstring");
});
jQuery(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search_ss")){
jQuery("#result1").fadeOut();
}
});
if(searchid1=='')
{
$('#searchid1').click(function(){
jQuery("#result1").fadeIn();
}); }
});
</script>
//HTML Code
HTML are below:-
<input type="text" placeholder="Primary School" name="primary[]" autocomplete="off" class="search" id="searchid" style="margin-top: 7px; border: 1px solid #7B9E94; min-height: 29px;">
<input type="text" placeholder="Secondary School" name="secondary[]" autocomplete="off" class="search1" id="searchid1" style="margin-top: 7px; border: 1px solid #7B9E94; min-height: 29px;">
Thanks
Upvotes: 0
Views: 1298
Reputation: 886
Since your input elements have different class names, try changing this line:
$(".search").keyup(function()
to this:
$(".search, .search_ss").keyup(function()
Upvotes: 1