SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question AJAX form with "hidden" fields depending on what option is selected

    Hi everyone I am new to AJAX and I would like to make a form which has fields that are hidden and if you select a certain option then a new field will appear.

    Here is an example:
    http://www.friendsreunited.co.uk/fri...K&randomiser=9
    (select a country and then a state field will appear below)

    I was wondering if it is possible to do this using AJAX?
    I would like to have a form fade onto the screen when the user clicks on register and then some of the fields appear depending on what options the user selects?

    I have no idea how to do this. Please can someone help me achieve this?

  2. #2
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't get the link to work, but I think I know what you are talking about

    In order to simply show/hide a section you don't need AJAX, if there is dynamic content in the section, then you will probably need AJAX to talk to the server.

    What you will need to know is a little bit of javascript and some CSS as well.

    I have posted a little example on my site, so head over there and I would just view source on it and see if that is what you had in mind.

    http://www.stevennez.com/playground/divHide/index.html

  3. #3
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for that stevennez!

    I have added 2 radio button options for Yes and No. When the user clicks on No a new field appears For some reason when you select No both the buttons are still highlighted. Any idea how to get Yes to be unactive when No is selected? Here is the link:
    http://www.newmedia.lincoln.ac.uk/jecgardner/tests/js_showhide/

    The problem above happens in Firefox. I have just tested it in IE7 and when you select No it doesn't even show No has been selected it just stays on Yes.. Any idea how to fix this?

  4. #4
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump.. this should be easy to fix?.. anyone?

  5. #5
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very nice script; I have been looking for something like this too.

    any way to have it done using only php..?

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @shtoom

    I have updated the page I posted before to reflect changes.

    First, the two radio buttons were named differently so there was no "one or the other" behavior going on.

    Also when calling the function, use an onchange attribute specifying your target like so: showifno(this.selected); and be sure to also use selected in your js function.

    Lastly for added flair, I've added an ifyes function to hide the table if the user changes his/her mind.

    Happy coding!

  7. #7
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @lukkas

    I'm sure there is a way to do it all in php, but really php is for talking to the database and handling ajax calls. Javascript and CSS are really the best tools for displaying to the browser.


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
  •