CODEWITHSUNDEEP
javascriptjqueryradio-button
Jens Jarl Broe
Jens Jarl Broe

Reputation: 23

Getting checked value with ajax submit

First of, I'm new to ajax and Java Script.. I have spend days solving this problem, but I still haven't figured it out. I have read through threads with similar problems but I still can't get it right. So here goes;

Quite simple I want post the checked value from from one of three radio buttons. All I get though is only the value of the first radio button..

I have tried several things, but I stripped down the code so it might be easier see where the problem is :-)

The ajax

<script type"text="" javascript"="">
$(document).ready(function(){
    $("form#submit").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
    var svar     = $('#svar').attr('value');
    var date     = $('#date').attr('value');
    var email     = $('#email').attr('value');

        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: "svar="+ svar + "&email=" + email + "&date=" + date,
            success: function(){
                $('form#submit').hide();
                //$('form#submit :input').val("");
                $('div.success').fadeIn();
            }
        });
    return false;
    });
});
</script>

The form

<form id="submit" method="post" name="submit" action="">
            <fieldset>
            <legend>Dagens spørgsmål: <? echo $row['question'];?></legend>
                <br>
                <input type="radio" name="svar" id="svar" value="1"><? echo $row['opt1'];?>
                <br>
                <input type="radio" name="svar" id="svar" value="2"><? echo $row['opt2'];?>
                <br>
                <input type="radio" name="svar" id="svar" value="3"><? echo $row['opt3'];?>
                <br>
                    <input name="email" id="email" type="hidden" value="<? echo $email  ?>" />
                    <input name="date" id="date" type="hidden" value="<? echo $date  ?>" />

                <br><br>
                <button type="submit" class="button positive"> <img src="img/tick.png" alt=""> Svar på dagens spørgsmål </button>
            </fieldset>
        </form>

Ajax.php

<?php

    include ("dbc.php");

// CLIENT INFORMATION
    $email        = htmlspecialchars(trim($_POST['email']));
    $date        = htmlspecialchars(trim($_POST['date']));
    $svar        = htmlspecialchars(trim($_POST['svar']));



//stuff from answers

        mysql_query("INSERT INTO answers
        (`email`,`day`,`answer`)
        VALUES
        ('$email','$date','$svar')") or die(mysql_error());

?>

Hope one you of you smart guys have a solution.. because this thing i driving me crazy

Upvotes: 0

Views: 1044

Answers (3)

aorcsik
aorcsik

Reputation: 15552

First: you use the same id for several elements. ID-s should be unique, and you should address your elements with class name or other means. So instead of 

$('#svar')

yous should use

$('input[name=svar]')

to reference the group of checkboxes.

Second: There is a slight mistake here:

$('#svar').attr('value');

is the value of the first radio button's value attribute, while

$('input[name=svar]:checked').val();

would give you the value of the checked radio button in the group you are selecting with input[name=svar].

Edit: thx @Quentin for pointing out my error.

Upvotes: 1

Quentin
Quentin

Reputation: 943936

You have several problems.

First, your HTML is invalid. An ID must be unique, so each radio button must have its own ID. You associate a group of radio buttons by giving them the same NAME. (Having a unique ID then lets you associate a LABEL with each one using the FOR attribute which increases accessibility by making it easier for screen readers and providing bigger click targets).

Second, the value of a radio button is fixed. The question is "Is it successful or not?" and that is determined by seeing if it is checked or not. If you were doing this manually, you would have to loop over each radio button in the group until you found one that was checked (or use a selector that matched only the checked ratio button (:checked)).

Third, you are building your form data by mashing together strings without making sure the data is URL safe (with encodeURIComponent).

The solution is to forget about doing all this manually and just use the jQuery serialize method on the form.

Upvotes: 1

robert
robert

Reputation: 8717

First thing to know is id should be unique in a html document.

What makes attributes of type ID special is that no two such attributes can have the same value;

[Quoted from css2 selector docs]

You have assigend same id to three radio buttons.

Now when you use var svar = $('#svar').attr('value');, only the first radio button will get selected. So, irrespective of radio button selected, only the first radio buttons value you will get.

Now, if you want to get the radio button selected you have to use jQuerys :checked selector.

Upvotes: 0

Related Questions