提出フォームには値がありません

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

まず私は

を変更します

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

両親として

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

から10

（）は、DOMをトラバースし、一致するすべての要素を選択します。

第二に、私は、フォーム要素が正しく選択されていることを確認するために$(document).on("submit", "form", function()に

に

を

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

を変更すると思います。

整形式である場合はHTMLをチェックし、フォームタグ内のフォームタグは機能しません。

Answer 2

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; 
});