ボタン

Question

に対して形で入力値が、私はこれと同様の形式有するなさい：フォーム内のさまざまなフィールドが事前に知られていないと変更することができ

<form class="submission-form" method="POST" action="/post/create/"> 
    <input type="text" name="title"> 
    <textarea name="post_content"></textarea> 
    <select name="visibility" class="form-control"> 
    <option value="1">Public</option> 
    <option value="2">Private</option> 
    </select> 
    <input class="submit-button" type="button" value="Publish"> 
</form> 

と、処理が必要なすべてのフォームにsubmission-formクラスがあり、クラスがsubmit-buttonのボタンが含まれているということが知られています。

input.submit-buttonにイベントリスナーを追加しようとしています。イベントリスナーは、そのフォームに含まれるフォームを走査し、すべてのフィールドを見つけてオブジェクトを作成します。

{ 
    title: "My first post", 
    post_content: "Hello there!", 
    visibility: 1 
} 

がどのように私はこれをやって行く必要があります。たとえば、上記の場合には、作成したオブジェクトは、次のようになりますか？

Answer 1

入力を介して反復、TEXTAREAと要素を選択し、要素の名前と値の特性を持つオブジェクトを作成する：

$('.submit-button').on('click', function() { 
 
    var o = {}; 
 
    $(this).closest('form') 
 
    .find('input, textarea, select') 
 
    .not(':button') 
 
    .each(function() { 
 
     o[$(this).attr('name')] = $(this).val() 
 
    }); 
 
    console.log(o); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="submission-form" method="POST" action="/post/create/"> 
 
    <input type="text" name="title" /> 
 
    <textarea name="post_content"></textarea> 
 
    <select name="visibility" class="form-control"> 
 
    <option value="1">Public</option> 
 
    <option value="2">Private</option> 
 
    </select> 
 
    <input class="submit-button" type="button" value="Publish" /> 
 
</form>

参照

.closest()

.not()

.each

Answer 2

あなたはserializeArray()を使用して、目的のオブジェクトを返すために、そのアレイ上reduce()を使用することができます。

$("form").submit(function(event) { 
 
    var data = $(this).serializeArray().reduce(function(r, e) { 
 
    r[e.name] = e.value; 
 
    return r; 
 
    }, {}) 
 
    console.log(data) 
 
    event.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="submission-form"> 
 
    <input type="text" name="title"> 
 
    <textarea name="post_content"></textarea> 
 
    <select name="visibility" class="form-control"> 
 
    <option value="1">Public</option> 
 
    <option value="2">Private</option> 
 
    </select> 
 
    <input class="submit-button" type="submit" value="Publish"> 
 
</form>

Answer 3

使用serializeArray()作成し、それらを名前と値のペアとループのためのオブジェクトの配列は、単一のオブジェクトを作成します。

$('form').submit(function(e){ 
 
    e.preventDefault(); 
 
    var obj = $(this).serializeArray() 
 
    
 
    var final= {}; 
 
    $.each(obj, function(index,object){ 
 
    
 
     final[object.name] = object.value; 
 
    
 
    }); 
 
    console.log(final); 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="submission-form" method="POST" action="/post/create/"> 
 
    <input type="text" name="title"> 
 
    <textarea name="post_content"></textarea> 
 
    <select name="visibility" class="form-control"> 
 
    <option value="1">Public</option> 
 
    <option value="2">Private</option> 
 
    </select> 
 
    <input class="submit-button" type="submit" value="Publish"> 
 
</form>