我在页面上有多个表单,它们是用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
});
})
切以下两行: - '变量$形式= $(本)。家长( '形式');无功data = $ form.serialize();'var var data = $(this).parent()。find('form')。serialize();' –
你的表单中唯一的表单元素是submit按钮。那么你期望在这里发送什么样的实际数据?或者,当你添加一个名称属性(这是无效的HTML btw。,div没有名称属性)时,你是否觉得div会成为表单元素?当然不是这样。如果您想实际提交值,则需要使用表单元素(如input或textarea)。 – CBroe
或者处理按钮点击或表单提交。处理两者都是混淆的秘诀。恕我直言,处理表单提交更整洁。正如CBroe指出的那样,你的形式没有任何投入。它显示了一些信息,但不包括将被序列化以提交表单的控件。 – ADyson