2011-01-31 3 views
2

フォームのドロップダウン選択に基づいて2つの要素の可視性を交換しようとしています。フォームのフィールドの可視性を交換する必要があります

最初の6つの項目のいずれかを選択すると、「メッセージ」領域が残ります。

ユーザ選択が最後の項目「複製権」の場合、「メッセージ」が消え、「権利メッセージ」divにスワップされます。

私はそれがメッセージボックスではなく、表示/非表示のrepro権利で動作している。私は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="[email protected]" 
        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

*私はjava *に新しいです。いいえ、* JavaScript *の新機能です。 Javaはまったく異なる言語です。 –

+0

現在の作業サンプルでコードを更新しました。任意のクリーナー、より適切な方法?ありがとう! –

+0

jQueryを試してみてください。http://jquery.com/ –

答えて

2

開始のために、それはあなたがそれをここに投稿する前に必要なビットのみを含むようにあなたのコードをきれいにする良いマナーです。関連するビットを検索してすべてを調べるのは難しいです。

これは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と一緒に行こうとしました。これについて2つの点に気づくべきである。 hide()関数をonchangeイベントハンドラに呼び出す必要はありません。display関数はスイッチであり、すべての作業を行います。また、メッセージボックスとメッセージボックスに付随するテキストの両方を隠すことができるように、MessageDivのIDを持つ折り返しdivを追加しました。テキストが非表示になっていないと思われる場合は、必ず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> 
+0

ありがとう、Matti。とても有難い。私は今からすべての不必要なビットをきれいにするでしょう。スワップの考え方はまさに私が起こる必要があるものです。私はあなたのコードを使用しようとしましたが、残念ながらそれは動作していないようです。何かご意見は?私はChrome 8を使用していますが、違いがあるかどうかはわかりません。ありがとう! 〜D –

+0

@Danny:ええ、ええ - 明らかに、「複製権」ボックスが表示されるべき行に 'id1'をぶら下げたままにしておくのは賢明でした。上記のコードを更新しました。 –

+0

ああ、完璧!ありがとうございました!さて、私は今、特定のIDを定義する方法を知っています。今、完全に理解します。 –

関連する問題