I wrote a small perl ajax code to do the following:
A form has three input areas: first name, last name, & login ID. When a user enters first/last name and clicked the login ID area, a login ID will be automatically populated through perl ajax code. But it should also let a user to pick his/her own login ID.
Here is my code:
The problem is the 'onFocus' part:
Once you clicked the login ID area (means it is focused), a new ID is populated as design, which is Ok. But the cursor is gone afterwards so that a user can never enter his/her own login ID!!
I just don't understand why the cursor is gone after focus. I even wrote a simple html+js code to see how onfocus works.
The 'onFocus()' in the above code works just fine.
So, what did I do wrong in perl ajax code?
Thank you for your advices.
A form has three input areas: first name, last name, & login ID. When a user enters first/last name and clicked the login ID area, a login ID will be automatically populated through perl ajax code. But it should also let a user to pick his/her own login ID.
Here is my code:
Code:
use CGI::Pretty qw( :html3 );
use CGI::Ajax;
my $fname = 'fname';
my $lname = 'lname';
my $cgi = new CGI::Pretty;
my $pjx = new CGI::Ajax( 'js_func' => \&pl_func );
print $pjx->build_html($cgi, \&Show_HTML);
sub pl_func {
my $f = shift;
my $l = shift;
my $ret;
if($l) {
# Just a simple demo here. In reality, should check for
# the uniqueness of $nInput against database
my $nInput = "#$f".'-'."$l#";
$ret = qq {
<div id="destID"> <label> ID: </label>
<input name="id" value="$nInput" type="text" id="idID" [b]onFocus[/b]="js_func(['fnID','lnID'], ['destID']);"/>
<a href='#' onclick="js_func(['idID'], ['destID']);">Check here</a>
</div>
};
}
else {
# again, just a simple demo here
my $nInput = "##--$f--##" if($f);
$ret = qq {
<div id="destID"> <label> ID: </label>
<input name="id" value="$nInput" type="text" id="idID" [b]onFocus[/b]="js_func(['fnID','lnID'], ['destID']);"/>
<a href='#' onclick="js_func(['idID'], ['destID']);">Check here</a>
</div>
};
}
return( $ret );
}
sub Show_HTML {
my $html = <<EOHTML;
<HTML>
<BODY>
<div> <label> First Name: </label>
<input type="text" name=$fname id="fnID">
</div>
<div> <label> Last Name: </label>
<input type="text" name=$lname id="lnID">
</div>
<div id="destID"> <label> ID: </label>
<input name="id" type="text" id="idID" [b]onFocus[/b]="js_func(['fnID', 'lnID'], ['destID']);"/>
<a href='#' onclick="js_func(['idID'], ['destID']);">Check here</a>
</div>
</BODY>
</HTML>
EOHTML
return $html;
}The problem is the 'onFocus' part:
Once you clicked the login ID area (means it is focused), a new ID is populated as design, which is Ok. But the cursor is gone afterwards so that a user can never enter his/her own login ID!!
I just don't understand why the cursor is gone after focus. I even wrote a simple html+js code to see how onfocus works.
Code:
<HTML>
<head>
<script type="text/javascript"> function setLoginID(userInput) {
var fname = document.getElementById("fnID").value;
var lname = document.getElementById("lnID").value; userInput.value = fname + lname;
}
</script>
</head>
<BODY>
First Name: <input type="text" name="fname" id="fnID" /> <br>
Last Name: <input type="text" name="lname" id="lnID" />
<br>
Login ID: <input type="text" name="login" id="loginID" [b]onFocus[/b]="setLoginID(this);" />
</BODY>
</HTML>The 'onFocus()' in the above code works just fine.
So, what did I do wrong in perl ajax code?
Thank you for your advices.