Wrox Programmer Forums
Go Back   Wrox Programmer Forums > PHP/MySQL > PHP How-To
|
PHP How-To Post your "How do I do this with PHP?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the PHP How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old December 18th, 2003, 05:26 PM
Registered User
 
Join Date: Dec 2003
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default Form changes with radio button selection

Trying to find a script that allow a form to change based on which radio button is selected. A good example would be expedia.com--When you what to search for a trip you select hotel only, hotel & air, hotel, air & car, etc. and based on which one you select the appropriate form fields change without the page reloading for that specific search. I tried viewing the source on expedia, but they use an external javascript file.

Can anyone help me !!!!!!!!!!!!!!

 
Old December 18th, 2003, 05:48 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 836
Thanks: 0
Thanked 0 Times in 0 Posts
Default

This must be done with a client-side language like javascript. If you want to know how expedia does it, just look at their javascript file. The filename (and path, if any) are found in the src attribute of the <script> tag that loads the javascript file.

for example:
  http://www.expedia.com/calendar.js


Take care,

Nik
http://www.bigaction.org/
 
Old December 18th, 2003, 10:27 PM
Registered User
 
Join Date: Dec 2003
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks Nik--I did that and there is pretty complex and not very easy to adjust for my needs. I was hoping someone had something more basic that I can easily add too. Cutting down is always a pain to me.

Rob :)

 
Old December 19th, 2003, 01:34 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 836
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Okay, well here's the gist of ONE way to do it, using stylesheets and <div> elements.

Create a style called "Invisible"

.Invisible
{
    visibility: hidden;
}

.Visible
{
    visibility: visible;
}


Put each of your HTML bodies into their own <div> element. Give each <div> it's own unique ID. Set the class attribute of each <div> to be "Invisible" to begin with.

each of your radio buttons will have a value. Give each radio button an onClick() that sets it's corresponding <div> to visible, and the others to "invisible".

<script language="JavaScript">
<!--
var activeDiv = '';

function make_visible(targetDiv)
{
    var previous;
    if (activeDiv != '')
    {
        previous = document.getElementById(activeDiv);
        if (activeDiv != targetDiv)
        {
            previous.className = "Invisible";
        }
    }
    var newActive = document.getElementById(targetDiv);
    newActive.className = "Visible";
    activeDiv = targetDiv;
}


<input type="radio" name="my_radio" value="div_1" onClick="javascript:make_visible('div_1')"/>Div 1
<input type="radio" name="my_radio" value="div_2" onClick="javascript:make_visible('div_2')"/>Div 2
<input type="radio" name="my_radio" value="div_3" onClick="javascript:make_visible('div_3')"/>Div 3


<div class="Invisible" id="div_1">bla bla bla bla</div>
<div class="Invisible" id="div_2">ooga booga booga</div>
<div class="Invisible" id="div_3">foo bar baz quux</div>


Hope this gives you enough pieces to fit together.


Take care,

Nik
http://www.bigaction.org/
 
Old December 19th, 2003, 02:20 PM
Registered User
 
Join Date: Dec 2003
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Nic,

Your the bomb!!!! Thanks.

Rob

 
Old December 19th, 2003, 02:35 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

The visibility attribute works, however if you work with it much you'll notice that it leaves a huge space where that element is supposed to be, unless its absolutely positioned. I've had better luck using the display property.

// Hide an element (collapsed)
display: none;

// Display an element as a block level element.
display: block;

.. display has some other attributes but for this application these are the only ones you would need.

Visibility also has a 'collapse' attribute, that works like display: none but that only works on the Gecko browsers.

: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
 
Old December 19th, 2003, 03:03 PM
Registered User
 
Join Date: Dec 2003
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Rich,

let me see if I understand, what your saying is if I am using it on a page that tiles out to full browser size, using the display porperty would be better for positioning reasons???

Rob :-)

 
Old December 19th, 2003, 03:42 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Well the display property is simular to the visibility property. What I'm saying is if you have several forms in succession. If I understand what you're doing properly...

<div id='form1' class='Invisible'>
//form1 code
</div>
<div id='form2' class='Invisible'>
//form2 code
</div>

...etc.

With the visibility property you'll see a space equal to where form1 and form2 are supposed to appear while invisible, it hides the rendered elements but holds a space open on the page where those elements are.. so when your event handler for say form2 fires it will appear further down the page than if you use the display property, which not only hides the rendered HTML but also collapses the area where it is to appear while invisible.

If your div for form1 and form2 are absolutely positioned, fixed in a certain place along the z-axis then the effects of the visibility property won't be an issue as there is nothing to interfere with it, you wouldn't notice that the page is keeping open that space since the element would be positioned on the z-axis and not inline with the rest of the page's content.

Make sense?
The best way to demonstrate the differences is to just write a test script based on the example that Nik already provided. Try one in which the visibility property is used in the style sheet and one in which the display property is used.

: )
Rich


:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
 
Old December 19th, 2003, 03:44 PM
Registered User
 
Join Date: Dec 2003
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Ok guys here what I have and my problems--It working but 2 things are wrong:

1. the radio buttons do not show which on is selected.
2. The forms do not overlap each other inthe space the build down.

How do I get the radio buttons to work and get the forms to appear in the same space not below the one above?

--------------------------------------------------------------------

<STYLE TYPE="text/css">
    }
        #idForm1 {
    display: block;
    left: 108px;
    top: 58px;
    width: 400px;
    height: 120px;
    background-color: #ffffff;
    border: thin none #003399;
    z-index: auto;
    padding: 5px 5px 5px 5px;
    visibility: visible;
}
        #idForm2 {
    display: block;
    left: 108px;
    top: 58px;
    width: 400px;
    height: 120px;
    background-color: #ffffff;
    border: thin None #003399;
    z-index: auto;
    padding: 5px 5px 5px 5px;
    visibility: hidden;
}
        #idForm3 {
    display: block;
    left: 108px;
    top: 58px;
    width: 400px;
    height: 120px;
    background-color: #ffffff;
    border: thin None #003399;
    z-index: auto;
    padding: 5px 5px 5px 5px;
    visibility: hidden;
}
    </STYLE>

<SCRIPT LANGUAGE="JavaScript">
    <!--//
    // set the path to the qForms directory
    qFormAPI.setLibraryPath("../../lib/");
    // this loads all the default libraries
    qFormAPI.include("*");
    qFormAPI.include("wddx");



    // this is the DHTML code for show the menus
    function showLayer(layer){
        strHidden = ( !document.layers ) ? "hidden" : "hide";
        strVisible = ( !document.layers ) ? "visible" : "show";

        if( document.layers ){
            lyrText = document.idForm1;
            lyrForm1 = document.idForm2;
            lyrForm2 = document.idForm3;
        } else if( document.getElementById ){
            lyrText = document.getElementById("idForm1").style;
            lyrForm1 = document.getElementById("idForm2").style;
            lyrForm2 = document.getElementById("idForm3").style;

        } else if( document.all ){
            lyrText = document.all["idForm1"].style;
            lyrForm1 = document.all["idForm2"].style;
            lyrForm2 = document.all["idForm3"].style;
        }

        // update layers
        lyrText.visibility = (layer == "idform1") ? strVisible : strHidden;
        lyrForm1.visibility = (layer == "idForm2") ? strVisible : strHidden;
        lyrForm2.visibility = (layer == "idForm3") ? strVisible : strHidden;

        return false;
    }
    //-->
    </SCRIPT>
</head>

<body>
<div align="center">
  <table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><form name="form1" method="post" action="javascript:void(0);">
          <input type="radio" name="radio1" value="idtext" onClick="return showLayer('idform1');">Form Set 1
        </form></td>
      <td><form name="form2" method="post" action="javascript:void(0);">
          <input type="radio" name="radio2" value="idform1" onClick="return showLayer('idForm2');">Form Set 2
        </form></td>
      <td><form name="form3" method="post" action="javascript:void(0);">
          <input type="radio" name="radio3" value="idform2" onClick="return showLayer('idForm3');">
        Form Set 3</form></td>
    </tr>
    <tr>
      <td colspan="3">
      <DIV ID="idForm1">
      <FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample1">
            <B>Name:</B><BR>
            <INPUT TYPE="Text" NAME="Name" VALUE="" CLASS="input">
            <BR>
            <B>E-mail:</B><BR>
            <INPUT TYPE="Text" NAME="Email" VALUE="" CLASS="input">
            <BR>
          </FORM></DIV>
        <DIV ID="idForm2">
          <FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample1">
            <B>Address:</B><BR>
            <INPUT TYPE="Text" NAME="Name" VALUE="" CLASS="input">
            <BR>
            <B>City:</B><BR>
            <INPUT TYPE="Text" NAME="Email" VALUE="" CLASS="input">
            <BR>
          </FORM>
        </DIV>
        <DIV ID="idForm3">
          <FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample2">
            <B>Phone Number</B><BR>
            <INPUT TYPE="Text" NAME="Phone" VALUE="" CLASS="input">
            <BR>
            <B>State</B><BR>
            <INPUT TYPE="Text" NAME="State" VALUE="" CLASS="input">
            <BR>
          </FORM>
        </DIV></td>
    </tr>

  </table>
</div>
</body>
</html>


--------------------------------------------------------------------

Thanks

Rob :-)


 
Old December 19th, 2003, 04:30 PM
Registered User
 
Join Date: Dec 2003
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Rich,

I tried what you said about using the display instead of visibility property but I am getting the same white space I did before.

Here is the code:

-----------------------------------------------------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
    }
        #idForm1 {
    display: block;
    letter-spacing: normal;
    text-align: left;
    vertical-align: top;
    word-spacing: normal;
    white-space: normal;


}
        #idForm2 {
    display: block;
    letter-spacing: normal;
    text-align: left;
    vertical-align: top;
    word-spacing: normal;
    white-space: normal;
    visibility: hidden;


}
        #idForm3 {
    display: block;
    letter-spacing: normal;
    text-align: left;
    vertical-align: top;
    word-spacing: normal;
    white-space: normal;
    visibility: hidden;


}
    </STYLE>
<SCRIPT LANGUAGE="JavaScript">
// this is the DHTML code for show the menus
    function showLayer(layer){
        strHidden = ( !document.layers ) ? "hidden" : "hide";
        strVisible = ( !document.layers ) ? "visible" : "show";

        if( document.layers ){
            lyrForm1 = document.idForm1;
            lyrForm2 = document.idForm2;
            lyrForm3 = document.idForm3;
        } else if( document.getElementById ){
            lyrForm1 = document.getElementById("idForm1").style;
            lyrForm2 = document.getElementById("idForm2").style;
            lyrForm3 = document.getElementById("idForm3").style;

        } else if( document.all ){
            lyrForm1 = document.all["idForm1"].style;
            lyrForm2 = document.all["idForm2"].style;
            lyrForm3 = document.all["idForm3"].style;
        }

        // update layers
        lyrForm1.visibility = (layer == "idform1") ? strVisible : strHidden;
        lyrForm2.visibility = (layer == "idForm2") ? strVisible : strHidden;
        lyrForm3.visibility = (layer == "idForm3") ? strVisible : strHidden;

        return false;
    }
    //-->
    </SCRIPT>
</head>

<body>
<div align="center">
  <table width="450" border="0" cellspacing="4" cellpadding="2">
    <tr>
      <td>
          <input type="radio" name="radio1" value="idtext" onClick="return showLayer('idform1');">Form Set 1
        </td>
      <td>
          <input type="radio" name="radio2" value="idform1" onClick="return showLayer('idForm2');">Form Set 2
        </td>
      <td>
          <input type="radio" name="radio3" value="idform2" onClick="return showLayer('idForm3');">Form Set 3</td>
    </tr>
    <tr>
      <td colspan="3">
      <DIV ID="idForm1">
      <FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample1">
            <B>Name:</B><BR>
            <INPUT TYPE="Text" NAME="Name" VALUE="" CLASS="input">
            <BR>
            <B>E-mail:</B><BR>
            <INPUT TYPE="Text" NAME="Email" VALUE="" CLASS="input">
            <BR>
          </FORM></DIV>
        <DIV ID="idForm2">
          <FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample1">
            <B>Address:</B><BR>
            <INPUT TYPE="Text" NAME="Name" VALUE="" CLASS="input">
            <BR>
            <B>City:</B><BR>
            <INPUT TYPE="Text" NAME="Email" VALUE="" CLASS="input">
            <BR>
          </FORM>
        </DIV>
        <DIV ID="idForm3">
          <FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample2">
            <B>Phone Number</B><BR>
            <INPUT TYPE="Text" NAME="Phone" VALUE="" CLASS="input">
            <BR>
            <B>State</B><BR>
            <INPUT TYPE="Text" NAME="State" VALUE="" CLASS="input">
            <BR>
          </FORM>
        </DIV></td>
    </tr>

  </table>
</div>
</body>
</html>


---------------------------------------------------------------

Thanks

Rob :-)






Similar Threads
Thread Thread Starter Forum Replies Last Post
How to automate selection of radio button using vb satish_k VB.NET 11 December 14th, 2006 11:28 AM
Display based on radio button selection Mekala Javascript 4 August 5th, 2004 11:36 PM
check if radio button list selection made jtyson Classic ASP Basics 1 July 3rd, 2004 12:34 AM
Radio Button activates a selection box in the page rnerilla JSP Basics 0 April 23rd, 2004 12:14 AM
Radio button activates a selection box in the page rnerilla PHP How-To 1 April 22nd, 2004 01:41 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.