CODEWITHSUNDEEP
javascriptjqueryhtml
Prince
Prince

Reputation: 1192

Check the content of an input field using jquery

I am new to javascript and I have a form, when I try to retrieve the user information, it does not work correctly.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <form method="post" action="">
        <div class="form-row">
            <label>
                <span>Register</span>
                <select name="register_as" id="dropdown">
                    <option value="none">Select One</option>
                    <option value="user">User</option>
                    <option value="designer">Designer</option>
                </select>
            </label>
        </div>
        <div>
            <label><span>Gender</span></label>
            <div class="form-radio-buttons">

                <div>
                    <label>
                        <input type="radio" name="gender" value="male">
                        <span>Male</span>
                    </label>
                </div>

                <div>
                    <label>
                        <input type="radio" name="gender" value="female">
                        <span>Female</span>
                    </label>
                </div>

            </div>
        </div>
        <div>
            <input type="submit">
        </div>
    </form>
</body>
</html>

<script>
    $(document).ready(function() {

        $("form").submit(function (e) {

            //Check if gender has not been selected
            var gender = $(this).find('input[name="gender"]').val();
            if(!gender){
                alert('select a gender');
            }

            //Check if 'register_as' is equal to 'user' or designer
            var register_as = $("#dropdown").val();
            if(register_as!= 'user' | register_as!= 'designer'){
                alert('Register as user or designer');
            }

            e.preventDefault();
        });
    });
</script>

When a user wants to register, he has to choose between user and designer. If what he chooses is different then we alert him. Same as the gender, he has to choose between male and female.

Kindly help me solve this problem.

Upvotes: 0

Views: 60

Answers (2)

kapantzak
kapantzak

Reputation: 11750

Added .filter(':checked') into gender checking and altered | to && into the if condition of the combobox checking 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <form method="post" action="">
        <div class="form-row">
            <label>
                <span>Register</span>
                <select name="register_as" id="dropdown">
                    <option value="none">Select One</option>
                    <option value="user">User</option>
                    <option value="designer">Designer</option>
                </select>
            </label>
        </div>
        <div>
            <label><span>Gender</span></label>
            <div class="form-radio-buttons">

                <div>
                    <label>
                        <input type="radio" name="gender" value="male">
                        <span>Male</span>
                    </label>
                </div>

                <div>
                    <label>
                        <input type="radio" name="gender" value="female">
                        <span>Female</span>
                    </label>
                </div>

            </div>
        </div>
        <div>
            <input type="submit">
        </div>
    </form>
</body>
</html>

<script>
    $(document).ready(function() {

        $("form").submit(function (e) {

            //Check if gender has not been selected
            var gender = $(this).find('input[name="gender"]').filter(':checked').val();
            if(!gender){
                alert('select a gender');
            }

            //Check if 'register_as' is equal to 'user' or designer
            var register_as = $("#dropdown").val();
            if(register_as!= 'user' && register_as!= 'designer'){
                alert('Register as user or designer');
            }

            e.preventDefault();
        });
    });
</script>

Upvotes: 1

Kld
Kld

Reputation: 7068

To get the radio group value you need to use :checked or you will get the first one all the time.

var gender = $(this).find('input[name="gender"]:checked').val();

The boolean operator Javascript && 

    $(document).ready(function() {

        $("form").submit(function (e) {

            //Check if gender has not been selected
            var gender = $(this).find('input[name="gender"]:checked').val(); 
            if(!gender){
                alert('select a gender');
            }

            //Check if 'register_as' is equal to 'user' or designer
            var register_as = $("#dropdown").val();
            if(register_as!= 'user' && register_as!= 'designer'){
                alert('Register as user or designer');
            }

            e.preventDefault();
        });
    });
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
    <form method="post" action="">
        <div class="form-row">
            <label>
                <span>Register</span>
                <select name="register_as" id="dropdown">
                    <option value="none">Select One</option>
                    <option value="user">User</option>
                    <option value="designer">Designer</option>
                </select>
            </label>
        </div>
        <div>
            <label><span>Gender</span></label>
            <div class="form-radio-buttons">

                <div>
                    <label>
                        <input type="radio" name="gender" value="male">
                        <span>Male</span>
                    </label>
                </div>

                <div>
                    <label>
                        <input type="radio" name="gender" value="female">
                        <span>Female</span>
                    </label>
                </div>

            </div>
        </div>
        <div>
            <input type="submit">
        </div>
    </form>

Upvotes: 3

Related Questions