Results 1 to 3 of 3

Thread: Make a text form field required based on selection chosen in drop down field

  1. #1
    Join Date
    Dec 2010
    Location
    Wisconsin
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Make a text form field required based on selection chosen in drop down field

    I am creating a *simple* contact form where I'd like my clients to choose either "Phone" or "Email" as their preferred contact method. I'd like either the Phone or Email field be required depending on which option they chose. I'm VERY new to Javascript, but this seems to be the way to go based on what I've read. I have my form completed, but not sure how to do the scripting.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    We'll need to see the page in order to help with the specific problem.

    Javascript isn't reliable because it can be turned off, unavailable, or just tricked by a user who chooses to do so. If this isn't a crucial function but just a reminder that's probably fine though.

    What you can do is use a basic if statement based on the selection and go from there.

    Alternatively, you could just check that at least one of them is filled.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Dec 2010
    Location
    Wisconsin
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is my form code:

    <form name="Contact Form" id="wstForm_Contact" style="border: #546030 3px solid;"
    action="%wstx.formmailerurl:xxxxxxxxxxxxxxxxxxx%" method="post" labelid="formLabel_ContactForm">
    <table width="95%" style="padding-bottom: 5px; padding-left: 5px; padding-right: 5px; color: #000000; margin-left: 15px; padding-top: 5px;">
    <tbody>
    <tr>
    <td style="text-align: left; width: 25%; font-size: 11pt;"><span id="formLabel_First" controlid="formElement_First">First Name:<span style="color: red;">*</span></span></td>
    <td style="text-align: left; font-size: 11pt;"><input name="FirstName" id="formElement_First" type="text" labelid="formLabel_First" AUTOCOMPLETE="OFF" /></td>
    </tr>
    <tr>
    <td style="text-align: left; font-size: 11pt;"><span id="formLabel_Last" controlid="formElement_Last">Last Name:<span style="color: red;">*</span></span></td>
    <td style="text-align: left; font-size: 11pt;"><input name="LastName" id="formElement_Last" type="text" labelid="formLabel_Last" AUTOCOMPLETE="OFF" /></td>
    </tr>
    <tr>
    <td style="text-align: left; font-size: 11pt;"><span id="formLabel_Street1" controlid="formElement_Street1">Address Street:</span></td>
    <td style="text-align: left; font-size: 11pt;"><input name="Address Street 1" id="formElement_Street1" type="text" size="30" labelid="formLabel_Street1" AUTOCOMPLETE="OFF" /></td>
    </tr>
    <tr>
    <td style="text-align: left; font-size: 11pt;"><span id="formLabel_City" controlid="formElement_City">City:</span></td>
    <td style="text-align: left; font-size: 11pt;"><input name="City" id="formElement_City" type="text" labelid="formLabel_City" AUTOCOMPLETE="OFF" /></td>
    </tr>
    <tr>
    <td style="text-align: left; font-size: 11pt;"><span id="formLabel_Zip" controlid="formElement_Zip">Zip Code:</span></td>
    <td style="text-align: left; font-size: 11pt;"><input name="Zip Code" id="formElement_Zip" type="text" size="5" maxlength="5" labelid="formLabel_Zip" AUTOCOMPLETE="OFF" />(5 digits)</td>
    </tr>
    <tr>
    <td style="text-align: left; font-size: 11pt;"><span id="formLabel_PreferredContactMethod" controlid="formElement_PreferredContactMethod">Preferred Contact:</span></td>
    <td style="text-align: left; font-size: 11pt;"><select name="Preferred Contact Method" id="formElement_PreferredContactMethod" labelid="formLabel_PreferredContactMethod" type="text">
    <option selected="selected" value="Phone">Phone</option>
    <option value="E-mail">E-mail</option>
    </select> </td>
    </tr>
    <tr>
    <td style="text-align: left; font-size: 11pt;"><span id="formLabel_DaytimePhone" controlid="formElement_DaytimePhone">Daytime Phone:</span></td>
    <td style="text-align: left; font-size: 11pt;"><input name="Daytime Phone" id="formElement_DaytimePhone" type="text" labelid="formLabel_DaytimePhone" AUTOCOMPLETE="OFF" /></td>
    </tr>
    <tr>
    <td style="text-align: left; font-size: 11pt;"><span id="formLabel_EveningPhone" controlid="formElement_EveningPhone">Evening Phone:<span style="color: red;">*</span></span></td>
    <td style="text-align: left; font-size: 11pt;"><input name="Evening Phone" id="formElement_EveningPhone" type="text" labelid="formLabel_EveningPhone" AUTOCOMPLETE="OFF" /></td>
    </tr>
    <tr>
    <td style="text-align: left; font-size: 11pt;"><span id="formLabel_Email" controlid="formElement_Email">Email:<span style="color: red;">*</span></span></td>
    <td style="text-align: left; font-size: 11pt;"><input name="Email" id="formElement_Email" type="text" labelid="formLabel_Email" AUTOCOMPLETE="OFF" /></td>
    </tr>
    <tr>
    <td style="text-align: left; font-size: 11pt;"><span id="formLabel_Comments" controlid="formElement_Comments">Comments:</span></td>
    <td style="text-align: left; font-size: 11pt;"><textarea name="Comments" id="formElement_Comments" style="width: 100%;" rows="4" cols="38" labelid="formLabel_Comments">Please provide a brief description of your landscaping project here.</textarea></td>
    </tr>
    <tr>
    <td>
    <p><input id="wstForm_Contact_Submit" onclick="return wstxSubmitForm(this);" type="submit" value="Submit" /> <input id="wstForm_Contact_Reset" type="reset" value="Reset" /></p>
    </td>
    </tr>
    </tbody>
    </table>
    <input name="FormMailerSubject" id="FormMailerSubject" type="hidden" value="Contact Form." /><input name="FormMailerRedirect" id="FormMailerRedirect" type="hidden" value="%wstx.project.BaseUrl%" />
    <p> </p>
    </form>
    Last edited by gloriabeatrice; 12-18-2010 at 05:31 PM. Reason: private information hidden

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •