Prince Prince - 4 months ago 12
jQuery Question

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.

Kld Kld
Answer

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>
 
 

Comments