SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question show/toggle using select box

    hi i have some which is not working fine with me:, what i am trying to achieve is to show/toggle the elements when i click one or the other thing from the select menu

    here is my code below:

    HTML Code:
    <SELECT NAME="ptype" ONCHANGE="display(this,'Contract','Direct hire');">
          <CFIF Form.ptype EQ "Contract"> <OPTION NAME="Contract" SELECTED>Contract</OPTION></CFIF>
          <CFIF Form.ptype NEQ "Contract"> <OPTION NAME="Contract">Contract</OPTION></CFIF>
          <CFIF Form.ptype EQ "Direct hire"> <OPTION NAME="Direct hire" SELECTED>Direct Hire</OPTION></CFIF>
          <CFIF Form.ptype NEQ "Direct hire"> <OPTION NAME="Direct hire">Direct Hire</OPTION></CFIF>
          </SELECT>
        </TD>
      </TR>
      <div  id="Contract" style="display: none;">
      <CFIF Form.ptype EQ "Contract">
        <TR>
          <TD BGCOLOR="##99cc99" COLSPAN=3><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>NUMBER OF CONTRACTORS</B></FONT></TD>
        </TR>
        <TR>
          <TD WIDTH=30>&nbsp;</TD>
          <TD COLSPAN=2><cfINPUT TYPE=text NAME="c_numcontractors" VALUE="hidden" required="yes" message="Please fill No of Contractors for it."></TD>
        </TR>
    
        
      </CFIF>
    	</div>
    	<div id="Direct hire" style="display: none;">
      <CFIF ptype EQ "Direct hire">
        <TR id="Direct hire" style="display:none;">
          <TD BGCOLOR="##99cc99" COLSPAN=3><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>TARGET COMPENSATION</B></FONT></TD>
        </TR>
        <TR>
          <TD WIDTH=30>&nbsp;</TD>
          <TD COLSPAN=2><cfINPUT TYPE=text NAME="h_compensation" VALUE="#Form.h_compensation#" size=25 required="yes" message="Target Compensation field required"></TD>
        </TR>
    	
      </CFIF></div>
    the javascript code for this:

    HTML Code:
    <script>
    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>
    can anyone guide me in this:

  2. #2
    SitePoint Guru
    Join Date
    Jan 2005
    Location
    heaven
    Posts
    953
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can't through a div tag around a table row like that. What item isn't showing?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what i am trying to do is show is:
    hould show
    if i choose contract the following fields show without refreshing the page:

    NUMBER OF CONTRACTORS

    and if i choose the Direct hire, the following fields should show up,

    TARGET COMPENSATION

    i can do it with some tag below, but through that the pge refreshes and all form values are reset and i hav e to fill it up again...

    is there some other way to do it...

    i am using the method like this but it refresh the page,

    ONCHANGE="document.editjobform.submit()

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You'll be wanting to use Ajax to help you out there then.

    http://15daysofjquery.com/quick-and-dirty-ajax/14/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i cannot used ajax as hosting does not support them, is there any alternative to this thing

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont see how your server doesnt support AJAX. Your browser runs the javascript client side and i can't imagine your server doesn't support PHP or ASP Do you know what AJAX is?

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i changed my code a little bit and i think i am skipping somewhere, here i am posting the revise javascript of all the tag i am using:

    HTML Code:
    <SELECT NAME="ptype" onchange="toggleSubmit(this);">
          <option value="Contract">Contract</option>
          <option value="Direct_hire">Direct Hire</option>
    </select>
    now the javascript i am using:

    HTML Code:
    <script language=javascript type='text/javascript'>
    function toggleSubmit(sel)
    {
    var area = document.getElementById('contract');
    if ( sel.options[sel.selectedIndex].value == "Contract" ) 
    {
    Contract.style.display = "block";
    } 
    else 
    {
    Direct_hire.style.display = "block";
    }
    
    } </script>
    now te which which gets egffected..

    HTML Code:
    <tr id="Contract" style="display: none;">
    <td>
      <CFIF Form.ptype EQ "Contract">
        <TR>
          <TD BGCOLOR="##99cc99" COLSPAN=3><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>NUMBER OF CONTRACTORS</B></FONT></TD>
        </TR>
        <TR>
          <TD WIDTH=30>&nbsp;</TD>
          <TD COLSPAN=2><cfINPUT TYPE=text NAME="c_numcontractors" VALUE="hidden" required="yes" message="Please fill No of Contractors for it."></TD>
        </TR>
     </CFIF>
    </td></tr> 
    <tr id="Direct_hire" style="display: none;">
    <td>
      <CFIF ptype EQ "Direct hire">
        <TR id="Direct hire" style="display:none;">
          <TD BGCOLOR="##99cc99" COLSPAN=3><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>TARGET COMPENSATION</B></FONT></TD>
        </TR>
        <TR>
          <TD WIDTH=30>&nbsp;</TD>
          <TD COLSPAN=2><cfINPUT TYPE=text NAME="h_compensation" VALUE="#Form.h_compensation#" size=25 required="yes" message="Target Compensation field required"></TD>
        </TR>
    	
      </CFIF></td></tr>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    *hands up* sorry man, nobody seems to want to help with table layouts anymore.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •