CODEWITHSUNDEEP
javascript
user2101776
user2101776

Reputation:

How to focus cursor on form element?

I want to add cursor after empty input into form element. Where first empty form are.
With this goal I tryed to add this.focus(); into validate() function. But this wasn't succeeded.

And second point - how to set cursor after emerges page at brovser to first form element. I tryed with this target onLoad(); method into body. But this wasn't succeeded.

Code:

<html>
    <head>
        <title>Form with check</title>
            <script>
                function validate() {
                    if(document.form1.yourname.value.length < 1) {
                        alert("Enter your name, please");
                        this.focus();
                        return false;
                    }
                    if(document.form1.adress.value.length < 3) {
                        alert("Enter your adress, please");
                        this.focus();
                        return false;
                    }
                    if(document.form1.phone.value.length < 3) {
                        alert("Enter your phone number, please");
                        this.focus();
                        return false;
                    }
                    return true;
                }
            </script>
    </head> 
        <body>
            <h1>Form with check</h1>
            <p>Input all data. When button Submit pushed data will be sent as message.</p>  
                <form name="form1" action="mailto:[email protected]" enctype="text/plain"
                onSubmit="validate();">
                    <p><b>Name:</b><input type="text" length="20" name="yourname">
                    </p>
                    <p><b>Adress:</b><input type="text" length="20" name="adress">
                    </p>
                    <p><b>Phone:</b><input type="text" length="20" name="phone">
                    </p>
                    <input type="SUBMIT" value="Submit">                    
            </form>
            onLoad();
        </body>    
</html>

Question:

Upvotes: 1

Views: 393

Answers (3)

Nisho
Nisho

Reputation: 36

onSubmit="validate();"

In the context of your validate function this will be the global window object.

To handle the form in the function, based on your code, you can call it manually using document.form1 or by id (or other selector), or you can send the form to the function:

  <script>
        function validate(sender) {
            if(sender.yourname.value.length < 1) {
                alert("Enter your name, please");
                sender.focus();
                return false;
            }
            if(sender.adress.value.length < 3) {
                alert("Enter your adress, please");
                sender.focus();
                return false;
            }
            if(sender.phone.value.length < 3) {
                alert("Enter your phone number, please");
                sender.focus();
                return false;
            }
            return true;
        }
    </script>
    <form name="form1" action="mailto:[email protected]" enctype="text/plain" onSubmit="validate(this);">
        <p>
           <b>Name:</b><input type="text" length="20" name="yourname">
        </p>
        <p>
           <b>Adress:</b><input type="text" length="20" name="adress">
        </p>
        <p>
           <b>Phone:</b><input type="text" length="20" name="phone">
        </p>
        <input type="SUBMIT" value="Submit">                    
   </form>

Upvotes: 0

defau1t
defau1t

Reputation: 10619

Replace this.focus() with document.form1.yourname.focus();

Here is the re-worked code:

<html>
    <head>
        <title>Form with check</title>
            <script>
                function validate() {
                    if(document.form1.yourname.value.length < 1) {
                        alert("Enter your name, please");
                        document.form1.yourname.focus();
                        return false;
                    }
                    if(document.form1.adress.value.length < 3) {
                        alert("Enter your adress, please");
                       document.form1.adress.focus();
                        return false;
                    }
                    if(document.form1.phone.value.length < 3) {
                        alert("Enter your phone number, please");
                        document.form1.phone.focus();
                        return false;
                    }
                    document.getElementById("ff").submit();
                    return true;

                }
            </script>
    </head> 
        <body >
            <h1>Form with check</h1>
            <p>Input all data. When button Submit pushed data will be sent as message.</p>  
                <form id="ff" name="form1" action="mailto:[email protected]" enctype="text/plain"
                >
                    <p><b>Name:</b><input type="text" length="20" name="yourname">
                    </p>
                    <p><b>Adress:</b><input type="text" length="20" name="adress">
                    </p>
                    <p><b>Phone:</b><input type="text" length="20" name="phone">
                    </p>
                    <input type="button" value="Submit" onclick="validate();">                    
            </form>

        </body>    
</html>

And the Working DEMO too

Upvotes: 1

Robert
Robert

Reputation: 20286

didn't you forget to do

onSubmit="return validate();" ?

Upvotes: 1

Related Questions