Reazur Rahman Reazur Rahman - 4 months ago 9
HTML Question

Change Header and Hide text field on selected option change

On a html page i have a drop down and a header. I would like to change the header and hide some field depending on what option is being selected:

Here is the html code:

<h1 id ="title_form" style="margin-bottom: 25px;">Contact Form </h1>

<select class="formInput" id="Contact_contactType" name="Contact_contactType" style="width: 200px;">
<option value=""></option>

<option value="1">Congress</option>

<option value="2">Claimant</option>

<option value="3">Claimant Representative</option>

<option value="4">Contract Attorney</option>

<option value="5">Employer Attorney</option>

<option value="6">Employer</option>

</select>


Here is my javascript:

var ddl = document.getElementById("Contact_claimantType");
var selectedValue = ddl.options[ddl.selectedIndex].value;

if (selectedValue == '0') {

console.log("Picked Nothing");
jQuery("#title_form").html = "Contact Form";

}else if (selectedValue == '1') {

console.log("Picked Congress");
jQuery("#title_form").html = "Congress Contact Form";

}else if (selectedValue == '2') {

console.log("Picked Claimant");
jQuery("#title_form").html = "Claimant Contact Form";
edeControl("ConepresentativeType");
}


I have also tried this:

jQuery("#Contact_claimantType").change(function(){
if(jQuery(this).val()=="0")
{
console.log("Picked Nothing");
jQuery("#title_form").html = "Conrm";

}else if (jQuery(this).val()=="1"){

console.log("Picked Congress");
jQuery("#title_form").html = "Cong Form";


}else if (jQuery(this).val()=="2"){

console.log("Picked Claimant");
jQuery("#title_form").html = "Claimant Contact Form";
eControl("ContacntativeType");


}

});


My code currently is not doing anything. It's not even writing anything to the console. Is there anyway i can accomplish what i want either using jQuery or javascript.

Answer

This is minimal fix which allows your script to do something:

<script type="text/javascript">
    $(document).ready(function () {//document must be loaded before you can manage DOM
        //var ddl = document.getElementById("Contact_claimantType");//see above
            //var selectedValue = ddl.options[ddl.selectedIndex].value;//see above
        $('#Contact_contactType').change(function () {//Contact_claimantType not found make sure you use correct IDs
            var selectedValue = this.value;// now we have selected value
            //if (selectedValue == '0') {//you need "0" option which doesn't exist
            if (selectedValue == '') {

                console.log("Picked Nothing");
                //$("#title_form").html = "Contact Form";//jQuery: $ is common nickname for jQuery
                $("#title_form").html("Contact Form");//this way

            } else if (selectedValue == '1') {

                console.log("Picked Congress");
                //$("#title_form").html = "Congress Contact Form";
                $("#title_form").html("Congress Contact Form");

            } else if (selectedValue == '2') {

                console.log("Picked Claimant");
                jQuery("#title_form").html = "Claimant Contact Form";//guess what to do with it
                etk.app.dataForm.hideControl("Contact_claimantRepresentativeType");//nobody knows yet what is "etk"
            }
        });
    });
</script>