CODEWITHSUNDEEP
jqueryhtmlformsvalidation
Shirley Dodson
Shirley Dodson

Reputation: 339

Trying to figure out why my radio buttons are undefined in my form

I'm working on this form, and I'm working on a way to validate it with my own code. I'm pretty sure I have an idea that will work, but I'm having trouble getting the value for my radio buttons. I know they have value, because I set up an alert every time one is clicked to say what it's value is, and whether or not it "is checked". But when my form validator tries to catch the radio values, they keep coming back as undefined. what?

Here is my jsFiddle, all my code is there. I'll only include snippets below.

jQuery for alerting radio clicks:

$(":radio").click(function(){
                alert($(this).val() + " - " + $(this).is(":checked"));  
            });

What I get as a result:

enter image description hereenter image description here

jquery for alerting the form values:

$("#invalid").click(function(){
                alert (
                    "BreederName: " + bName.val() + " - " + bName.hasClass("i-invalid") + 
                    "\nYearStart: " + year.val() + " - " + year.hasClass("i-invalid") + 
                    "\nKennelName: " + kName.val() + " - " + kName.hasClass("i-invalid") + 
                    "\nWebsite: " + website.val() + " - " + website.hasClass("i-invalid") + 
                    "\nCredit: " + credit.val() + 
                    "\nExercise: " + exercise.val());   
            });

When the fields are empty, or have invalid entries, my code adds a class of i-invalid, which I'm checking with this alert. Which looks something like this:

enter image description here

Clearly my web address validator isn't working, but I'll worry about that later. Clearly I'm not targeting my radio buttons properly, but I've used all the different ways I can think to target these two fields, and I keep coming up as undefined. Can someone help me figure out where I'm going wrong?

HTML form fields (examples)

    <!--Radio buttons for credit field-->
    <td colspan="2"><h3>Would you like your contribution acknowledged?</h3></br></br>
<input type="radio" name="credit" value="yes" width="20">
Yes, I'd like my name listed on the Contributor's page. </br>
<input type="radio" name="credit" value="no" width="20">
No, I'd rather contribute anonymously.

<!--Sample Radio buttons for exercise field, there are 10 of them -->
<input type="radio" name="exercise" value="5" width="20">5
<input type="radio" name="exercise" value="6" width="20">6</br>

jQuery variable for radio fields

credit = $(":radio[name=credit]:checked");
exercise = $(":radio[name=exercise]:checked");

// also tried . . .

    credit = $("input radio[name=credit]:checked");
    exercise = $("input radio[name=exercise]:checked");

    credit = $("input[name=credit]:checked");
    exercise = $("input[name=exercise]:checked");

credit = $("form radio[name='credit']:checked"); <!-- put the field name in single quotes-->
exercise = $("form radio[name='exercise']:checked");

Upvotes: 0

Views: 806

Answers (1)

Sushil
Sushil

Reputation: 2835

what you're doing is setting your global variables credit and exercise in the document.ready event. so when your DOM loads the values of the radio buttons are null since nothing is checked at that time.

what you need to do is set the values of the global variables inside the radio button click event. this way they will always be updated when a radio button is clicked.

see this code below.

$(":radio").click(function() {
    credit = $(":radio[name=credit]:checked");
    exercise = $(":radio[name=exercise]:checked");
    console.log($(this).val() + " - " + $(this).is(":checked"));
});

Here's a working JSFIDDLE. hope this helps.

EDIT: I've replaced alert with console.log. please check the console for ouput.

Upvotes: 1

Related Questions