SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Westville, Durban, South Africa
    0 Post(s)
    0 Thread(s)

    Enable/Disable radio buttons

    I have a questionnaire on our website that we use to identify where our visitors found our site.

    The questionnaire takes the form of 15 or so radio buttons, one of which has to be checked in order to proceed.

    They all have different "names" but currently their "id's" are all the same as I use some PHP coding to scan which one has been selected and put the answer in a database.

    The questionnaire is at the bottom of the form and I don't want these radios enabled until the visitor has filled in the rest of the form.

    How do I enable/disable the entry to these without changing the "id's" of them to all unique id's ? Currently they all have "id=Advert"

    If I enable/disable them using:

    document.getElementById("Advert").disabled = true

    then only the first one in the series gets changed.

    Has anyone got a solution to this for me please?


  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    51 Post(s)
    2 Thread(s)
    Ah, first, as far as I know it must be the other way around-- all radio buttons referring to the same question need the same name and different ids. You'll have to change the id's to something unique anyway because that's the only valid HTML.

    Like: (HTML4.01 Strict)
    <p>How many bagels did you eat today?</p>
    <input type="radio" name="bagels" id="zero">
    <label for="zero">None</label>
    <input type="radio" name="bagels" id="some">
    <label for="some">1-5</label>
    <input type="radio" name="bagels" id="lots">
    <label for="lots">6-10</label>
    <input type="radio" name="bagels" id="toomuch">
    <label for="toomuch">More than 10</label>

    And maybe what you can do is wrap just your radio-button questions in their own fieldset which has an id or a class, and on page load, set the display of that fieldset to display: none; (this way it's shown by default to those without JS in the first place, so, always keep it Block by default and those with JS, when it loads, hides them!) and have a submit or button input at the end of the other part of the form, which the user surely wouldn't click until they've already filled out the rest of the form (as it would be the button at the bottom of the form, right?)...

    When the submit or button input is clicked, the fieldset's css can change to display: block or whatever you're doing in your form. So, you'll just be toggling display states. We've done this with a form where a Yes must be selected before the sub-questions appear. Becuase I could not use display block and none in this case (triggered an IE bug), we needed to make it more complicated and change classes on our element, which set off different CSS declarations already on our stylesheet.

    But if you are not floating your fieldset then you're good.

    *edit... actually, could you
    document.getElementByType("radio").disabled = true

    Though I'm also just sticking my toes into JS myself... however I'm 100% certain that you may NOT have the same ID more than once on a page... change your PHP if necessary but you must have all the bottoms pertaining to the same question have the same name and different id's.

  3. #3
    SitePoint Enthusiast kceleb9's Avatar
    Join Date
    Jun 2008
    0 Post(s)
    0 Thread(s)
    You cant have all elements with the same ID. You can have the same name so they are linked together - but the Id attribute must be unique.

    You should be able to add a number or something to each id to make it unique in your PHP pretty easily.


Posting Permissions

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