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? stackoverflow.com/questions/24579361/…. Also, here's some interesting reading: meta.stackexchange.com/questions/19665/the-help-vampire-problem — the_marcelo_r
– the_marcelo_r, Commented Jun 23, 2015 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
– Navaneeth, Commented Jun 23, 2015 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
– Nikhil Batra, Commented Jun 23, 2015 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
– Raghav Motwani, Commented Jun 23, 2015 at 10:51

Praveen Kumar Purushothaman · Accepted Answer · 2015-06-23 11:32:23Z

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, 2015 at 11:32

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered Jun 23, 2015 at 10:20

Vishnu Prasad

7271 gold badge11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhil Batra · Accepted Answer · 2015-06-23 10:27:23Z

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

ruder partap · Accepted Answer · 2015-06-23 10:38:32Z

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

kavetiraviteja · Accepted Answer · 2015-06-23 11:28:31Z

<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...

Collectives™ on Stack Overflow

Javascript into HTML form

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related