CODEWITHSUNDEEP
javascriptjqueryinputselection
Shiela
Shiela

Reputation: 679

JS select on change

I have an onchange function for select.

$(document).ready(function() {
    $('#thechoices').on('change', do_the_change_studfac);
});

function do_the_change_studfac() {
    var the_position = $('#thechoices').val();
    var studentcourse = document.getElementById("studcourse");
    var atudentlevel = document.getElementById("studlevel");
    //var sub = $('#submithere');

    if (the_position == 'stud'){

        //alert('true');
        studentcourse.show();
        studentlevel.show();
        studentcourse.attr("required","required");
        studentlevel.attr("required","required");

    }
    if (the_position == 'fac'){

        //alert('false');
        studentcourse.hide();
        studentlevel.hide();
        studentcourse.removeAttr("required");
        studentlevel.removeAttr("required");


    }
}

And these are my html input fields:

<label>Select Position</label>
<select id="thechoices" name="position">        
    <option value="stud">Student</option>
    <option value="fac">Faculty Member</option>
</select>

<label for="name">Name </label>
<input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
<label>ID Number</label>
<input type="text" name="id_num" size="8" maxlength="8" pattern="\d" placeholder="8-digits only"required />
<label>Course</label>
<input type="text" name="course" id="studcourse" placeholder="Course" required/>
<label>Level</label>
<input type="text" name="year" id="studlevel" placeholder="Level" required/>

When onchange, values I declared on JS does not work (hide & show; set & unset required attribute). However, when I turn on the alert, onchange does work. What's the matter with this? I have these scripts:

<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>

Upvotes: 0

Views: 194

Answers (2)

tragicrock
tragicrock

Reputation: 136

If you wanted to reduce your code and make a bit more efficient, here is another way to do it: 

$(document).ready(function() {
    $('#thechoices').on('change', do_the_change_studfac);
});

function do_the_change_studfac() {
    var the_position = $('#thechoices').val();
    if (the_position == 'stud'){
        //alert('true');
        $("#studcourse,#studlevel").show().attr("required","required");
    }
    else if (the_position == 'fac'){
        //alert('false');
        $("#studcourse,#studlevel").hide().removeAttr("required","required");
    }
}

Since the selectors for studcourse and studlevel only get referenced once in the function, and you do the same thing to both elements...you can use the jQuery chained commands and combine it all.

Also, using the else would eliminate a second comparison when the_position=='stud'...the default.

Upvotes: 1

Goose
Goose

Reputation: 3279

You are referencing jQuery functions .show() and .hide() but you are defining your objects using plain javascript.

Update this (and also fix the spelling error "atudentlevel"):

var studentcourse = $("#studcourse");
var studentlevel = $("#studlevel");

http://jsfiddle.net/V7Qj3/

Upvotes: 6

Related Questions