CODEWITHSUNDEEP
javascriptjqueryhtmlinputradio-button
Jakub Zak
Jakub Zak

Reputation: 1232

how to check each input attr if type radio and checked

I have a bunch of inputs within the div and I need to select each of them and add name attr's value and value of the element into an array, and for some reason my radio buttons won't pass the value.

So I have html:

         <div id="form">
            <!-- Meno -->
            <span class="form_element_title">Meno:</span>
            <br />
            <input type="text" name="name" id="" class="form_input_element_text" vtype="vietor"/>
            <br />
            <br />
            <!-- Priezvisko -->
            <span class="form_element_title">Priezvisko:</span>
            <br />
            <input type="text" name="surname" id="" class="form_input_element_text" vtype="vietor"/>
            <br />
            <br />
            <!-- Vek -->
            <span class="form_element_title">Vek:</span>
            <br />
            <input type="text" name="age" id="" class="form_input_element_text" vtype="vietor"/>
            <br />
            <br />
            <!-- Pohlavie -->
            <span>Pohlavie:</span>
            <br />
            <input type="radio" name="sex" id="" value="male" class="" vtype="vietor" checked="checked" />
            <span>Muž</span>
            <br />
            <input type="radio" name="sex" id="" value="female" class="" vtype="vietor" />
            <span>Žena</span>
            <br />
            <br />
            <!-- Pohlavie -->
            <span>Dátum narodenia</span>
            <br />
            <input type="date" name="sex" id="" class="form_input_element_text" vtype="vietor" placeholder="DD/MM/RRRR" />
            <br />
            <br />
            <!-- Adresa -->
            <span>Adresa:</span>
            <br />
            <input type="text" name="adresa" id="" class="form_input_element_text" vtype="vietor"/>
            <br />
            <br />
            <button id="submit_button">Submit</button>
        </div>

And JS:

var myArray = [];
$( "input" ).each(function( index ) {

        if($(this).attr('type') == 'radio' && $(this).attr('checked') == 'checked'){
            name = $(this).attr('name');
            value = $(this).val();
        } else {
            name = $(this).attr('name');
            value = $(this).val();
        }

        myArray[name] = value;
    });

    console.log(myArray);

What I'm getting on console:

Datum narodenia: "2013-11-12"
adresa: "123 Road"
age: "19"
length: 0
name: "Jakub"
sex: "female"
surname: "Zak"

Even though the second radio button, of value = male, was checked?

Upvotes: 0

Views: 2775

Answers (3)

nnnnnn
nnnnnn

Reputation: 150010

Your if and else cases do the same thing as each other. To get the value of all non-radio elements plus radios only if checked try this instead:

$( "input" ).each(function( index ) {
    if(this.type != 'radio' || this.checked)
       myArray[this.name] = this.value;
});

Note that you don't need to keep calling $(this) everywhere to retrieve the element value or type, you can access those properties directly from this.

Note also that you have another element with name="sex", the type="date" input that appears after the radio buttons in your markup. So rather than sex: "female" in your console output I would expect the value of that date input to overwrite whatever you got from the radio buttons. You should rename that other input.

Demo: http://jsbin.com/OJAcaHE/1/edit

Finally, note that arrays are supposed to be used with numeric indices. If you want to have string keys you should be using an object, i.e.:

myObject = {}
...
myObject[someKey] = someValue;

Upvotes: 0

Hasan Alaca
Hasan Alaca

Reputation: 232

do you realize that both your if and else statements have the same codes?

 name = $(this).attr('name');
 value = $(this).val();

Same codes will generate same results, logically.

Upvotes: 1

James Montagne
James Montagne

Reputation: 78630

Have a look at your if statement. 

if($(this).attr('type') == 'radio' && $(this).attr('checked') == 'checked'){

} else {

}

The else then essentially means "if type not radio OR not checked". So unchecked radio buttons will go into the else (which is the same as the if). This means that when this code gets to the female, it will replace male. I believe you wanted to ignore unchecked radio buttons, try this instead:

$( "input" ).each(function( index ) {

    if(this.type == 'radio' && !this.checked){
        return true;  // skip to the next iteration of the loop
    }

    /* Add to object */
});

Upvotes: 1

Related Questions