Необходимо поменять видимость поля на форме - PullRequest
Новая
       15

Необходимо поменять видимость поля на форме

2 голосов
/ 01 февраля 2011

Я пытаюсь поменять видимость 2 элементов на основе выпадающего списка в форме.

Если пользователь выбирает любой из первых 6 элементов, область «Сообщение» остается.

Если пользователь выбирает последний элемент «Права на воспроизведение», то «Сообщение» исчезает и заменяется на «Сообщение о правах».

У меня все работает с отображением / скрытием прав репро, но без окна сообщения. Я новичок в Java, так что простите мое невежество. Вот полный код страницы или просмотр на Paul-Rand.com :

Работал с этим кодом, но есть ли более чистый способ сделать это? 

<!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>
        <title>Paul-Rand.com :: Contact Us</title>
        {embed=site/meta}
        <link rel="stylesheet" type="text/css" href="{stylesheet=styles/twocolumn}" />
        <link rel="stylesheet" type="text/css" href="{stylesheet=styles/global}" />
        <script type="text/javascript" src="{path=scripts/livevalidation_standalone}"></script>
        <script type="text/javascript">
            // <![CDATA[
                function display(obj,id1,id2) {
                    txt = obj.options[obj.selectedIndex].value;
                    document.getElementById(id1).style.display = 'none';
                    document.getElementById(id2).style.display = 'none';
                    if ( txt.match(id1) ) {
                        document.getElementById(id1).style.display = 'block';
                    }
                    if ( txt.match(id2) ) {
                        document.getElementById(id2).style.display = 'block';
                    }
                }
            // ]]>
        </script>

    </head>
    <body>
        {embed="site/mainNav"}

        <div id="container">

            <div id="centercontent">

                <h1>Contact Us</h1>

                <div class="form-left">
                    <p>To send us a message, please fill out the form below. We'll get back to you shortly!</p>

                    {exp:freeform:form
                    required="name|email|message"  
                    collection="Contact Form"
                    return="site/success"
                    notify="dlewandowski38@yahoo.com"
                    template="randContact"
                    file_upload="Email attachments"
                    send_attachment="yes" }

                        <label>Name / Company Name <em>(required)</em> 
                            <br style="clear:both">
                            <span><input type="text" name="name" id="Name" class="formMediumText"/></span>
                        </label>

                        <script type="text/javascript">var Name = new LiveValidation('Name');Name.add(Validate.Presence);</script> 

                        <label>Email <em>(required)</em>
                            <br style="clear:both">
                            <span><input type="text" name="email" id="Email" class="formMediumText"/></span>
                            <script type="text/javascript">var Email = new LiveValidation('Email');Email.add(Validate.Email );</script>
                        </label>

                        <label>Regarding
                            <br style="clear:both">
                            <span>
                                <select name="regarding" id="Regarding"  class="formMediumText" onchange="display(this,'subject','Reproduction Rights');">
                                    <option value="subject">General Inquiry</option>
                                    <option value="subject">Suggestion for the site</option>
                                    <option value="subject">Problem with the site</option>
                                    <option value="subject">Work to Share</option>
                                    <option value="subject">Story to Share</option>
                                    <option value="subject">Pictures to Share</option>
                                    <option value="Reproduction Rights">Reproduction Rights</option>
                                </select>
                            </span>
                        </label>

                        <div id="Reproduction Rights" style="display: none; float:left;background-color: #ff9900; padding: 20px;">
                            <h4 style="text-transform: uppercase; padding: 0; margin:0;">Reproduction rights are granted through the Paul Rand estate only.</h4>
                            <p style="padding: 0; margin: 0;">Contact the <a href="http://www.library.yale.edu/mssa/" target="_blank">Yale Archives</a> with a detailed description of your planned usage and they will process your request.</p>
                        </div>

                        <div id="subject" style="display: none">
                            <label>Message
                                <br style="clear:both">
                                <span>
                                    <textarea cols="24" rows="12" name="message" id="Message"  class="formMediumText"></textarea>
                                </span>
                            </label> 
                        </div>

                        <br style="clear:both"/>
                        <hr/>

                        <h2 style="margin-bottom:-18px">Help the site grow</h2>
                        <h5 style="margin-bottom:-6px">Have a piece of Paul Rand work that's not seen on the site? Share it! </h5>
                        <p>Send your files (any image type, 800px wide or larger), your name and website (if available). I'll add it to the appropriate gallery and give you credit for your addition.</p>
                        <p>Your contributions are GREATLY APPRECIATED!</p>
                        <br/>

                        <label for="file" style="float:left;">Share a File (up to 5 per message):</label>
                        <span><input type="file" name="file1" id="file1" class="formPicBrowse"/></span>
                        <span><input type="file" name="file2" id="file2" class="formPicBrowse"/></span>
                        <span><input type="file" name="file3" id="file3" class="formPicBrowse"/></span>
                        <span><input type="file" name="file4" id="file4" class="formPicBrowse"/></span>
                        <span><input type="file" name="file5" id="file5" class="formPicBrowse"/></span>

                        <br style="clear:both"/>
                        <br/>

                        {if captcha}
                            <label>For security, please enter the word you see below:
                                <br style="clear:both">
                                <p style="width:160px;">{captcha}</p>
                                <span><input type="text" name="captcha" onfocus="if(this.value == 'Security Code') { this.value = ''; }" value="Security Code" id="Captcha" class="formMediumText" style="width:130px" /></span>
                            <script type="text/javascript">var Captcha = new LiveValidation('Captcha');Captcha.add(Validate.Presence);</script> 
                            </label>    
                        {/if}

                        <br style="clear:both"/>
                        <br/>

                        <p><input type="submit" name="submit" value="Send" class="buttons" style="font-size:18px; padding-top:8px;"/></p>

                    {/exp:freeform:form}  
                </div>

                <script type="text/javascript">
                    var Name = new LiveValidation( 'Name', {onlyOnSubmit: true } );
                    Name.add( Validate.Presence );
                    var Email = new LiveValidation( 'Email', {onlyOnSubmit: true } );
                    Email.add( Validate.Presence );
                    var Message = new LiveValidation( 'Message', {onlyOnSubmit: true } );
                    Message.add( Validate.Presence );
                    var Captcha = new LiveValidation( 'Captcha', {onlyOnSubmit: true } );
                    Captcha.add( Validate.Presence );
                </script>
            </div>
        </div>
        {embed=site/bottomSection}
        {embed=site/footer}
        {embed=site/googleTracking}
    </body>
</html>

1 Ответ

2 голосов
/ 01 февраля 2011

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

Это не проблема JavaScript как таковая, а просто проблема логики.Так что вы хотите сделать, это переключатель.Если пользователь выбрал option a, установите div 1 видимым и div 2 невидимым.Если пользователь выбрал option b, сделайте наоборот.Ниже приведена измененная функция отображения 

function display(obj) {
  txt = obj.options[obj.selectedIndex].value;
  if (txt.match("Reproduction Rights")) {
    document.getElementById("Reproduction Rights").style.display = 'block';
    document.getElementById("MessageDiv").style.display = 'none';
   }
   else {
     document.getElementById("Reproduction Rights").style.display = 'none';
     document.getElementById("MessageDiv").style.display = 'block';
   }
}

и HTML для ее использования.Об этом стоит отметить два момента.Вам не нужен вызов функции hide() в обработчике событий onchange, функция display - это переключатель, он сделает всю работу.Я также добавил упаковочный div с идентификатором MessageDiv, чтобы скрыть как окно сообщения, так и текст, сопровождающий окно сообщения.Если текст не должен быть скрытым, то во что бы то ни стало пропустите div. 

<label>Regarding
<br style="clear:both">
<span><select name="regarding" id="Regarding" class="formMediumText" onchange="display(this, 'Reproduction Rights');">
<option value="General Inquiry">General Inquiry</option>
<option value="Suggestion for the site">Suggestion for the site</option>
<option value="Problem with the site">Problem with the site</option>
<option value="Work to Share">Work to Share</option>
<option value="Story to Share">Story to Share</option>
<option value="Pictures to Share">Pictures to Share</option>
<option value="Reproduction Rights">Reproduction Rights</option>
</select></span>
</label>

<div id="Reproduction Rights" style="display: none; float:left;background-color: #ff9900; padding: 20px;">
<h4 style="text-transform: uppercase; padding: 0; margin:0;">Reproduction rights are granted through the Paul Rand estate only.</h4>
<p style="padding: 0; margin: 0;">Contact the <a href="http://www.library.yale.edu/mssa/" target="_blank">Yale Archives</a> with a detailed description of your planned usage and they will process your request.</p>
</div>

<div id="MessageDiv"> 
<label>
Message <em>(required)</em>
<br style="clear:both">
<span><textarea cols="24" rows="12" name="message" id="Message"  class="formMediumText"></textarea><script type="text/javascript">var Message = new LiveValidation('Message');Name.add(Validate.Presence);</script>
</span>
</label> 
</div>
...