Обработка событий в переключателе

Я хочу отобразить скрытое поле, когда я делаю определенный выбор с помощью переключателя. В настоящее время я использую код с onClick. Но почему-то это не работает для меня.Обработка событий в переключателе

<td height = 20 valign = middle align = right width = 40%>Is the account enrolled for any checking package?</td> 
    <td height = 20 valign = middle align = left width = 60%><input type = "radio" class="text1" name ="accEnrol" id ="accEnrolY" value = "Yes" onClick="accEnrol();">Yes <input type ="radio" class ="text1" name ="accEnrol" id ="accEnrolN" value ="No" onClick="accEnrol();"></input></td> 

function accEnrol() 
{ 
    if(document.getElementById('accEnrolY').checked) 
{ 
    document.getElementById('packages').style.visibility='visible'; 
} 
else 
{ 
    document.getElementById('packages').style.visibility='hidden'; 
}

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

Полный код JSP выглядит следующим образом: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ``<html> ``<head> <title>E-Form </title> <script type="text/javascript">

</script> ``<SCRIPT language="JavaScript" src="/Eform/JS/common.js"></SCRIPT>

<link href='/Eform/CSS/common.css' rel="stylesheet" type="text/css">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> ``<META HTTP-EQUIV="Expires" CONTENT="-1"> ``</head> <body

> `` <form action="/Eform/SendMail" method="post" enctype="multipart/form-data" id='Eform' name='Eform'> <table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" ``class="text1">
<tr> <td valign="middle"> <table width="100%" border="0" cellpadding="0" cellspacing="0" ``bgcolor="#FFFFFF" align="center" class="commonText1">

   `<tr>` 
        `<td height="20" valign="middle" ``align="right" width="40%">Account(Existing Customers) or Projected Monthly Balance(New Customers)``* :&nbsp;</td>` 
        `<td height="20" valign="middle" ``align="left" width="60%"> ` 
         `<select tabindex="0" ``name="accOrBalType" id="accOrBalType" onchange="doClear();" class="text1">` 
          `<option selected` `value="">-- Select One & Enter a value in to text box below --</option>` 
          `<option ``value="1">Account(Existing Customers)</option>` 
          `<option ` `value="2">Projected Monthly Balance(New Customers)</option>`  
         `</select> ` 
        `</td>` 
       `</tr>` 
       `<tr id = "accountNumber" style = "visibility:hidden">` 
        `<td height="20" valign="middle" ``align="right" width="40%">Account Number* :</td>` 
        `<td height="20" valign="middle" ``align="left" width="60%"> <input type="text" class="text1" maxlength="20" name="accountNumber" size="20" ``onblur="selectFirst();" /></td> ` 
       `</tr>` 
       `<tr id = "monthlyBalance" style `= "visibility:hidden">` 
        <td height="20" valign="middle"` `align="right" width="40%">Projected Monthly Balance* :</td>` 
        <td height="20" valign="middle" ``align="left" width="60%"> <input type="text" class="text1" maxlength="20" name="monthlyBalance" size="20" ``onblur="selectFirst();" /></td> ` 
       `</tr> 
       `<tr id = "accEnrol" style = "visibility:hidden">` 
        `<td height="20" valign="middle" ``align="right" width="40%">Is the account already enrolled in a checking package or program?* :&nbsp;</td>` 
        <`td height="20" valign="middle" ``align="left" width="60%"> <input type="radio" class="text1" name="accEnrol" id="accEnrolY" value="Yes" ``onclick="packageName();"> Yes &nbsp;&nbsp; <input type="radio" class="text1" name="enrol" id="accEnrolN" ``value="No" onclick="packageName();"> No</td> ` 
       `</tr>` 
       `<tr id = "packages" style = "visibility:hidden">` 
        `<td height="20" valign="middle" ``align="right" width="40%">Package Name* :&nbsp;</td>` 
        `<td height="20" valign="middle" ``align="left" width="60%"><input type="text" maxlength="100" class="text1" name="packages" size="50"/></td>` 
       `</tr>` 
       `<tr>` 
        `<td height="20" valign="middle" ``align="right" width="40%">Enrolled in Business Online* :&nbsp;</td>` 
        <td height="20" valign="middle" ``align="left" width="60%"> <input type="radio" class="text1" name="enrol" value="Yes"> Yes &nbsp;&nbsp; `<input `type="radio" class="text1" name="enrol" value="No"> No</td> ` 
       `</tr>` 
           `<tr>` 
        `<td height="20" valign="middle" ``align="right" width="40%">Business Contact's First Name* :&nbsp;</td>` 
        `<td height="20" valign="middle" ``align="left" width="60%"><input type="text" maxlength="15" class="text1" name="fName" id="fName" ``size="20" /></td>` 
       `</tr>` 
       `<tr>` 
        `<td height="20" valign="middle" ``align="right" width="40%">Business Contact's Last Name* :&nbsp;</td>` 
        `<td height="20" valign="middle"` `align="left" width="60%"><input type="text" maxlength="15" class="text1" name="lName" id="lName"` `size="20"/></td>` 
       `</tr>` 
                      `<tr>` 
        `<td height="20" valign="middle" ``align="right" width="40%">Telephone* :&nbsp;</td>` 
        <`td height="20" valign="middle"` `align="left" width="60%">` 
        `<input type="text" value=" +1-" size="1" ``readonly/>&nbsp;` 
         `<input type="text" ``maxlength="10" name="refTelephoneNo" id="refTelephoneNo" class="text1" size="11" />` 
        `</td>` 
       `</tr>` 
       `<tr>` 
        `<td height="20" valign="middle" ``align="right" width="40%">Branch* :&nbsp;</td>` 
        `<td height="20" valign="middle" ``align="left" width="60%"><input type="text" class="text1" maxlength="80" name="branch" id="branch" ``size="20" /></td>` 
       `</tr>` 
       `<!--tr>` 
        `<td height="20" valign="middle" ``align="right" width="40%">To mail Ids(semicolon separated)*</td>` 
        `<td height="20" valign="middle" ``align="left" width="60%"> <input type="text" class="text1" name="toList" id="toList" size="20" /></td>` 
       `</tr-->` 
       `<tr>` 
        `<td height="10" align="center" ``width="40%"></td>` 
        <td height="10" align="center" `width="60%"></td> ` 
       `</tr>` 
       `<tr>` 
        `<td align="right" width="40%">` 
         `<table border="0" ``cellspacing="0" cellpadding="0" width="100%">` 
          `<tr>` 
           `<td ``width="92%" height="5" align="right">` 
            `<a target="_self" href="#" onclick="validateData('mail');" class="tryitbtn">Send Mail</a>` 

           `</td>` 
           `<td ``width="8%" height="5" align="left">` 
            `<a target="_self" href="#" onclick="fnReset(document.forms[0]);" class="tryitbtn">Clear</a>` 
           `</td>` 
          <`/tr>` 
         `</table>` 
        `</td>` 
        `<td height="10" align="left" width="60%">` 
        `<a target="_self" href="#"` `onclick="validateData('preview');" class="tryitbtn">Preview</a>` 
        `</td> ` 
       `</tr>` 
       `<tr>` 
        `<td height="10" align="center" ``width="40%"></td>` 
        `<td height="10" align="center" ``width="60%"></td> ` 
       `</tr>` 

       `<tr>` 
        `<td height="10" align="center" width="40%">` 
         `<b>*</b> <FONT` `size="1">Indicates Mandatory Fields.</FONT></td>` 
        `<td height="10" align="center"` `width="60%"></td>` 
       `</tr>` 
      `</table>` 
     `</td>` 
    `</tr>` 
`</table>` 
`</form>`

</body> </html>

источник

2013-08-14 ConfusedProgrammer

Функция должна быть определена перед переключателями – cfs

, функция находится в отдельном файле, а не на странице jsp. Он отлично работает для одной другой радиокнопки на том же jsp – ConfusedProgrammer

Я проверил ваш код и, похоже, работает нормально. Если вы не используете функцию внутри тегов скрипта, а также забыли закрыть функцию в конце. – dishwasherWithProgrammingSkill

Я, наконец, узнал, что было ошибкой, и на самом деле это было довольно глупо. Я изменил имя функции из accEnrol() на имя программы, потому что имя тега и имя функции были похожи, что, я думаю, создало проблему. Я продолжал получать ошибку - объект не поддерживает это свойство или метод. Теперь, когда у меня есть уникальные имена для всего, он отлично работает! Большое спасибо за всю помощь и время! Cheers

источник

2013-08-18 10:16:26 ConfusedProgrammer

Я установил разметку, и закрыл функцию, и это работает для меня:

<!DOCTYPE html> 
<html> 
<head> 
    <script> 

    window.onload = function() 
    { 
     accEnrol = function() 
     { 
     if(document.getElementById('accEnrolY').checked) 
     { 
      document.getElementById('packages').style.visibility='visible'; 
     } 
     else 
     { 
      document.getElementById('packages').style.visibility='hidden'; 
     } 
     } 
    } 

    </script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <table> 
    <tr> 
    <td height = 20 valign = middle align = right width = 40%>Is the account enrolled for any checking package?</td> 
     <td height = 20 valign = middle align = left width = 60%><input type = "radio" class="text1" name ="accEnrol" id ="accEnrolY" value = "Yes" onClick="accEnrol();"/>Yes <input type ="radio" class ="text1" name ="accEnrol" id ="accEnrolN" value ="No" onClick="accEnrol();"/></td> 
    </tr> 
    <div id="packages">Here am I</div> 
</table> 
</body> 
</html>

jsBin: http://jsbin.com/ayarar/1/edit

источник

2013-08-14 18:01:43

, так как этот код находится на моей удаленной системе, я действительно напечатал его здесь. Это опечатка. – ConfusedProgrammer

@LalithaSairaman опубликовать весь соответствующий код. Где элемент пакетов в предоставленном коде? –

Функция accEnrol присутствует в отдельном файле, тогда как элемент пакетов фактически является текстовым полем, присутствующим на странице jsp, таким же, как и переключатели accEnrol. Название пакета – ConfusedProgrammer

Вот небольшая модификация кода ФП в.

<!--ADD THIS IN THE CODE--> 
<div id='packages'> 
enter your codes here 
</div> 

<td height = 20 valign = middle align = right width = 40%> 
    Is the account enrolled for any checking package? 
</td> 
<td height = 20 valign = middle align = left width = 60%> 
    <input type = "radio" class="text1" name ="accEnrol" id ="accEnrolY" value = "Yes" onClick="accEnrol();">Yes</input> 
    <input type ="radio" class ="text1" name ="accEnrol" id ="accEnrolN" value ="No" onClick="accEnrol();">No </input> 
</td> 
<script type="text/javascript"> 
function accEnrol(){ 
    if(document.getElementById('accEnrolY').checked){ 
     document.getElementById('packages').style.visibility='visible'; 
     alert ("checked"); 
    } 
    else{ 
     document.getElementById('packages').style.visibility='hidden'; 
     alert ("unchecked"); 
    } 
} //This is the part you were missing. 
</script>

Я добавил предупреждающие сообщения, чтобы узнать, получаете ли вы желаемый результат.

Вот пружинные выстрелы выше кодов
These are the codes in netbeans. Начальный экран, когда вы попадаете на страницу
This is the initial display when you get to that page

дисплей при нажатии на Нет

The alert appears when you clicked no and hides the contents of the container with id='packages' The alert with 'checked' message appears when you click on yes and the contents of the container with id='packages' are displayed again

Я не понимаю, почему он не работает для вас. Мне было бы полезно, если бы вы могли опубликовать фактические коды, где у вас установлены эти id = 'packages'. Единственная причина, по которой я мог подумать, - это проблема дублирования идентификаторов. Если у вас есть два идентификатора с одним и тем же именем под одной и той же областью, то javascript не будет распознавать, из какого из них можно извлечь.

источник

2013-08-14 18:15:37 dishwasherWithProgrammingSkill

по какой-то причине функция вообще не вызвана. ни один из предупреждений не появился – ConfusedProgrammer

Это не сработает потому что йо У вас нет контейнера с тегом id пакетов. Я просто протестировал его и, похоже, отлично работает. Я изменю код для вас. – dishwasherWithProgrammingSkill

У меня есть контейнер для контейнеров, и это тот, который я хочу сделать видимым. Он не работает – ConfusedProgrammer

Обработка событий в переключателе

ответ

Смежные вопросы