Question

我在页面上有多个表单，它们是用Jinja2和Flask生成的，每个表单都有自己唯一的id，每个表单中都有一个按钮。我想单击按钮并获取按钮实际所在的表单的值。但是，当我尝试序列化表单时，它是空的。所有console.log行都可以正常工作，每个按钮确实可以检索它所在的表单。

HTML ：

<form id='{{ "item-"+item.articleNr }}' class="itemTemplate">
    <div class="thumb">
        <img style="width: 200px;height: 200px;" src="{{ url_for('static',filename='images/'+item.image) }}">
    </div>
    <div class="contentWrapper">
        <div class="content" id="item-content">
            <label id="articleNameBlock" name="articleName">{{ item.articleName }}</label>
            <div class="articleNrBlock" name="articleNr">{{ item.articleNr }}</div>
            <div class="eanBlock" name="ean">{{ item.ean }}</div>
            <div class="articleCodeBlock" name="articleCode">{{ item.articleCode }}</div>
            <div class="articleColorBlock" name="color">{{ item.Color }}</div>
            <div class="priceBlock" name="price">{{ item.Price }}</div>
            <div class="buttons">
                <button id="addLabel" class="ui-btn ui-btn-inline btn btn-success" type="submit">Label Aanvragen</button>
            </div>
        </div>
    </div>  
</form>

JS：

$(document).ready(function(){

    $('.btn-success').on('click',function(){
        console.log('The addButton is clicked.');
        var $form = $(this).parents('form');
        var data = $form.serialize();
        console.log('Form '+ $form.attr('id'));
        console.log(data)
    });

    //when the form is submitted
    $('form').submit(function (evt) {
       evt.preventDefault(); //prevents the default action
    });
})

Answer 1

我解决了我的问题，感谢CBroe给出的提示，我确实采取了错误的方法。我改变了代码。这是解决方案：

HTML：

<div id='{{ "item-"+item.articleNr }}' class="itemTemplate">
    <div class="thumb">
        <img style="width: 200px;height: 200px;" src="{{ url_for('static',filename='images/'+item.image) }}">
    </div>
    <div class="contentWrapper">
        <div class="content" class="itemContent">
            <label class="articleNameBlock" name="articleName">{{ item.articleName }}</label>
            <div class="articleNrBlock" name="articleNr">{{ item.articleNr }}</div>
            <div class="eanBlock" name="ean">{{ item.ean }}</div>
            <div class="articleCodeBlock" name="articleCode">{{ item.articleCode }}</div>
            <div class="articleColorBlock" name="color">{{ item.Color }}</div>
            <div class="priceBlock" name="price">{{ item.Price }}</div>
            <div class="buttons">
                <button class="ui-btn ui-btn-inline btn btn-success" type="submit">Label Aanvragen</button>
            </div>
        </div>
    </div>  
</div>

JS：

$('.btn-success').on('click',function(){
    console.log('The addButton is clicked.');
    var $item = $(this).closest('.itemContent');
    var $elements = $item.children();
    var x = $item.children('.articleNameBlock')[0].innerHTML;
    var articleName = $elements[0].innerHTML;
});

Answer 2

首先我会改变

var $form = $(this).parents('form');

到

var $form = $(this).closest('form');

，因为parents（）遍历DOM并选择所有匹配的元素。

其次我要改变

$('form').submit(function (evt)

到

$(document).on("submit", "form", function()

确保正确选择表单元素。

我还会检查我的HTML，如果格式正确，表单标签内的表单标签不起作用。

提交表单没有值

2 个答案: