Получение проверенного значения с помощью ajax submit

Question

Во-первых, я новичок в ajax и Java Script. Я потратил несколько дней на решение этой проблемы, но я до сих пор не понял этого.Я прочитал темы с похожими проблемами, но я все еще не могу понять это правильно.Итак, здесь;

Довольно просто, я хочу опубликовать проверенное значение с одной из трех переключателей.Все, что я получаю, это только значение первой кнопки-переключателя ..

Я пробовал несколько вещей, но я сократил код, чтобы было легче увидеть, в чем проблема: -)

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>

Форма

<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());

?>

Надеюсь, у вас, умных парней, есть решение ... потому что эта штука меня сводит с ума

Answer 1

Первый: вы используете один и тот же идентификатор для нескольких элементов.Идентификаторы должны быть уникальными, и вы должны обращаться к своим элементам с помощью имени класса или других средств.Поэтому вместо

$('#svar')

вы должны использовать

$('input[name=svar]')

для ссылки на группу флажков.

Секунда: Есть небольшая ошибказдесь:

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

- это значение атрибута значения первого переключателя, в то время как

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

даст вам значение отмеченного переключателя в группе, которую вы выбираете с помощью input[name=svar].

Редактировать: thx @Quentin за указание на мою ошибку.

Answer 2

У вас есть несколько проблем.

Во-первых, ваш HTML недействителен .Идентификатор должен быть уникальным , поэтому каждый переключатель должен иметь свой собственный идентификатор.Вы связываете группу переключателей, присваивая им одинаковые имена.(Наличие уникального идентификатора позволяет связать LABEL с каждым из них, используя атрибут FOR, который повышает доступность, облегчая чтение с экрана и предоставляя более крупные целевые объекты для кликов).

Во-вторых, значение переключателя равнофиксированный.Вопрос в том, успешен он или нет?и это определяется путем проверки, если это проверено или нет.Если бы вы делали это вручную, вам пришлось бы loop по каждой радиокнопке в группе, пока вы не найдете проверенную кнопку (или использовать селектор, который соответствует только кнопке проверенного соотношения (:checked)).

В-третьих, вы создаете данные формы, объединяя строки, не гарантируя, что данные безопасны для URL (с encodeURIComponent ).

Решение - забытьделая все это вручную, и просто используйте jQuery serialize метод в форме.

Answer 3

Первое, что нужно знать, это id должно быть уникальным в HTML-документе.

Что делает атрибуты типа ID особенными, так это то, что никакие два таких атрибута не могут иметь одно и то же значение;

[Цитируется из селектора css2 документы]

У вас одинаковый идентификатор для трех переключателей.

Теперь, когда вы используете var svar = $('#svar').attr('value');, будет выбран только первый переключатель.Таким образом, независимо от выбранной радиокнопки, вы получите только первое значение радиокнопки.

Теперь, если вы хотите, чтобы радиокнопка была выбрана, вы должны использовать jQuerys :checked селектор ,