Флажок установлен, вызывает несколько обязательных полей - PullRequest
0 голосов
/ 17 декабря 2011

Я создал форму jQuery с флажком, который, если он установлен, будет отображать раскрывающееся меню. Однако, если установлен этот же флажок, в дополнение к раскрывающемуся раскрывающемуся меню мне необходимо также заполнить поле текстовой области Обсуждение. Вот что у меня есть:

<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $("#fourthselection").change(function(){      
            var showOrHide =$(this).is(':checked');         
                $("#togg").toggle(showOrHide);      
        });
    });
</script>

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script>
    $(document).ready(function(){
        $("#serviceForm").validate();
    });
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<form id="serviceForm" action="#" onSubmit="required(this);" method="POST"> 
<input name="orgid" type="hidden" value="000001" /> 
<input name="retURL" type="hidden" value="#" />
<label for="company">* Company</label><br />  
<input id="company" class="required" maxlength="80" name="company" size="80" type="text" /><br />
<br />
<label for="name">* Name</label><br />
<input id="name" class="required" maxlength="80" name="name" size="80" type="text" /><br />
<br />
<label for="email">Email</label>  <br />
<input id="email" maxlength="80" name="email" size="80" type="text" /><br />
<br />
<label for="phone">Phone</label><br />
<input id="phone" maxlength="40" name="phone" size="20" type="text" /><br />
<br />
<br />
Make selection?<br />
<input id="firstselection" name="firstselection" type="checkbox" value="1" /> First selection <br />
<input id="secondselection" name="secondselection" type="checkbox" value="1" /> Second selection<br />
<input id="thirdselection" name="thirdselection" type="checkbox" value="1" /> Third selection <br />
<input id="fourthselection" name="fourthselection" type="checkbox" value="1" /> Fourth selection <br />
<span id="togg" style="display:none">
If fourth selection, please make a selection?  
<select  id="fourthchoices" name="fourthchoices" title="Fourth selection choices">
<option value="">--Please Select One--</option>
<option value="Choice A">Choice A</option>
<option value="Choice B">Choice B</option>
<option value="Choice C">Choice C</option>
<option value="Choice D">Choice D</option>
<option value="Choice E">Choice E</option>
<option value="Choice F">Choice F</option>
<option value="Choice G">Choice G</option>
<option value="Choice H">Choice H</option>
</select><br>
</span>
<input id="selection" name="selection" type="checkbox" value="1" /> Fifth selection<br />
<input id="sixthselection" name="sixthselection" type="checkbox" value="1" /> Sixth selection<br />
<input id="otherselection" name="otherselection" type="checkbox" value="1" /> Other 
<br />
<br />
<span id="togg2" style="display:inline">
<label for="description">Description</label> <br />
(if Fourth selection, please include more information)<br />
<textarea name="description" id="description" cols="80" rows="5"></textarea><br />
<br />
<br />
</span>
<input name="submit" type="submit" /> 
</form>

1 Ответ

0 голосов
/ 17 декабря 2011

Вот ваш ответ:

$("#fourthselection").change(function(){      
    $("#togg").toggle(this.checked);
    $("#description").toggleClass("required");
});
$("#serviceForm").validate();

А вот и рабочий пример .

Используйте нативный JavaScript, когда это возможно, например; Вы можете получить доступ к статусу флажков с помощью this.checked. И будет очень хорошо, если вы подготовите свой вопрос на jsFiddle или на каком-либо эквивалентном сайте.

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