動的にjQueryが.append（）の後にフォームの入力を追加しない

Question

私は、追加入力を追加しますが、投稿フォームは入力データを追加しません。

どうすればいいですか、どうもありがとうございました！

HTMLコード

<form class="form_a" action="test_a.php" method="POST" > 
    <div class="language"> 
     <div class="append"> 

     </div> 
     <button type="button" class="add">add Button</buttond> 

     <input type="submit" value="click me submit form"> 
    </div> 
</form> 

Javascriptコード

<?php 
    print_r($_POST); 
?> 

Answer 1

まず

$('.language .add').click(function(){ 
    $('.language .append').append(
     '<input name="language[]" class="form-control" value="test">' 
    ); 
}); 

PHPコードは、[送信]ボタンを取得するには、正しいjQueryのセレクタを使用する必要があります。

$('.language .append').append(\ 
    '<input name="language[]" class="form-control" value="test">'\ 
); 

$('input[type=submit]').click(function(e){ 
 
    e.preventDefault(); 
 
    $('.language>.append').append('<input name="language[]" class="form-control" value="test">'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<form class="form_a" action="test_a" method="POST" > 
 
    <div class="language"> 
 
    <div class="append"> 
 

 
    </div> 
 
    <label class="add"></label> 
 

 
    <input type="submit" value="click"> 
 
    </div> 
 
</form>

---

注：それはあなたが任意の改行をエスケープする必要があります - あなたがPHPでできるよう

次は、コード内の改行を持つことはできませんID属性を使用して[送信]ボタンをトラップすることをお勧めします（ただし、IDとしてsubmitという単語は使用できません）。何かのように：

<input id="btnSubmit" type="submit" value="click"> 


$('#btnSubmit').click(function(){ 
    $('.language>.append').append('<input name="language[]" class="form-control" value="test">'); 
}); 

注：解答例スニペットでe.preventDefault()はデフォルトのことをやって、あなたはDOMの変更を見る機会を得る前にページから移動するから、FORM要素を防ぐためです。