CODEWITHSUNDEEP
javascripthtmljsp
user3222718
user3222718

Reputation: 242

My code to make the first name's first letter capital in jsp using javascript is not working

Here is my jsp code please go through: 

</script>
<script type="text/javascript">
function capitalize(s)
{
    return s[0].toUpperCase() + s.slice(1);
}
</script>

<body bgcolor="#D0D0D0" onLoad="addList()">
<h1>Welcome to registration page</h1> <br/> <br/>
<h3>Enter your personal details here</h3>
<form name="Register" action="RegisterServlet" method="post" onSubmit="return validate()">
<table>
<tr>
<td>First Name* : </td>
<td><input type="text" name="txtFname" id="fname" maxlength="30" onKeyup="capitalize(txtFname)"/>
<span style="padding-left:100px;" id="errorFirstNameMissing" style="visibility:hidden;"><font color="red">*Please provide your first name.</font></span>
<span style="padding-left:100px;" id="errorFirstNameInValid" style="visibility:hidden;"><font color="red">*Please provide a valid first name.</font></span>
</td>
</tr>
<tr>

  1. Capitalising the first letter of the firstname is not happening

    2.And i have another issue that the error message in the span id field i.e.*Please provide your first name will be displayed on the jsp page when the field is null and when the field is not null but it does not match with the format then it will be replaced by *Please provide a valid first name. I want the replacement to happen in the same line and at the same distance from the input field but now the latter is being displayed in a new line. So please some one help me to fix these two things

Upvotes: 0

Views: 1396

Answers (1)

Mehran Hatami
Mehran Hatami

Reputation: 12961

change your function like this:

function capitalize(el)
{
    var s = el.value;
    el.value = s.substring(0,1).toUpperCase() + s.substring(1);
}

change your html like:

<input type="text" name="txtFname" id="fname" maxlength="30" onKeyup="capitalize(this)"/>

and for your second issue, to align your message at same line, you should just change the style:

visibility:hidden;

to

display:none;

then in your javascript validate function, instead of:

document.getElementById(/.../).style.visibility = "visible";

do

document.getElementById(/.../).style.display = "";

Upvotes: 3

Related Questions