required data only if 1of2 radio buttons is chosen

Discussion in 'JavaScript' started by Anja, May 20, 2009.

  1. #1
    Hi,

    I am working on a web form. In this form the user has to give a home address ("Hauptwohnung-...").

    Then the user has to decide whether he wants documents sent to an additional address ("Zusenden-..."). For this I have created radio buttons saying "yes" (= there is an additional address; "ja" in German) or "no" (=no additional address; "nein" in German).

    When the user clicks "ja" I want him only to be able to submit the form if he also gave the additional address.

    Can anybody please help me on this? I have a basic idea of understanding JS but cannot write it myself...
    Your help is very much appreciated!

    Anja

    =================

    The code is as follows:

    <form action="FormToEmail.php" method="post">
    <!-- address 1 -->
    <tr>
    <td colspan="2"><p>&nbsp;</p><p class="contentbold">Wohnanschrift der Hauptwohnung</p></td>
    </tr>
    <tr>
    <td>Stra&szlig;e:</td>
    <td><span id="sprytextfield5">
    <input type="text" name="Hauptwohnung_Strasse" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Stra&szlig;e Ihrer Hauptwohnung an!</span></span></td>
    </tr>
    <tr>
    <td>Hausnummer/ Buchstabe:</td>
    <td><span id="sprytextfield6">
    <input type="text" name="Hauptwohnung_Hausnummer" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Hausnummer Ihrer Hauptwohnung an!</span></span></td>
    </tr>
    <tr>
    <td>Postleitzahl:</td>
    <td><span id="sprytextfield7">
    <input type="text" name="Hauptwohnung_PLZ" size="5" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Postleitzahl Ihrer Hauptwohnung an!</span><span class="textfieldInvalidFormatMsg">Ung&uuml;ltiges Format.</span></span></td>
    </tr>
    <tr>
    <td>Ort:</td>
    <td><span id="sprytextfield8">
    <input type="text" name="Hauptwohnung_Ort" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie den Ort Ihrer Hauptwohnung an!</span></span></td>
    </tr>

    <!-- is there an additional address? -->
    <tr>
    <td colspan="2"><p>Die Zusendeanschrift ist identisch mit der Hauptwohnung</p>
    <input name="Zusendeanschrift=Hauptwohnung" type="radio" value="ja" checked /> ja
    <input name="Zusendeanschrift=Hauptwohnung" type="radio" value="nein" /> nein
    <p>Falls nicht, bitte Zusendeanschrift angeben: </p>
    </td>
    </tr>

    <!-- address2 which should be required if user specified "ja" (yes) -->
    <tr>
    <td colspan="2"><p>&nbsp;</p><p class="contentbold">Zusendeanschrift</p></td>
    </tr>

    <tr>
    <td>Stra&szlig;e:</td>
    <td><span id="sprytextfield11">
    <input type="text" name="Zusenden_Strasse" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Stra&szlig;e der Adresse an, an die die Unterlagen zugesendet werden sollen!</span></span></td>
    </tr>
    <tr>
    <td>Hausnummer/ Buchstabe:</td>
    <td><span id="sprytextfield12">
    <input type="text" name="Zusenden_Hausnummer" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Hausnummer der Adresse an, an die die Unterlagen zugesendet werden sollen!</span></span></td>
    </tr>
    <tr>
    <td>Postleitzahl:</td>
    <td>
    <input type="text" name="Zusenden_PLZ" size="24" />
    </td>
    </tr>
    <tr>
    <td>Ort:</td>
    <td><input type="text" name="Zusenden_Ort" size="24" /></td>
    </tr>

    <tr>
    <td colspan="2" align="center" style="padding:20px;">
    <input type="SUBMIT" value="Bitte senden Sie mir Briefwahlunterlagen zu" style="padding: 8px; width:300px; background-color:#44577f; color: #fff;" /> </td>
    </tr>
    <tr><td colspan="2"><img src="../img/link.gif" alt="link" /> <a href="../index.htm">zur&uuml;ck zur Startseite</a></td></tr>
    </table>
    </form>
     
    Anja, May 20, 2009 IP
  2. JavaScriptBank.com

    JavaScriptBank.com Peon

    Messages:
    141
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    JavaScriptBank.com, May 20, 2009 IP
  3. samster7

    samster7 Banned

    Messages:
    170
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi here is the complete code with js function just put the chk for fields tht u want to be get filled if selected option is "ja", i have done it for one field

    <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="javascript">
    function validatefn()
    {
    for (var i=0; i < document.form1.ZusendeanschriftHauptwohnung.length; i++)
    {
    if (document.form1.ZusendeanschriftHauptwohnung.checked)
    {
    if(document.form1.ZusendeanschriftHauptwohnung.value == "ja")
    {
    if(document.form1.Zusenden_Strasse.value == "")
    {
    alert("Please provide additional address")
    return false;
    }
    else
    {
    return true;
    }
    }
    else
    {
    return true;
    }
    }
    }
    }
    </script>
    </head>

    <body><form action="FormToEmail.php" method="post" onsubmit="return validatefn()" name="form1">
    <!-- address 1 -->
    <tr>
    <td colspan="2"><p>&nbsp;</p><p class="contentbold">Wohnanschrift der Hauptwohnung</p></td>
    </tr>
    <tr>
    <td>Stra&szlig;e:</td>
    <td><span id="sprytextfield5">
    <input type="text" name="Hauptwohnung_Strasse" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Stra&szlig;e Ihrer Hauptwohnung an!</span></span></td>
    </tr>
    <tr>
    <td>Hausnummer/ Buchstabe:</td>
    <td><span id="sprytextfield6">
    <input type="text" name="Hauptwohnung_Hausnummer" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Hausnummer Ihrer Hauptwohnung an!</span></span></td>
    </tr>
    <tr>
    <td>Postleitzahl:</td>
    <td><span id="sprytextfield7">
    <input type="text" name="Hauptwohnung_PLZ" size="5" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Postleitzahl Ihrer Hauptwohnung an!</span><span class="textfieldInvalidFormatMsg">Ung&uuml;ltiges Format.</span></span></td>
    </tr>
    <tr>
    <td>Ort:</td>
    <td><span id="sprytextfield8">
    <input type="text" name="Hauptwohnung_Ort" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie den Ort Ihrer Hauptwohnung an!</span></span></td>
    </tr>

    <!-- is there an additional address? -->
    <tr>
    <td colspan="2"><p>Die Zusendeanschrift ist identisch mit der Hauptwohnung</p>
    <input name="ZusendeanschriftHauptwohnung" type="radio" value="ja" checked /> ja
    <input name="ZusendeanschriftHauptwohnung" type="radio" value="nein" /> nein
    <p>Falls nicht, bitte Zusendeanschrift angeben: </p>
    </td>
    </tr>

    <!-- address2 which should be required if user specified "ja" (yes) -->
    <tr>
    <td colspan="2"><p>&nbsp;</p><p class="contentbold">Zusendeanschrift</p></td>
    </tr>

    <tr>
    <td>Stra&szlig;e:</td>
    <td><span id="sprytextfield11">
    <input type="text" name="Zusenden_Strasse" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Stra&szlig;e der Adresse an, an die die Unterlagen zugesendet werden sollen!</span></span></td>
    </tr>
    <tr>
    <td>Hausnummer/ Buchstabe:</td>
    <td><span id="sprytextfield12">
    <input type="text" name="Zusenden_Hausnummer" size="24" />
    <span class="textfieldRequiredMsg">Bitte geben Sie die Hausnummer der Adresse an, an die die Unterlagen zugesendet werden sollen!</span></span></td>
    </tr>
    <tr>
    <td>Postleitzahl:</td>
    <td>
    <input type="text" name="Zusenden_PLZ" size="24" />
    </td>
    </tr>
    <tr>
    <td>Ort:</td>
    <td><input type="text" name="Zusenden_Ort" size="24" /></td>
    </tr>

    <tr>
    <td colspan="2" align="center" style="padding:20px;">
    <input type="SUBMIT" value="Bitte senden Sie mir Briefwahlunterlagen zu" style="padding: 8px; width:300px; background-color:#44577f; color: #fff;" /> </td>
    </tr>
    <tr><td colspan="2"><img src="../img/link.gif" alt="link" /> <a href="../index.htm">zur&uuml;ck zur Startseite</a></td></tr>
    </table>
    </form>
    </body>
    </html>
     
    samster7, May 21, 2009 IP
    frank.net and seokingdom07 like this.
  4. Anja

    Anja Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    Thanks so much! It works perfectly!

    Anja
     
    Anja, May 21, 2009 IP