CODEWITHSUNDEEP
phpjavascriptjquery
Ham
Ham

Reputation: 814

radio group + javascript

I am trying to use a few radio buttons, after selection, to post the value to another page for processing, the scripts are as follow:-

<script>
function add_new_event(){
$.post('process.php',{

        event_color:document.getElementById('event_color').value,

}
</script>

        <input type="radio" name="event_color" id="event_color" value="#FF0000"> Color A
        <input type="radio" name="event_color" id="event_color" value="#FF6666"> Color B
        <input type="radio" name="event_color" id="event_color" value="#66FF99"> Color C
        <input type="radio" name="event_color" id="event_color" value="#CCFF66"> Color D
        <input type="radio" name="event_color" id="event_color" value="#00CCFF"> Color E
        <input type="radio" name="event_color" id="event_color" value="#996633"> Color F

and I am not successful. Is there anything wrong to the codes?? Thanks!

Upvotes: 0

Views: 109

Answers (3)

adeneo
adeneo

Reputation: 318202

An ID should be unique, you are targeting all the elements as they all have the same ID, expecting to get something back.

You can target the elements by name or class instead:

<script type="text/javascript">
    $(function() {
        function add_new_event(){
            var myValue = $('[name="event_color"]').filter(':checked').val();
            $.post('process.php',{ event_color : myValue });
        }
    });
</script>

html :

    <input type="radio" name="event_color" value="#FF0000"> Color A
    <input type="radio" name="event_color" value="#FF6666"> Color B
    <input type="radio" name="event_color" value="#66FF99"> Color C
    <input type="radio" name="event_color" value="#CCFF66"> Color D
    <input type="radio" name="event_color" value="#00CCFF"> Color E
    <input type="radio" name="event_color" value="#996633"> Color F​​​​​​​​​​​​​​​​​

FIDDLE

Upvotes: 1

Diego ZoracKy
Diego ZoracKy

Reputation: 2285

Why not use jQuery for that?

$("input[type=radio][name=event_color]:checked")

Upvotes: 0

rahul
rahul

Reputation: 7663

assign same class to all radio button and then use this

$('.ClassName:checked').val()

Upvotes: 0

Related Questions