ansaurus

Question

Answer 1

A:

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)

Teja Kantamneni 2010-07-22 17:29:16

Answer 2

+2 A:

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';  
  }
}

CFP 2010-07-22 17:32:21

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.

Master 2010-07-22 17:37:45

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

rlb.usa 2010-07-22 17:47:45

rlb.usa 2010-07-22 17:48:36

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.

Master 2010-07-22 17:52:36

My pleasure :) I found that page which seems quite useful: http://www.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.

CFP 2010-07-22 17:57:04

Answer 3

A:

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.

Stephen 2010-07-22 18:21:54

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.

Stephen 2010-07-22 21:43:23

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

Master 2010-07-23 17:54:22

ansaurus

tags:

views:

answers:

If statement in javascript forms

related questions