input to change on selection and input mininum value

i have two input the first input its membership number, the membership number cannot be lessthan 16 must be exactly 16 and on the second input one need to select either identity number or password, the password input must be hidden only show when its selected, once the password is selected the identity number will change to password

<div class="control-group">
    <label class="control-label">
        <?php echo get_phrase( 'membership_number');?>
    </label>
    <div class="controls">
        <input type="text" class="validate[required]" name="membership_number" id="membership_number" maxlength="16" onkeypress="return isNumberKey(event)" /><span id="errmsg"></span>
    </div>
</div>
<div class="control-group">
    <label for="IDType" class="control-label">
        <?php echo get_phrase( 'ID_Type');?>
    </label>
    <div class="controls">
        <select name="IDType" id="IDType" class="uniform" style="width:100%;">
            <option value="">
                <?php echo get_phrase( 'select_id_type');?>
            </option>
            <option value="SouthAfricanId">
                <?php echo get_phrase( 'South_African_ID');?>
            </option>
            <option value="passport">
                <?php echo get_phrase( 'passport');?>
            </option>
        </select>
    </div>
</div>
<div class="control-group">
    <label class="control-label">
        <?php echo get_phrase( 'iD_number');?>
    </label>
    <div class="controls">
        <input type="text" class="validate[required]" maxlength="13" name="id_number" id="id_number" />
    </div>
</div>
<div class="control-group">
    <label class="control-label">
        <?php echo get_phrase( 'passport');?>
    </label>
    <div class="controls">
        <input type="text" class="validate[required]" name="passport" id="passport" />
    </div>
</div>
<script>
var select = document.getElementById('IdType');
var options = select.getElementsByTagName('option');
var label = document.getElementById('id_number');

function selectChanged(e) {
    var value = e.target.value;
    var option;

    for (var i = 0; i < options.length; i++) {
        if (options[i].value === value) {
            option = options[i];
        }
    }

    label.innerText = option.innerText;
}

select.addEventListener('change', selectChanged, false);
</script>
<script>
$(document).ready(function() {
    //called when key is pressed in textbox
    $("#membership_number").keypress(function(e) {
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            //display error message
            $("#errmsg").html("Digits Only").show().fadeOut("slow");
            return false;
        }
    });
});
</script>


Source: html5

Leave a Reply