CODEWITHSUNDEEP
javascriptjquery
rkaartikeyan
rkaartikeyan

Reputation: 2007

How to get `form.field.value` in jQuery?

in javascript i can validate a form on submit like below:-

<form action="" method="post" onsubmit="return validate(this)">
    <input type="text" name="uName" id="uName" />
    <input type="password" name="passKey" id="passKey" />
    <input type="submit" name="loginBtn" value="login" />
</form>

<script type="text/javascript">
function validate(loginForm){
    if(loginForm.uName.value == ''){
        alert('Please Enter Username');
        loginForm.uName.focus();
    }else if(loginForm.passKey.value == ''){
        alert('Please Enter Password');
        loginForm.passKey.focus();
    }else {
        return true;
    }
}
</script>

I tried with below jQuery Code

<form action="" method="post">
    <input type="text" name="uName" id="uName" />
    <input type="password" name="passKey" id="passKey" />
    <input type="submit" name="loginBtn" value="login" />
</form>
<script type="text/javascript">
    $('form').submit(function(loginForm){
        if(loginForm.uName.val() == ''){
            alert('Please enter username');
            loginForm.uName.focus();
        }else if(loginForm.passKey.val() == ''){
            alert('Please enter username');
            loginForm.passKey.focus();
        }else {
            return true;
        }

        return false;
    });
</script>

But not works me... please help me...!

Upvotes: 8

Views: 41365

Answers (4)

Arthur Ronconi
Arthur Ronconi

Reputation: 2428

See the Form Fields jQuery Plugin: https://github.com/webarthur/jquery-fields

You can use the plugin as follows:

var form = $('form#id_form').fields();

form.name.val('Arthur');
form.age.hide();
form.description.css('height', 200);

Or this way:

var form = $('form#id_form').fieldValues();

form.name('Arthur');
form.age(29);
form.description('Web developer.');

var name = form.name();

Upvotes: 4

PSL
PSL

Reputation: 123739

The argument in the submit callback function is not the element instead it is the event. So inside the callback this represents the form element so you could just do this.uName.value and you can avoid the use of id as well. So

$('form').submit(function(e){
        if(this.uName.value == ''){
            alert('Please enter username');
            this.uName.focus();
        }else if(this.passKey.value == ''){
            alert('Please enter username');
            this.passKey.focus();
        }else {
            return true;
        }

        return false;
    });

Fiddle

Plus val() is jquery method, and in plain javascript you would use value and in this case that should be sufficient enough.

Upvotes: 3

Rubens Mariuzzo
Rubens Mariuzzo

Reputation: 29261

This will help you:

jQuery(function($) {

    var $username = $('#uName'),
        $password = $('#passKey');

    $('form').submit(function() {

        if ($username.val() == '') {
            alert('Please enter username');
            $username.focus();
        } else if($password.val() == '') {
            alert('Please enter username');
            $password.focus();
        } else {
            return true;
        }

        return false;
    });
});

Some points you need to keep in mind:

  1. If you will work with the DOM you should wrap your code inside a jQuery(function() { ... }); block.
  2. If you want to access a DOM element with jQuery you need to select it before using $(...).

Upvotes: 1

alex
alex

Reputation: 547

like this?

$('#submit').click(function(){
    if( $('#uName').val() == ''){
        alert('empty');
    }
});

http://jsfiddle.net/TTmYk/

the submit form has a typo in my fiddle u might need to fix that

Upvotes: 8

Related Questions