当每个表单都具有相同的 class 时，从所选表单中获取值

Question

我使用 while 循环显示来自我的数据库的数据。当我想在这个循环中使用表单做一些事情时，一切正常。

它是这样的：

// RECORD NR 1
                    <div class=\"movie__btns\">
                    <form class=\"actionlist\" method=\"post\">
                            <select name=\"buttonaction\"  class=\"actionlist\" id=\"wybrana_opcja\">
                              <option value=\"watchlater\">Do obejrzenia</option>
                              <option value=\"watched\">Obejrzany</option>
                              <option value=\"favorite\">Ulubiony</option>
                            </select>
                            <input type=\"hidden\" class=\"id_user\" value=\"$stat[id]\">
                            <input type=\"hidden\" class=\"id_movie\" value=\"$podobny_film[id]\">
                                <button type=\"submit\" class=\"btn btn-md btn--warning\">Dodaj</button>                                        
                    </form>                             
                    </div>

// RECORD NR 2
                        <div class=\"movie__btns\">
                        <form class=\"actionlist\" method=\"post\">
                                <select name=\"buttonaction\"  class=\"actionlist\" id=\"wybrana_opcja\">
                                  <option value=\"watchlater\">Do obejrzenia</option>
                                  <option value=\"watched\">Obejrzany</option>
                                  <option value=\"favorite\">Ulubiony</option>
                                </select>
                                <input type=\"hidden\" class=\"id_user\" value=\"$stat[id]\">
                                <input type=\"hidden\" class=\"id_movie\" value=\"$podobny_film[id]\">
                                    <button type=\"submit\" class=\"btn btn-md btn--warning\">Dodaj</button>                                        
                        </form>                             
                        </div>

看起来一样，但输入值不同。

现在，我的问题是：

当我填写第二个表格时，我将从第一个表格中得到 id_movie 值。 如何解决？我想要第二个表单的值，同时提交第二个表单。

我的 jQuery：

$('.actionlist').submit(function(e) {

        e.preventDefault();

        var wybor = $("#wybrana_opcja option:selected" ).text();
        var id_user = $('.id_user').val();
        var id_movie = $('.id_movie').val();

});

Answer 1

首先，您同时拥有 form 和 select 元素以及 actionlist class，因此最好将事件附加到 form 只有。您还需要从 select 中删除 id 属性，否则它将不唯一并导致页面无效。

最后，您可以使用 this 关键字中引用的 form 来查找相关输入：

$('form.actionlist').submit(function(e) {
    e.preventDefault();

    var $form = $(this);
    var wybor = $form.find(".actionlist option:selected").text();
    var id_user = $form.find('.id_user').val();
    var id_movie = $form.find('.id_movie').val();
});

Answer 2

使用jquery"On"提交事件

$("form.actionlist").on("submit",function(event){
   event.preventDefault();
   // your code
})

更多参考如何在答案下方获取值检查

jquery disable form to validate data

Answer 3

<div class=\"movie__btns\" >
                <form class=\"actionlist\" method=\"post\">
                        <select name=\"buttonaction\"  class=\"actionlist\" id=\"wybrana_opcja\">
                          <option value=\"watchlater\">Do obejrzenia</option>
                          <option value=\"watched\">Obejrzany</option>
                          <option value=\"favorite\">Ulubiony</option>
                        </select>
                        <input type=\"hidden\" class=\"id_user\" value=\"$stat[id]\">
                        <input type=\"hidden\" class=\"id_movie\" value=\"$podobny_film[id]\">
                            <button type=\"submit\" class=\"btn btn-md btn--warning\">Dodaj</button>                                        
                </form>                             
                </div>

                // RECORD NR 2
                    <div class=\"movie__btns\" >
                    <form class=\"actionlist\" method=\"post\" >
                            <select name=\"buttonaction\"  class=\"actionlist\" id=\"wybrana_opcja\">
                              <option value=\"watchlater\">Do obejrzenia</option>
                              <option value=\"watched\">Obejrzany</option>
                              <option value=\"favorite\">Ulubiony</option>
                            </select>
                            <input type=\"hidden\" class=\"id_user\" value=\"$stat[id]\">
                            <input type=\"hidden\" class=\"id_movie\" value=\"$podobny_film[id]\">
                                <button type=\"submit\" class=\"btn btn-md btn--warning\">Dodaj</button>                                        
                    </form>                             
                    </div>

jQuery

$('form.actionlist').submit(function(e) {

    e.preventDefault();

    var wybor = $("#wybrana_opcja option:selected" ).text();
    var id_user = $('.id_user').val();
    var id_movie = $('.id_movie').val();

});

当每个表单都具有相同的 class 时，从所选表单中获取值

Getting values from chosen form, when every form has the same class

php

ajax

jquery