Javascript into HTML form

Question

Hi I am trying to implement a HTML form. Let's suppose it has 4 fields- Name , Age , City (dropdown- contains A,B,C,D) and Region. I want Region field to appear only when City selected is A or B and disappears if city is changed to C and D. Could anyone help with JS/Jquery code?

JsFiddle:

<!DOCTYPE HTML>
<html>
    <head>
    <title>BEAT | Login</title>
    <link rel="shortcut icon" href="images/favi.ico">
    </head>

    <body>
        <div id="login">
            <form>
                Name: <input type="text"></input>
                <br/>

                Age: <input type="text"></input>
                <br/>
                State: <select>
                          <option value="A">A</option>
                          <option value="B">B</option>
                          <option value="C">C</option>
                          <option value="D">D</option>
                        </select>
                        <br/>
                Region: <select>
                            <option value="north">North</option>
                            <option value="south">South</option>
                         </select>
            </form>
        </div>
    </body>
</html>

How about researching for more generic topics? http://stackoverflow.com/questions/24579361/chained-select-boxes-country-state-city. Also, here's some interesting reading: http://meta.stackexchange.com/questions/19665/the-help-vampire-problem — the_marcelo_r, Jun 23 '15 at 10:20
Probably, you could hire someone to get your work done! :P you would have asked some generic questions rather than going to the point! — Navaneeth, Jun 23 '15 at 10:38
You should have tagged the question for jquery and specified that you can use it, since you tagged it for javascript only, I had to code the answer in pure javascript. — Nikhil Batra, Jun 23 '15 at 10:48
@NikhilBatra Sorry I haven't tagged Jquery. Still I had mentioned JS/Jquery in the question. Anyways thank you for effort! — Raghav Motwani, Jun 23 '15 at 10:51

score 1 · Accepted Answer · edited Jun 23 '15 at 11:32

1

Updated Fiddle...

$('#region').css('display','none');
$('#state').on('change', function() {
    var state= $('#state').val();
    if(state=="A"||state=="B"){
        $('#region').css('display','block');
     }else{
         $('#region').css('display','none');
     }
});

Try this..

edited Jun 23 '15 at 11:32

Praveen Kumar Purushothaman

164,888
24
203
252

answered Jun 23 '15 at 10:20

Vishnu Prasad

729
1
11
28

score 1 · Answer 2 · answered Jun 23 '15 at 10:27

Since you haven't tagged it for jquery, so using pure javascript you should update the following:

In HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>BEAT | Login</title>
<link rel="shortcut icon" href="images/favi.ico">
</head>

<body>
    <div id="login">
        <form>
            Name: <input type="text"></input>
            <br/>

            Age: <input type="text"></input>
            <br/>
            State: <select id="state">
                      <option value="A">A</option>
                      <option value="B">B</option>
                      <option value="C">C</option>
                      <option value="D">D</option>
                    </select>
                    <br/>
            <div id="region">
                Region: <select>
                        <option value="north">North</option>
                        <option value="south">South</option>
                </select>
            </div>
        </form>
    </div>
</body>

Here I have added ids for region and state fields.

Updated the javascript to:

var state = document.getElementById("state");
state.addEventListener("change",function(){
var selected = state.options[state.selectedIndex].text;
    if(selected == 'A' || selected == 'B'){
        document.getElementById('region').style.display = 'block';    
    }   
    else{
        document.getElementById('region').style.display = 'none';
    }
});

Here the state element is bound to change event. On each change in the select list, the selected value is compared to 'A' and 'B'. If found equal, then Region field is displayed, else it is hidden.

See the updated fiddle: "http://jsfiddle.net/4v5mkfz9/6/"

score 1 · Answer 3 · answered Jun 23 '15 at 10:38

use in java script

$('#regionArea').hide();
$('#state').on('change', function() {
    var state= $('#state').val();
    if(state=="A"||state=="B"){
        $('#regionArea').show();
     }else{
         $('#regionArea').hide();
     }
});

and

<div id="login">
        <form>
            Name: <input type="text"></input>
            <br/>

            Age: <input type="text"></input>
            <br/>
            State: <select id="state">
                      <option value="A">A</option>
                      <option value="B">B</option>
                      <option value="C">C</option>
                      <option value="D">D</option>
                    </select>
                    <br/><div id="regionArea">
            Region: <select id="region">
                        <option value="north">North</option>
                        <option value="south">South</option>
            </select></div>
        </form>
    </div>

updated fiddle

score 0 · Answer 4 · answered Jun 23 '15 at 11:28

<html>
<head>
<title>BEAT | Login</title>
<link rel="shortcut icon" href="images/favi.ico">
</head>

<body>
    <div id="login">
        <form>
            Name: <input type="text"></input>
            <br/>

            Age: <input type="text"></input>
            <br/>
            State: <select id="state">
                      <option value="A">A</option>
                      <option value="B">B</option>
                      <option value="C">C</option>
                      <option value="D">D</option>
                    </select>
                    <br/>
            Region: <select id="Direction">
                        <option value="north">North</option>
                        <option value="south">South</option>
                     </select>
        </form>
    </div>
</body>

and

<script type="text/javascript">

document.getElementById("state").addEventListener("change", CheckChange);

function CheckChange() {
 var state = document.getElementById("state");
 var selectedValue = state.options[state.selectedIndex].value;
 if(selectedValue == 'A' || selectedValue == 'B')
  {
     document.getElementById("Direction").style.visibility = "hidden";
   }
 else
 {
  document.getElementById("Direction").style.visibility = "visible";
  }
}
</script>

you can also use "document.getElementById("Direction").style.display" To set Style Property...

Javascript into HTML form

4 Answers4