SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Linked dropdowns

    hi,

    i have one list/menu in my form..i put values like

    1.Employed
    2.A business owner
    3.Looking for work
    4.Working independently
    5.A student

    if i select a 1.Employed
    2.A business owner
    3.Looking for work
    4.Working independently, value its only display these text box

    country,postalcode,jobtitle,company..

    but if u select 5.A student then it display
    education,dates attended,fields of interests.
    so these values hidden when click
    1.Employed
    2.A business owner
    3.Looking for work
    4.Working independentl..

    Reference:linkedin:https://www.linkedin.com/reg/basic-p...=p4rdx-16k61ld

    how can i work out tat..anyone solve this problem..

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Here's how you should do it.

    1. Use scripting to attach a function to an onchange event for the select field.
    2. In that function, find out which select field is currently selected
    3. hide all of the optional parts of the form
    4. based on the selected field, show the parts that should be shown

    Do you have any ability to try scripting that yourself, or do you require someone to do all of the scripting for you?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a way to do it. I have used tables to display your input boxes to keep it all aligned. You will need to extract the information from the text boxes within the form when they are completed by the applicant.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Form selection</title>
    <script type="text/javascript">
    <!--
    var currentBlockRef=null, currentElemObj=null;   // global
    //
     function getSelect(selectObj)
      { var indx=selectObj.selectedIndex;
       // check for invalid selection
        if(indx==0)
         { // hide any visible box 
           currentElemObj.style.display="none";
           currentElemObj=null;
           currentBlockRef=null;
           return; 
         }
       // -------
       // check if block ref saved 
        if(currentBlockRef)
         { // hide any visible block
           currentElemObj.style.display="none";
          } // get next ref   
           currentBlockRef=(indx<5)? "block1" : "block2";    
           currentElemObj=document.getElementById(currentBlockRef);
           currentElemObj.style.display="block";
       } 
    // -------------   
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; }
    table td { height:40px; padding:3px; border-bottom:1px solid #888; }
    #wrapper { position:absolute; top:20px; left:50px; text-align:left;  }
    #selectBox  { position:absolute; top:0px; left:0px; text-align:left;  } 
    #block1  { display:none; position:absolute; top:50px; left:0px; text-align:left;  } 
    #block2  { display:none; position:absolute; top:50px; left:0px; text-align:left;  } 
    -->
    </style>
    </head>
     
    <body>
     
    <form name="myForm">
      <div id="wrapper">
        <div id="selectBox">
          <select name="mySelect" onchange="getSelect(this)">
          <option>Select a description that best describes you ..</option>
          <option>Employed</option>
          <option>A business owner</option>
          <option>Looking for work</option>
          <option>Working independently</option>
          <option>A student</option>
          </select>
        </div>
        <!-- end selectBox -->
        <div id="block1">
          <table cellspacing="0" style="border-collapse: collapse" width="300">
            <tr>
              <td>Country:</td>
              <td><input type="text" name="country" value size="20"></td>
            </tr>
            <tr>
              <td>Post Code:</td>
              <td><input type="text" name="pCode" value size="20"></td>
            </tr>
            <tr>
              <td>Job Title:</td>
              <td><input type="text" name="jTitle" value size="20"></td>
            </tr>
            <tr>
              <td>Company Name:</td>
              <td><input type="text" name="companyName" value size="20"></td>
            </tr>
          </table>
        </div>
        <!-- end block1 -->
        <div id="block2">
          <table cellspacing="0" style="border-collapse: collapse" width="300">
            <tr>
              <td>Education:</td>
              <td><input type="text" name="educ" value size="20"></td>
            </tr>
            <tr>
              <td>Dates attended:</td>
              <td><input type="text" name="datesAttend" value size="20"></td>
            </tr>
            <tr>
              <td>Fields of interest:</td>
              <td><input type="text" name="fieldsInterest" value size="20"></td>
            </tr>
          </table>
        </div>
        <!-- end block2 -->
      </div>
      <!-- end wrapper -->
    </form>
    <!-- end myForm -->
     
    </body>
     
    </html>


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
  •