Определите в Javascript, какая форма была отправлена - PullRequest
Новая
       8

Определите в Javascript, какая форма была отправлена

0 голосов
/ 22 февраля 2010

У меня есть система рейтинга для группы записей на веб-сайте, они размещаются программно, и поэтому я дал им уникальный идентификатор формы с помощью счетчика. 

<form name="star">
    <input type="radio" class="star" name="rating" id ="rating" value="Terribad"/>
    <input type="radio" class="star" name="rating" id ="rating" value="Meh"/>
    <input type="radio" class="star" name="rating" id ="rating" value="OK"/>
    <input type="radio" class="star" name="rating" id ="rating" value="Pretty Good"/>
    <input type="radio" class="star" name="rating" id ="rating" value="Awesome!"/>
    <input type='hidden' name='item' id = 'item' value='<%out.print(item);%>'>
</form>
<span id = "msg<%out.print(item);%>" style = "float:right; margin-left:0px; padding-top:0px;"></span>

У меня также есть другое скрытое поле, которое представляет собой имя пользователя (полученное в javascript), но удалено из-за его большого размера и из сложного массива, основанного на сеансе.

Я также добавил счетчик в скрытое поле, чтобы попытаться разобраться.

Оттуда я запускаю javascript по нажатию одной из кнопок-переключателей, который получит дополнительные сведения о сеансе и выполнит обновление базы данных AJAX. 

$(function() {
    $(".star").click(function() {
            var submission = document.getElementsByName("rating");
            var name = $("input#name").val();
            var item = $("input#item").val();
            var rating;
            for (i = 0; i< submission.length; i++) {
                    if (submission[i].checked) {
                            rating = submission[i].value;
                    }
            }
            var submitted = 'name='+name + 'rating=' + rating;
            //alert (item);return false;
            $.ajax ({
                    type: "POST",
                    url: "/process_rating.jsp",
                    data: submitted,
                    success: function () {
                            $('#msg'+item).html("Submitted");  

                    }
            });
            return false;
    });
});

Все это прекрасно работает с первой записью (когда у меня не было этого количества), но, как я не удивлен, все остальные записи обрабатываются как первая. Основная проблема заключается в том, что когда я пытаюсь обновить msg div с его успехом, он делает только первое, так как получает скрытое значение из первой формы, а не форму, которая была фактически отправлена.

Это все внутри jsp кстати.

Ответы [ 2 ]

2 голосов
/ 22 февраля 2010

Прежде всего, каждый идентификатор должен быть уникальным на странице , и вам не нужно использовать ни один из идентификаторов в вашем примере.Это вполне может быть корнем многих проблем на вашей странице.

Ваш код может быть немного упрощен, и вы можете использовать свойство "form" в элементе ввода, чтобы найти связанную форму.Это работает для вас лучше? 

$(function() {
    $(".star").click(function() {
        $.ajax ({
            type: "POST",
            url: "/process_rating.jsp",
            data: {
                name: this.form.name,
                rating: $(this).val()
            },
            success: function () {
                // Not sure what you're trying to do here...  Update some input
                // that you didn't show in your code?
                $('#msg').html("Submitted");  
            }
        });
        return false;
    });
});

Я не был уверен, что вы пытались сделать после успешного сохранения формы.Дайте мне знать, и мы посмотрим, сможем ли мы заставить его работать.

1 голос
/ 22 февраля 2010

Используйте «this» из функции обработчика событий, чтобы найти форму, которая является родительской. 

$(".star").click(function(){

    var formThatWasSubmitted = $(this).parents("form") 

});

Уверен, вот как это работает.

...