3

I have a form page in which the user can enter an ID, and the corresponding profile data is pulled from mysql and displayed in the form so that the user may edit it.

One element is a group of radios, so you may select a year level (ie "1", "2", "3", etc).

When a user provides an ID, an AJAX call is made to pre-populate the form with data, including selecting the appropriate radio.

problem:

The user must select a year level to submit the form. I check this with a verifyForm() method:

function verifyForm() {
    if( !document.addStudentForm.elements["yearLevel"].checked ) {
        alert( "You must select a year level before submitting." );
        return false;
    }
};

I expect this to check yearLevel and, if an option isn't selected, alert/return false.

However, when the yearLevel radio is pre-selected by the AJAX data, this is still behaving as if the user did not select a radio.

The radio is populated by js via the following code:

document.getElementById( "yearLevel_<?=$student['student']->get('yearLevel')?>" ).checked = true;

edit: Here is the relevant HTML.

<form name="addStudentForm" action="validation/updateStudentValidate.php" method="POST" onSubmit="return verifyForm()">                                 
    <input type="radio" value="1" name="yearLevel" disabled id="yearLevel_1" /> 1
    <input type="radio" value="2" name="yearLevel" disabled id="yearLevel_2" /> 2
    <input type="radio" value="3" name="yearLevel" disabled id="yearLevel_3" /> 3
    <input type="radio" value="4" name="yearLevel" disabled id="yearLevel_4" /> 4
    <input type="radio" value="5" name="yearLevel" disabled id="yearLevel_5" /> 5
    <input type="radio" value="6" name="yearLevel" disabled id="yearLevel_6" /> 6
</form>

Question:

How can I have my javascript properly identify whether or not the radio has been checked, regardless of if it was selected by hand or programmatically?

tdc
  • 5,174
  • 12
  • 53
  • 102
  • 1
    How does your AJAX function select the radio button? – Robb Nov 08 '13 at 16:25
  • @Robb: added to original post. – tdc Nov 08 '13 at 16:31
  • and you have verified that it actually checks the box? – PlantTheIdea Nov 08 '13 at 16:33
  • @PlantTheIdea: Yes I have confirmed it does populate properly. – tdc Nov 08 '13 at 16:34
  • can we see your HTML as well? – PlantTheIdea Nov 08 '13 at 16:38
  • @PlantTheIdea: added to OP. If you notice, the inputs are set to disabled by default (until they query populates them). Should these be set to read-only as opposed to disabled after they've been populated? Perhaps disabled does not allow the `.checked` property to work properly. – tdc Nov 08 '13 at 16:42
  • are u trying to check elements that are disabled? i was under the assumption that you were enabling them after population. yes, this is a key piece. – PlantTheIdea Nov 08 '13 at 16:55
  • @PlantTheIdea: I am just trying to see if any radio has been selected (either by the user, or prefilled programmatically), before the form can submit. By default every input but `id` is disabled on page load. the user enters an ID, and the rest of the inputs enable/populate if the ID was found in the DB. If the ID was not found, the blank inputs become enabled for editing. – tdc Nov 08 '13 at 17:06
  • 1
    well you confirmed that it was properly checking the box, so i dont think the disabled piece is your issue. did you try looping through them as i did in my answer? it may be just the way you are checking the elements for the `checked` property, as the property is for a single element instead of a collection. – PlantTheIdea Nov 08 '13 at 17:17
  • nevermind, @Esq decided to downvote my answer just because i ripped his apart before providing it. i wont help if i'm going to be slammed by petty users for it. best of luck to you. – PlantTheIdea Nov 08 '13 at 17:21
  • @PlantTheIdea: you removed your answer? I was working on implementing your method. I believe it may work for my issue, you should repost it! – tdc Nov 08 '13 at 17:26

1 Answers1

0

Taken from this StackOverflow post and adapted for this example and for speed, you can have this in your AJAX success return:

var radios = document.getElementsByName('yearLevel'),
    i = radios.length,
    isChecked = false;

while(i--){
    if (radios[i].checked) {
        isChecked = true;
        break;
    }
}

Then when the function is called:

function verifyForm(){
    if(!isChecked){
        alert( "You must select a year level before submitting." );
        return false;
    }
};

This is assuming that you don't have any other items with the name yearLevel in your HTML.

This will actually return the value, I guess I'm unsure if you are wanting to see a specific item checked, or just that they have been checked at all. This function will do both.

Community
  • 1
  • 1
PlantTheIdea
  • 16,061
  • 5
  • 35
  • 40