Reazur Rahman Reazur Rahman - 8 months ago 19
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>


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";

I have also tried this:

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";



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.


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
      "Contact_claimantRepresentativeType");//nobody knows yet what is "etk"