SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide Submit on Dropdown

    Hello,
    I am new to coding and have been asked to modify some code. We have a form that hides the submit button until a drop down menu is selected, it also brings in other options depending on the menu item selected. The problem is that when they select Choose an option after selecting a true option the submit button is still there. I want the submit button to be hidden again if they go back to Choose an option, any help would be greatly appreciated.

    Thanks

    Here is the code

    Code:
      <script type="text/javascript">
    function showForm(id) {
    document.getElementById('submitForm').style.display = "block";
    for (var i=1;i<4;i++) {
    if(i==id) {
    document.getElementById(i).style.display = 'block';
    } else { document.getElementById(i).style.display ='none';
    }
    }
    }
    function validateForm(theForm) {
    if (theForm.readInstructions.checked == false) {
    alert ('Please check the I have read the instructions carefully checkbox');
    return false;
    } else { return true;
    }
    }
      </script>
    Code:
          <form action="emailRequest.asp" method="post"
     onsubmit="return validateForm(this)">
            <h1> Drop/Add/Level Change FORM </h1>
            <div id="0" style="display: block;">
            <p> Last Name: <input name="lastName"
     type="text"> <br>
    First Name: <input name="firstName" type="text"> <br>
    Phone Number: <input name="phoneNumber" type="text">
            <br>
    Email: <input name="email" type="text"> <br>
            </p>
            </div>
            <p><b> I wish to: </b></p>
            <select id="dropdownMenu" name="dropdownMenu"
     onchange="javascript: showForm(document.getElementById('dropdownMenu').value);">
            <option value="0"> Choose an option </option>
            <option value="1">Add</option>
            <option value="2">Drop</option>
            <option value="3">Level Change</option>
            </select>
            <div id="3" style="display: none;">
            <h2> You selected Level Change </h2>
            <p> Class for which level change requested: <input
     name="class" size="10" type="text"><br>
    Current Skill Level: <input name="currentLevel" size="4"
     type="text"> <br>
    Requested Skill Level: <input name="requestedLevel" size="4"
     type="text">)<br>
            </p>
            </div>
            <div id="1" style="display: none;">
            <h2> You selected Add Course </h2>
            <p> Class to Add: <input name="classAdd"
     size="10" type="text"><br>
    Reason: <br>
            <textarea name="reasonAdd" rows="3" cols="40"></textarea>
            <br>
            </p>
            </div>
            <div id="2" style="display: none;">
            <h2> You selected Drop Course </h2>
            <p> Class to Drop: <input name="classDrop"
     size="10" type="text"><br>
    Reason: <br>
            <textarea name="reasonDrop" rows="3" cols="40"></textarea>
            <br>
            </p>
            </div>
            <div id="submitForm" style="display: none;">
            <p> <input name="readInstructions"
     type="checkbox"> I have read the instructions carefully <br>
            <input value="Submit" type="submit"> </p>
            </div>
          </form>

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,071
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    http://jsfiddle.net/cpradio/YvN4Q/

    I added the following:
    Code:
        if (id == 0) {
            document.getElementById('submitForm').style.display = "none";
        }

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you that worked great!


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
  •