Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Combine Two Functions For a OnClick Event

    I am try to make a form that appears to be multi page. I am trying to use a button to hide one div and display another at the same time my script is

    head
    Code:
    <script language=javascript type='text/javascript'> 
    function hidediv(pass) { 
    var divs = document.getElementsByTagName('div'); 
    for(i=0;i<divs.length;i++){ 
    if(divs[i].id.match(pass)){//if they are 'see' divs 
    if (document.getElementById) // DOM3 = IE5, NS6 
    divs[i].style.visibility="hidden";// show/hide 
    else 
    if (document.layers) // Netscape 4 
    document.layers[divs[i]].display = 'hidden'; 
    else // IE 4 
    document.all.hideShow.divs[i].visibility = 'hidden'; 
    } 
    } 
    }
    
    function showdiv(pass) { 
    var divs = document.getElementsByTagName('div'); 
    for(i=0;i<divs.length;i++){ 
    if(divs[i].id.match(pass)){ 
    if (document.getElementById) 
    divs[i].style.visibility="visible"; 
    else 
    if (document.layers) // Netscape 4 
    document.layers[divs[i]].display = 'visible'; 
    else // IE 4 
    document.all.hideShow.divs[i].visibility = 'visible'; 
    } 
    } 
    } 
    </script>
    body
    Code:
    <form name="PublicOrderPage" action="save_client_information.php"  onsubmit="return validateForm()" method="post">
    
    
    <div id="div1" style="width:600px; height: auto;background: yellow;">
    <table width="600" border="0">
    <tr>
    <legend><h3 style="padding-left:172.5px;">Required Client Information</h3></legend>
    </tr>
       <tr>
        <td style="padding-left:25px;"><b>Name:</b></td>
        <td><input type="text" name="client_name" id="client_name" value="<?php echo $_POST['client_name']; ?>" /></td>
    	<td style="padding-left:25px;"><b>Home Phone:</b></td>
        <td><input type="text" name="client_home_phone" id="client_home_phone" value="<?php echo $_POST['client_home_phone']; ?>" /></td>
      </tr>
      </table>
      <br/>
     <table width="270" border="0"> 
    	<tr>
    		<td style="padding-left: 180px;"><b>Email:</b></td>
    		<td><input type="text" name="client_email" id="client_email" value="<?php echo $_POST['client_email']; ?>" /></td>
    	</tr>
    </table>
    <br/>
    <table>
    	<tr>
    		<td style="padding-left:280px;"><input name="save_client_info" type="button" value="Next" onclick="hidediv('1');shwodiv('2');" >  </td>
    	</tr>
    </table>
    </div>
    
    
    
    
    <div id="div2" style="width:600px; height: auto;background: yellow; ">
    <table width="600" border="0">
    <tr>
    <legend><h3 style="padding-left:172.5px;">Required Site Information</h3></legend>
    </tr>
       <tr>
        <td style="padding-left:25px;"><b>Site Street:</b></td>
        <td><input type="text" name="site_street" id="site_street" value="<?php echo $_POST['site_street']; ?>" /></td>
    	<td style="padding-left:25px;"><b>Site City:</b></td>
        <td><input type="text" name="site_city" id="site_city" value="<?php echo $_POST['site_city']; ?>" /></td>
      </tr>
      </table>
      <br/>
      
      <legend><h3>Inspection Type</h3></legend>
     <table width="270" border="0"> 
    	 <table width="602" border="0">
        <tr>
          <td width="252"><input type="checkbox" name="cb_full_home" id="cb_full_home" <?php if ($_POST['cb_full_home']) echo 'checked="checked"'; ?> />
            Full Home</td>
          <td width="150"><input type="checkbox" name="cb_4_point" id="cb_4_point" <?php if ($_POST['cb_4_point']) echo 'checked="checked"'; ?> />
            4 Point</td>
        </tr>
        <tr>
          <td ><input type="checkbox" name="cb_condominium" id="cb_condominium" <?php if ($_POST['cb_condominium']) echo 'checked="checked"'; ?> />
            Condominium</td>
          <td ><input type="checkbox" name="cb_wind_mit" id="cb_wind_mit" <?php if ($_POST['cb_wind_mit']) echo 'checked="checked"'; ?> />
            Wind Mit</td>
        </tr>
        <tr>
          <td ><input type="checkbox" name="cb_roof_cert" id="cb_roof_cert" <?php if ($_POST['cb_roof_cert']) echo 'checked="checked"'; ?> />
            Roof Cert</td>
          <td ><input type="checkbox" name="cb_drywall" id="cb_drywall" <?php if ($_POST['cb_drywall']) echo 'checked="checked"'; ?> />
            Drywall</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="cb_reinspect" id="cb_reinspect" <?php if ($_POST['cb_reinspect']) echo 'checked="checked"'; ?> />
            Re-Inspect</td>
          <td><input type="checkbox" name="cb_followup" id="cb_followup" <?php if ($_POST['cb_followup']) echo 'checked="checked"'; ?> />
            Follow-Up</td>
    
    </table>
    <img src="CaptchaSecurityImages.php" />
    Security Code: 
    <input id="security_code" name="security_code" type="text" />
    <br />
    <input name="save_client_info" type="submit" value="Save" />
    </div>
    </form>
    When the next button is used I would Like to Hide Div1 And Display Div2 so that it looks as if it is a new page.

    Any help would be greatly appreciated.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    here's the cheap and nasty way to do it... I don't know if it will work for you - I'm not sure what your "pass" variable does

    Code:
    var a=1;
    function handleDiv() {
    if (a==1) {
    alert("showing some stuff, hiding other stuff")
    a=2;
    return;	} 
    if (a==2) {
    alert("hiding some stuff, showing other stuff");
    a=1;
    	}
    }
    
    <input type="button" value="Next" onclick="handleDiv()">

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    xelawho Thanks for the post. I tried the to implement the code, but it has no affect on the page.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Why not do something like this:
    Code:
    var current=1;
    function increment_div() {
    	if(document.getElementById("div"+current) && document.getElementById("div"+(current+1))){
    		//hide the current div
    		document.getElementById("div"+current).style.display="none";
    		//show the next div
    		document.getElementById("div"+(current+1)).style.display="block";
    	}
    	else{
    		alert("Unable to locate necessary div element(s)...");
    	}
    }
    You don't need to support Netscape 4, IE4 or other basically unused browsers anymore so you can skip a lot of that code you had and just put the incrementation into a single function.

    Your "next" button would be set up like so:
    Code:
    <input name="save_client_info" type="button" value="Next" onclick="increment_div();" />
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    justinccagle (09-14-2011)

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much Rowsdower! that is exactly what I was looking for.

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    How can I take this and add new div's I would like to use this for four seperate tables?

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Solved it thanks again to every one for the fast replies.


  •  

    Posting Permissions

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