main.php
<html>
<head><TITLE>Check User Name</TITLE>
<script language="JavaScript" src="jsFile.js" type="text/javascript"></script>
</head>
<body>
<table align="center" border="0">
<TR>
<TD><h3>Check User Name</h3></TD>
</TR>
<TR>
<TD height="10"> </TD>
</TR>
<TR>
<TD>Username</TD>
<TD>
<input type="text" name="txtName" id="txtName">
</TD>
</TR>
<TR>
<TD>Password</TD>
<TD>
<input type="text" name="txtpass" id="txtpass">
</TD>
</TR>
<TR><TD colspan='2' align='center'> <span id='resSpan'> </span></TD></TR>
<TR><TD colspan='2' align='center'> <input type='button' value='Check User' onclick='chkLogin()'></TD></TR>
</table>
</body>
</html>
jsFile.js
function chkLogin()
{
var nameVal=$("#txtName").val();
var pwd==$("#txtpwd").val();
var url=checkLogin.php';
var data='name='+nameVal+'&pwd='+pwd;
$.ajax({
type: "POST",
url: url
data: data,
success: function(msg){
document.getElementById('resSpan').innerHTML=msg;
}
});
}
checkLogin.php
<?php
// Db connection edit with your db connection parameters
$conn=mysql_connect("localhost","root","root");
$db=mysql_select_db("dbUserlogs");
$username'=trim($_POST['name']);
$pwd=$_POST['pwd'];
if(!empty($username)){
$sqlqry="SELECT * FROM user_entity where user_name='$username'";
$res=mysql_query($sqlqry) or die(mysql_error());
$count=mysql_num_rows($res);
if($count==0){
$msg='The user '+$username +'does not exist';
}else{
$sqlqry="SELECT * FROM user_entity where user_name='$username' and password='$pwd'";
$res=mysql_query($sqlqry) or die(mysql_error());
$count=mysql_num_rows($res);
if($count==0){
$msg="Incorrect Password!";
}else{
$msg="valid login!";
}
}else{
$msg='Enter username';
}
echo $msg;
?>
The following example will generate random password for the user name .
main.php
<?php
$template=<<<T1
<html>
<head><title>Random Passwod Generator </title>
<script language="JavaScript" src="getRandom.js" type="text/javascript"></script>
</head>
<body>
<table align="center"><tr>
<td colspan='2' align='center'><b>Generate Random Password</b></td>
</tr>
<tr>
<td>User name</td>
<td>
<input type="text" name="txtName" id="txtName">
<input type="button" onclick="getRandompwd()" value="Get Password">
</td>
</tr>
</table>
</body>
</html>
T1;
echo $template;
?>
getRandom.js
function getRandompwd()
{
var nameVal=$("#txtName").val();
var url='randomPwd.php';
var data='name='+nameVal;
$.ajax({
type: "POST",
url: url
data: data,
success: function(msg){
var respArray = msg.split('+');
if(respArray [0]=="randompwd"){
$("#txtName").val=respArray[1];
}
});
}
randomPwd.php
<?php
$name=$_REQUEST['name];
$charsArray=array();
$randPwd='';
$pwdLen=10;
$maxLen=25;
$expLen=0;
$chars = "a,b,c,d,e,f,g,h,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,F,G,H,J,K,L,M,N,P,Q,R,S,T,V,W,X,Y,Z,,@,#,%,&,*,$,1,2,3,4,5,6,7,8,9";
$charsArray = explode(",", $chars );
while($expLen < $maxLen){
$rands = rand(0,5);
$rand_keys .= array_rand($charsArray , $rands);
$expLen=strlen($rand_keys);
}
$rands=rand(0,9),
$randPwd= substr($rand_keys,$rands,pwdLen);
echo 'randompwd'.'+'.$randPwd;
?>
Dynamic form element selector based on jquery
<html>
<head>
<title>PHPQA Test</title>
on the script side please add jquery library
<script language="javascript" type="text/javascript"
src="http://jobanjohn.googlepages.com/jquery.js"></script>
<script language="javascript">
function getallElementValue()
{
var postData = {};
var argumentList='';
//$(':input',"#phpqaFrm").each(function(){
$(':input',"form[name=phpqaFrm]").each(function(){
var type = this.type;
if(this.value!=null){
if((type!='checkbox') && (type!='button')
&&(type!='submit')&&(type!='radio'))
{
argumentList =argumentList+'&'+this.name+'='+this.value;
}
else if((type=='checkbox')||(type=='radio')){
if($(this).is(':checked')) {
argumentList =argumentList+'&'+this.name+'='+this.value;
}
}
}
});
$('select',"form[name=phpqaFrm]").each(function(){
var type = this.type;
if(this.value!=null){
argumentList =argumentList+'&'+this.name+'='+this.value;
}
});
$('textarea',"form[name=phpqaFrm]").each(function(){
var type = this.type;
if(this.value!=null){
argumentList =argumentList+'&'+this.name+'='+this.value;
}
});
return argumentList;
}
function getvalues(){
var val = getallElementValue();
alert(val);
// do ajax action if you want to post it using $.get , $.ajax, $.post
etc to a server and handle the response !!
}
</script>
<!--script part ends here -->
</head>
<body>
<!-- note the form name-->
<form name="phpqaFrm" id="phpqaFrm">
<input type="hidden" name="action" value="phpqainsertlocation" />
<table width="500">
<tr>
<td><input type="text" name="phpqaTest1" value="phpqa
Test 1"></td>
<td><input type="text" name="phpqaTest2" value="phpqa
Test 2"></td>
</tr>
<tr>
<td><input type="checkbox" name="phpqaTest3[]"
value="phpqa Test 3"></td>
<td><input type="checkbox" name="phpqaTest3[]"
value="phpqa Test 4"></td>
</tr>
<tr>
<td><input type="radio" name="phpqaTest5[]"
value="phpqa Test 5"></td>
<td><input type="radio" name="phpqaTest5[]"
value="phpqa Test 6"></td>
</tr>
<tr>
<td>
<select name="phpqaTest7">
<option value="phpqaTest8">phpqa Test 8</option>
<option value="phpqaTest9">phpqa Test 9</option>
<option value="phpqaTest10">phpqa Test 10</option>
<option value="phpqaTest11">phpqa Test 11</option>
<option value="phpqaTest12">phpqa Test 12</option>
</select>
</td>
<td>
<select name="phpqaTest13">
<option value="phpqaTest14">phpqa Test 14</option>
<option value="phpqaTest15">phpqa Test 15</option>
<option value="phpqaTest16">phpqa Test 16</option>
<option value="phpqaTest17">phpqa Test 17</option>
<option value="phpqaTest18">phpqa Test 18</option>
</select>
</td>
</tr>
<tr>
<td><textarea name="phpqaTest19" >phpqa Test 19</textarea></td>
<td><textarea name="phpqaTest20" >phpqa Test 20</textarea></td>
</tr>
<tr>
calling the java script function get form values
<td><input type="button" name="phpqa" value="check it"
onclick="javascript:getvalues()"></td>.
<td></td>
</tr>
</table>
</form>
</body>
</html>
qJquery based dynamic adding and removal of html elements.
it uses the some smal jquery function like append,remove,hide etc,
Enjoy jquery. less coding huray !!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>jQuery Test on - phpqa.blogspot.com</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function addNewToPhpqa() {
var id = $('#idVal').val();
id++;
// set a maximum value for elements
if(id<10){
$("#phpqaToAppend").append("<p id='count" + id + "'><label
for='txt" + id + "'>Field " + id + " <input type='text'
size='20' name='txtName[]' id='txtName" + id + "'>  <a
href='javascript:void(0);' onClick='removeThis("+ id +");'>Remove
this</a><p>");
}else{
alert("you have reached maximum Thanks phpqa.blogspot.com");
}
$('#idVal').val(id);
}
function removeThisFromPhpqa(id) {
$("#count"+id).hide(1000);
// or u can use
//$("#count"+id).remove();
}
</script>
<body>
<p><a href="javascript:void(0);" onClick="addNewToPhpqa();">Add More</a></p>
<form action="#" method="get" id="phpqa">
<input type="hidden" id="idVal" value="1">
<div id="phpqaToAppend">
<p id='count1'>
<label for="txt1">
Field 1
<input size="20" name="txtName[]" id="txtName1" type="text">
<a href="javascript:void(0);"
onclick="removeThisFromPhpqa(1);">Remove this</a>
</label>
</p>
</div>
<label ></label>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
</body>
</html>
see demo here Demo
Happy Jquering !!
Handling the multiple checkboxes with jquery for Check All, Uncheck All
and get values from selected values
include jquery
<script language="JavaScript" src="youserveraddres/js/jquery.js"></script>
your html
<input name="phpqa[]" type="checkbox" value="1">1
<input name="phpqa[]" type="checkbox" value="2">2
<input name="phpqa[]" type="checkbox" value="3">3
<input name="phpqa[]" type="checkbox" value="4">4
<input name="phpqa[]" type="checkbox" value="5">5
<input name="phpqa[]" type="checkbox" value="6">6
<input name="phpqa[]" type="checkbox" value="7">7
<input name="phpqa[]" type="checkbox" value="8">8
<a href="javascript:void();" onclick="markAll()">Check All</a>
<a href="javascript:void();" onclick="unMarkAll()">Uncheck All</a>
<a href="javascript:void();" onclick="getSelectedVals()">Get Checked Values</a>
// function for mark all / check all
function markAll(){
$("input[@name='phpqa[]']").each(function() {
this.checked = true;
});
}
// function for uncheck all
function unMarkAll(){
$("input[@name='phpqa[]']").each(function() {
this.checked = false;
});
}
//fetching selected values / checked values
function getSelectedVals(){
$("input[@name='phpqa[]']").each(function() {
if ($(this).attr('checked'))
{
alert($(this).val());
}
});
}
if you have any doubts lemme know..
enjoy jquerying.........
Hi,
My issue is, I need to find out the the scroll bar position,
ie whether the current scroll bar reached at the bottom of the scroll bar.
I hope you can gimme a brief idea regarding this.
Thanks in advance.
--
Thanking you, Warm regards,
jay jay
...................................................................................
ben wrote....
Hi,
It's not very hard. It's a simple matter of detecting the current scroll offset,
the height of the current window view & the height of the document.
The logic is as follows
if(horizontalScrollOffset + windowHeight == documentHeight) {
// we're at the bottom of the page
} else {
// we're not at the bottom of the page
}
Off the top of my head, the code would look something like
(I haven't tested this)
<script>
function hasScrolledToBottom()
{
if(scrollYOffset() + window.innerHeight >= document.body.offsetHeight) {
return true;
} else {
return false;
}
}
function scrollYOffset()
{
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0) {
if (window.pageYOffset) {
ScrollTop = window.pageYOffset;
} else {
ScrollTop = (document.body.parentElement) ?
document.body.parentElement.scrollTop : 0;
}
}
return ScrollTop;
}
</script>
<body style="height: 4000px; ">
</body>
Ben Rowe
......................................................
Brian Schilt Wrote
You would need to compare the overall document height with the
scrollTop position + viewport height. You could make a utility
function that you could use in the scroll event that fires when the
page is scrolled. When it reaches bottom the function could return
true, signifying the user has scrolled all the way to the bottom.
I haven't tested the below code, but the theory is there for you to
start with.
$(window).scroll(function(){
if(isScrollBottom()){
//scroll is at the bottom
//do something...
}
});
function isScrollBottom() {
var documentHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollPosition);
}
Brian