Previously I have a piece of code
$(document).bind('keyup', function(e)
{
if (e.keyCode === 13 && $('#domain_name_url').is(':focus'))
{
alert("hii");
$("#submit_replace_button").click();
}
else if(e.keyCode === 13 && $('#search_domain').is(':focus'))
{
//$("#submit_search_button").click();
}
});
which used to work.
Now I made a simple change because I want to have this work only when the keyup event is within the elements of the form.
So I changed it to
$("#m_domain input[type=text]").on('keyup', function(e)
{
if (e.keyCode === 13 && $('#domain_name_url').is(':focus'))
{
alert("hii");
$("#submit_replace_button").click();
}
else if(e.keyCode === 13 && $('#search_domain').is(':focus'))
{
//$("#submit_search_button").click();
}
});
Now it seems it is not working. What have I done wrong?
Here's my total html
<form action="domains.php#searchdomain" method="post" name="m_domain" id="m_domain"
onsubmit = "return primalValidate()">
<a name="searchdomain"></a>
<table class="dataTable" width="100%" border="0" cellspacing="0" cellpadding="5" id="" style="text-align:center; margin-top:0px; border-left:1px solid #ddd; border-right:1px solid #ddd; border-top:1px solid #ddd;">
<tr>
<td align="left" colspan="2"><div id="display_message" <?php echo $sstyle; ?>><?php echo $dis_msg; ?></div></td>
</tr>
<tr>
<td align="left">Search Domain</td>
<td align="left" style="display:none;" id="apply_text">Replace Selected Domains With</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input class="input_field" name="search_domain" id="search_domain" value="<?php echo $search_domain; ?>" type="text"></td>
<td> </td>
<td><input type="submit" class="btn blue_button"
name="submit_domain_form" id="submit_search_button"
value="Search"/></td>
</tr>
</table>
</td>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="apply_button" style="display:none;">
<tr>
<td><input class="input_field" name="domain_name_url" id="domain_name_url" value="<?php echo $domain_name_url; ?>" type="text"></td>
<td>
<input name="domain_replace_id" id="domain_replace_id"
value="" type="hidden">
<input name="domain_replace_link" id="domain_replace_link"
value="" type="hidden">
</td>
<td><input type="submit" class="btn blue_button"
name="submit_domain_form" id="submit_replace_button"
value="Apply"/></td>
</tr>
</table>
</td>
<td align="center">
<input type="hidden" name="submit" value="Apply"/>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="checkbox" name="status_domain" id="status_domain" <?php if($status_domain){?> checked <?php } ?>> Include inactive campaigns in search.</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td align="center"> </td>
</tr>
</table>
<?php
echo '<div style="border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; width:100%; padding:10px;">';
if(sizeof($request_list) > 0)
{
echo '
<div class="pg_wrapper">
<div class="progress" style="width:80%;float: left;position: relative; top: 0; z-index: 999; display: none;"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div></div><div id="cancel_load" style="float: left; height: 23px; font-size: 12px; vertical-align:middle; padding-left: 5px; display: none;"><a style="color:#428bca;" href="javascript:void(0);" ><strong>Cancel</strong></a>
</div>
<div class="clearfix"></div>
</div>
';
}
echo '</div>';
?>
<div id="lp_pages_table" style="padding: 10px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;">
<table class="display compact" width="100%" border="0" cellspacing="0" cellpadding="5" id="domains_list" style="margin-top:0px; border:1px solid #ddd;">
<thead>
<tr>
<th style="text-align:center;"><input type="checkbox" name="chk_all" class="checkall" id="checkedAll"></th>
<th>URL</th>
<th>Type</th>
<th>ID</th>
<th>Campaign</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</form>
Here's my total JavaScript code.
$("#m_domain input[type=text]").on('keyup', function(e)
{
if (e.keyCode === 13 && $('#domain_name_url').is(':focus'))
{
alert("hii");
$("#submit_replace_button").click();
}
else if(e.keyCode === 13 && $('#search_domain').is(':focus'))
{
//$("#submit_search_button").click();
}
});
$(document).ready(function()
{
$("#domains_list tbody").on( "click", "tr", function ()
{
var total_selected_row;
var total_row;
$(this).toggleClass("selected");
var final_class = $(this).attr("class");
var chk_ob = $(this).find("td:first").find("input");
if (final_class.indexOf("selected")>0)
{
$(chk_ob).prop('checked', true);
total_selected_row = t.rows('.selected').data().length;
total_row = t.rows().data().length;
if(total_selected_row == total_row)
{
$("#checkedAll").prop('checked', true);
}
}
else
{
$(chk_ob).prop('checked', false);
$("#checkedAll").prop('checked', false);
}
} );
/* If I comment the below on focus methods, then the total scripts work with keyup method on form.
If I uncomment the below focus methods, then keyup method on form doesn't work, instead it works on `$(document).bind();`
/*
$('#domain_name_url').on('focus',function()
{
$('#submit_search_button').prop("disabled",true);
$('#submit_replace_button').prop("disabled",false);
});
$('#search_domain').on('focus',function()
{
$('#submit_replace_button').prop("disabled",true);
$('#submit_search_button').prop("disabled",false);
});*/
});
but I need to put this submit button enable disable code.
ok, I found my answer based on @RohanKuman
I need to place the codes like this,
$(document).ready(function()
{
$("#domains_list tbody").on( "click", "tr", function ()
{
var total_selected_row;
var total_row;
$(this).toggleClass("selected");
var final_class = $(this).attr("class");
var chk_ob = $(this).find("td:first").find("input");
if (final_class.indexOf("selected")>0)
{
$(chk_ob).prop('checked', true);
total_selected_row = t.rows('.selected').data().length;
total_row = t.rows().data().length;
if(total_selected_row == total_row)
{
$("#checkedAll").prop('checked', true);
}
}
else
{
$(chk_ob).prop('checked', false);
$("#checkedAll").prop('checked', false);
}
} );
/*there are two submit buttons in a single form.
When we press enter, the first submit button submits the form as it works
as a default submit button .
So, we need to place this piece of code to check, which textbox had the focus
when the enter was clicked. If its search textbox, then by default action, submit button1 will act, but if its replace textbox, so submit button 2 is being made clicked.*/
$("#m_domain input[type=text]").on('keyup', function(e)
{
if (e.keyCode === 13 && $('#domain_name_url').is(':focus'))
{
$("#submit_replace_button").click();
}
else if(e.keyCode === 13 && $('#search_domain').is(':focus'))
{
}
});
$('#domain_name_url').on('focus',function()
{
$('#submit_search_button').prop("disabled",true);
$('#submit_replace_button').prop("disabled",false);
});
$('#search_domain').on('focus',function()
{
$('#submit_replace_button').prop("disabled",true);
$('#submit_search_button').prop("disabled",false);
});
});
I was stupid and didnt get the point that
$("#m_domain input[type=text]").on('keyup', function(e){});
and
$('#domain_name_url').on('focus',function()
{
$('#submit_search_button').prop("disabled",true);
$('#submit_replace_button').prop("disabled",false);
});
$('#search_domain').on('focus',function()
{
$('#submit_replace_button').prop("disabled",true);
$('#submit_search_button').prop("disabled",false);
});
both should be under $(document).ready(function(){});