CODEWITHSUNDEEP
javascript
Sanchita
Sanchita

Reputation: 31

How to set Focus in a textfield

I have a sign up form. I want to implement some validation at client end itself. I am using a button to submit a form.

<button onclick="check_fields();"></button>

function check_fields() {           
  if(document.contact_form.name.value=='')                                                     
    document.contact_form.name.focus();
  else 
    document.getElementById("contact_form").submit();   
}

Focus is not happening, instead form is successfully submitting. Please help.

Upvotes: 3

Views: 15156

Answers (5)

S. Mayol
S. Mayol

Reputation: 2625

I have this, I hope this help you, I use focus() in a JavaScript to prompt or set the focus in the and if I click on save or input button without supplying any value, an alert it will be trigger first then when you click ok, the focus will appear in the corresponding textfield:

<script type="text/javascript">
         function validate() /* Validate the if the user leave any field empty. */
         {
             var a = document.getElementById("userid");
             var b = document.getElementById("passwrd");
             var c = document.getElementById("fname");
             var d = document.getElementById("lname");
             var e = document.getElementById("email");
             var f = document.getElementById("phnno");
             var g = document.getElementById("cellphone");
             var h = document.getElementById("fax");
                          
             var valid = true;
             if(a.value.length<=0) {
            	 a.focus();
                 alert("Don't leave 'USER NAME' field empty!");
                 valid = false;
             }
             else if(b.value.length<=0){
            	 b.focus();
                 alert("Don't leave 'PASSWORD' field empty!");
                 valid = false;
             }
             else if(c.value.length<=0){
            	 c.focus();
                 alert("Don't leave 'FIRST NAME' field empty!");
                 valid = false;
             }
             else if(d.value.length<=0){
            	 d.focus();
                 alert("Don't leave 'LAST NAME' field empty!");
                 valid = false;
             }
             else if(e.value.length<=0){
            	 e.focus();
                 alert("Don't leave 'USER EMAIL' field empty!");
                 valid = false;
             }
             else if(f.value.length<=0){
            	 f.focus();
                 alert("Don't leave 'PHONE NUMBER' field empty!");
                 valid = false;
             }
             else if(g.value.length<=0){
            	 g.focus();
                 alert("Don't leave 'CELLPHONE NUMBER' field empty!");
                 valid = false;
             }
             else if(h.value.length<=0){
            	 h.focus();
                 alert("Don't leave 'FAX NUMBER' field empty!");
                 valid = false;
             }
                          
         return valid;
         };
         
     </script
<s:form action="userAction_createUser" method="get"  name = "userForm" accept-charset="utf-8" onsubmit="return validate();">
				   				    
				        <!-- Display the values in the application -->
                        <table class="createUserT">
							<s:textfield name="user.userid" id="userid" cssClass="tb5" label="User Name" /> 
							<s:textfield name="user.passwrd" id="passwrd" cssClass="tb5" label="Password" type="password"/>
							<%-- <s:textfield name="user.passwrd" cssClass="tb5" label="passwrd" type="password"/> --%>
						</table>
						<table class="createUserT">
						    <s:textfield name="user.fname" id="fname" cssClass="tb5" label="First Name"/>
						    <s:textfield name="user.lname" id="lname" cssClass="tb5" label="Last Name"/> 
						</table>
						<table class="createUserT">
							<s:textfield name="user.email" id="email" cssClass="tb5" label="User Email" type="email"/>
                            <s:textfield name="user.phnno" id="phnno" cssClass="tb5" label="Phone Number"/>
						</table>
						<table class="createUserT">
                            <s:textfield name="user.cellphone" id="cellphone" cssClass="tb5" label="Cellphone Number"/>
                            <s:textfield name="user.fax" id="fax" cssClass="tb5" label="Fax Number"/>
						</table>

Upvotes: 0

Mrugen Deshmukh
Mrugen Deshmukh

Reputation: 249

Hi it looks like you are trying to transfer focus on form element on validation errors. I would suggest that you transfer control over to a input element which is part of your "form" element.

Morever you can also validate the input on "onsubmit" event of the form rather than the button click. for example:

<form name="myForm" onsubmit="return validate();"> </form>

//validate function on validation failure returns false else true.
// if validate returns false the browser wouldn't submit the form.

you can use following code snippet to get focus on element of your choice

document.getElementById("elementId").focus();

Upvotes: 0

Iftah
Iftah

Reputation: 9572

It should work if you setup the html part correctly. If not you should see javascript exceptions in developer console (in chrome or firefox).

Note that you access the form in two ways, one document.contact_form suggests you have name="contact_form" and one document.getElementById("contact_form") suggests you have id="contact_form", did you set both ways in the html? ie. are both name and id set for the form element?

Upvotes: 0

asgoth
asgoth

Reputation: 35829

Because document.contact_form.name is probably not your textfield. What is your input field's name attribute?

If its name is e.g. myfield, you should use:

if(document.contact_form.myfield.value === '') {
   document.contact_form.myfield.focus();
} else { ... }

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

The best way to do is using an id

Say, you have the textfield defined this way:

<input type="text" name="contact" id="contact" />

In your JavaScript, it would be nice to give this way:

document.getElementById("contact").focus();

Upvotes: 4

Related Questions