If statement in javascript forms

Question

Im fairly new to javascript but have some experience in HTML. I am trying to create a form which allows me to select an option from the drop down menu, which further expands the form (showing new fields on the same page) depending on the option selected from the drop down menu. I figured I need some sort of if statement to achieve this but I can't seem to figure out the right way to do so. I already have the drop down menu working. I would put the code I already have on here, but for some reason its not letting me Thanks for your help

EDIT - Ran the code from comments through HTML tidy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

  <title>Ipod Inventory</title>
  <script language="JavaScript" type="text/javascript">
//<![CDATA[
  function submitSelect(form) { alert (form.reason.selectedIndex); document.body.innerHTML() = "<h3>NEW STUFF<h3>"; } 
  //]]>
  </script>
</head>

<body>
  <h3>General</h3>Employee Requesting:

  <form>
    <input type="text" name="employee" value="" />
  </form>

  <form name="myform" action="" method="get" id="myform">
    Reason: <select name="reason">
      <option>
        Conference/Meeting
      </option>

      <option>
        Loaner
      </option>
    </select> <input type="button" name="submit" value="Submit" onclick=
    "submitSelect(this.form)" /><br />
  </form>
</body>
</html>

It's not letting you? What happens when you paste the code into the question text box? — jball
– jball, Commented Jul 22, 2010 at 17:29
Go ahead and copy-paste your code in here, and it it doesn't quite look right, we'll help you in that department. No worries, mate! — rlb.usa
– rlb.usa, Commented Jul 22, 2010 at 17:29
Are you wanting to add/remove entire <select> boxes, or to add/remove <option>s from a single select box? That is, are you looking to add new elements to the form or just edit pre-existing elements? — Stephen
– Stephen, Commented Jul 22, 2010 at 17:30
Well here's the code, hope it shows <HTML> <HEAD> <TITLE>Ipod Inventory</TITLE> <SCRIPT LANGUAGE="JavaScript"> function submitSelect(form) { alert (form.reason.selectedIndex); document.body.innerHTML() = "<h3>NEW STUFF<h3>"; } </SCRIPT> </HEAD> <BODY> <h3>General</h3> Employee Requesting:<INPUT TYPE="text" NAME="employee" VALUE=""> <FORM NAME="myform" ACTION="" METHOD="GET"> Reason: <SELECT NAME="reason"> <OPTION> <OPTION>Conference/Meeting <OPTION>Loaner </SELECT> <INPUT TYPE="button" NAME="submit" Value="Submit" onClick="submitSelect(this.form)"> <br /> </FORM> </BODY> </HTML> — Master
– Master, Commented Jul 22, 2010 at 17:33
You should use lowercase elements, such as body, html, and so on. — Clément
– Clément, Commented Jul 22, 2010 at 17:39

Clément · Accepted Answer · 2010-07-22 17:38:32Z

2

What you could do is split your page in different div sections, one for each case in your dropdown. You would then alter the display property of those divs using

element.style.display = 'none'

or

element.style.display = 'block'

If your setup is more complex, you might want to create a list of fields that should be visible for each item in your combo box, and then show/hide using the same technique.

For example, you would have a dropdown with male, and female. You would then have to div elements, whose id would be male or female. Then you would use

function toggle() {
  if (document.getElementById('selector').value == 'male') {
    document.getElementById('male').style.display = 'block';
    document.getElementById('female').style.display = 'none';
  }
  else {
    document.getElementById('male').style.display = 'none';
    document.getElementById('female').style.display = 'block';  
  }
}

edited Jul 22, 2010 at 17:38

answered Jul 22, 2010 at 17:32

Clément

13.1k16 gold badges80 silver badges122 bronze badges

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

5 Comments

Master Over a year ago

this could work,but What kind of syntax should I use to tell the if statement that if "Conference/Meeting" option is selected display the specific div.

rlb.usa Over a year ago

if( document.getElementsByName('reason').value == "Conference/Meeting" ){ /* ... do stuff ... */ }

rlb.usa Over a year ago

Although, I might suggest checking the element exists first, just in case, like this :

if(  document.getElementsByName('reason') && document.getElementsByName('reason').value == "Conference/Meeting" ){ /* ... do stuff ... */ }

Master Over a year ago

thats actually quite helpful. I'm gonna research some more about creating and calling divs and try it out. Also how do I have the divs hidden when the webpage is first loaded. I understand how to make them appear through the if statement, just not sure how to keep them hidden.

Clément Over a year ago

My pleasure :) I found that page which seems quite useful: randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div You can then associate your function with the onchange event of your dropdown.

Teja Kantamneni · Accepted Answer · 2010-07-22 17:29:16Z

0

var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
 if (chosenoption.value!="nothing"){
  window.open(chosenoption.value, "", "") //open target site (based on option's value attr) in new window
 }
}

Thats the if condition you need to use and the example also shows how to bind change event too..(code snippet extracted from javascript kit)

answered Jul 22, 2010 at 17:29

Teja Kantamneni

17.5k12 gold badges58 silver badges86 bronze badges

Comments

Stephen · Accepted Answer · 2010-07-22 18:40:08Z

-1

What you want to do is start with the onchange event of your reason select box:

<select name="reason" id="reason" onchange="myFunc();">

myFunc() (excuse the name, I'm not very creative) will be where you do your showing/hiding of the other inputs - probably not a different form, as usually inputs are collected into a single form on a page. Each input (or set of inputs) should be in it's own <div> tag, and you can then use the element.style.display property of the tag to show/hide the inputs, as described in the other answers. For example, you might have the following in your form:

<form name="myform" action="" method="get" id="myform">
    Reason: <select name="reason" id="reason" onchange="myFunc()">
      <option>
        Conference/Meeting
      </option>
      <option>
        Loaner
      </option>
    </select> 
    <div id="conferenceInputs">
      Conference:
      <select name="conferenceSelectBox" id="conferenceSelectBox">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
    <div id="loanerInputs">
      Loaner:
      <select name="loanerSelectBox" id="loanerSelectBox">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
    <input type="button" name="submit" value="Submit" onclick="submitSelect(this.form)" />
  </form>

The myFunc() javascript would look something like this:

function myFunc() {
  var selectElem = document.getElementById('reason');
  var optionText = selectElem.options[selectElem.selectedIndex].text;
  switch(optionText) {
    case "Conference/Meeting":
      document.getElementById('conferenceInputs').style.display = 'block';
      document.getElementById('loanerInputs').style.display = 'none';
      break;
    case "Loaner":
      document.getElementById('loanerInputs').style.display = 'block';
      document.getElementById('conferenceInputs').style.display = 'none';
      break;
    default:
  }
}

Finally, you would want to have a javascript function that loads with the HTML page - <body onload="anotherFunc()"> that sets both div's style.display properties to 'none' so that they don't appear before the user selects anything.

edited Jul 22, 2010 at 18:40

answered Jul 22, 2010 at 18:21

Stephen

6,0974 gold badges40 silver badges55 bronze badges

2 Comments

Stephen Over a year ago

At whoever down-voted me, can you please explain why? I understand that down-voting is meant to be used for when something is wrong, and I gladly accept all corrections to my answer and will change it with credit, or delete it if it's that badly wrong. Given that I can copy/paste the above answer (and have done so) and get it to run fine, I am unsure what I may have done wrong.

Master Over a year ago

Im not sure who down-voted you, but your answer is amazing. You continued CFP's answer and gave me a lot more details. I got sidetracked by a different assignment yesterday so I didnt finish writing the code for this one. This a big help. Thanks

Collectives™ on Stack Overflow

If statement in javascript forms

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related