Javascript 提交时的表单没有值
我在页面上有多个表单,它们是用Jinja2和Flask生成的,每个表单都有自己唯一的id,每个表单中都有一个按钮。我想单击按钮并获取按钮实际所在表单的值。但是,当我尝试序列化表单时,它是空的。所有的Javascript 提交时的表单没有值,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我在页面上有多个表单,它们是用Jinja2和Flask生成的,每个表单都有自己唯一的id,每个表单中都有一个按钮。我想单击按钮并获取按钮实际所在表单的值。但是,当我尝试序列化表单时,它是空的。所有的console.log行都工作正常,每个按钮确实检索到它所在的表单 HTML: <form id='{{ "item-"+item.articleNr }}' class="itemTemplate"> <div class="thumb"> <i
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>
首先,我要换一个房间
var$form=$(this.parents('form')代码>
到
var$form=$(this).closest('form')代码>
as parents()遍历DOM并选择所有匹配的元素
第二,我要换衣服
$('form')。提交(函数(evt)
到
$(文档)。在(“提交”、“表单”和“函数”)上
以确保正确选择表单元素
我也会检查我的html是否格式正确,表单标记中的表单标记不起作用。我解决了我的问题,多亏了给出的提示,我确实采用了错误的方法。我更改了代码。以下是解决方案:
HTML:
剪切这两行:-var$form=$(this).parents('form');var data=$form.serialize();
tovar data=$(this.parent().find('form').serialize();
表单中唯一的表单元素是submit按钮。那么,您希望在这里发送什么实际数据?或者您是否有这样的印象,即一旦添加了name属性(这是无效的HTML顺便说一句,div没有name属性),div就会变成表单元素?当然不是这样。如果你想实际提交值,你需要使用表单元素,如input或textarea。要么处理按钮单击,要么处理表单提交。处理两者都会造成混乱。处理表单提交的方式更简洁。正如CBroe指出的,你的表单中没有输入。它会显示一些信息信息,但不在将被序列化以提交表单的控件中。您的代码与HTML不匹配。示例中没有“itemContent”类的元素。但是,有“item content”。这是一种更好的方法,尽管由于您使用的是jquery,您可以只执行.HTML()
而不是[0].innerHTML
@ADyson谢谢,我在课堂上编辑了拼写错误。
$(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
});
})
<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>
$('.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;
});