Если заявление в формах javascript - PullRequest
Новая
       28

Если заявление в формах javascript

0 голосов
/ 22 июля 2010

Я довольно новичок в JavaScript, но имею некоторый опыт работы с HTML. Я пытаюсь создать форму, которая позволяет мне выбрать опцию из выпадающего меню, которая дополнительно расширяет форму (показывая новые поля на той же странице) в зависимости от опции, выбранной из выпадающего меню. Я подумал, что мне нужно какое-то заявление if для достижения этой цели, но я не могу найти правильный способ сделать это. У меня уже работает раскрывающееся меню. Я бы поставил здесь код, который у меня уже есть, но по какой-то причине он не позволяет мне Спасибо за вашу помощь

РЕДАКТИРОВАТЬ - Выполнить код из комментариев через 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>

Ответы [ 3 ]

2 голосов
/ 22 июля 2010

То, что вы могли бы сделать, это разделить вашу страницу на различные div разделы, по одному для каждого случая в раскрывающемся списке. Затем вы бы изменили свойство display этих div s, используя 

element.style.display = 'none'

или 

element.style.display = 'block'

Если ваши настройки более сложны, вы можете создать список полей, которые должны быть видны для каждого элемента в поле со списком, а затем показать / скрыть, используя ту же технику.

Например, у вас есть выпадающий список с мужчинами и женщинами. Тогда вам потребуется div элементов, для которых id будет male или female. Тогда вы будете использовать 

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';  
  }
}
0 голосов
/ 22 июля 2010

То, что вы хотите сделать, это начать с события onchange вашей причины, выбрав поле: 

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

myFunc() (простите, я не очень креативен) будет там, где выпоказывать / скрывать другие входные данные - возможно, это не другая форма , поскольку обычно входные данные собираются в одну форму на странице.Каждый вход (или набор входов) должен быть в своем собственном теге <div>, и затем вы можете использовать свойство element.style.display тега, чтобы показать / скрыть входные данные, как описано в других ответах.Например, в вашей форме может быть указано следующее: 

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

JavaScript myFunc() будет выглядеть примерно так: 

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:
  }
}

Наконец, вы захотите иметь JavaScriptфункция, загружающая страницу HTML - <body onload="anotherFunc()">, которая устанавливает оба свойства style.display div в значение none, чтобы они не отображались до того, как пользователь что-либо выберет.

0 голосов
/ 22 июля 2010 
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
 }
}

Это условие if, которое нужно использовать, и в примере также показано, как связать событие изменения тоже .. ( фрагмент кода, извлеченный из набора javascript )

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...