2

私のDjangoアプリでは、Twitterのブートストラップラジオボタンを使用したいと思います。次に、オブジェクトを作成するために、これらのボタンの値を投稿したいと思います。

これが私のボタンです：

  <div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn" name="supporting">Team1</button>
  <button type="button" class="btn" name="supporting">Team2</button>
  </div>


  <div class="span6 btn-group ib" data-toggle="buttons-radio">
       <button type="button" class="btn btn-primary active" name="style">relaxed</button>
       <button type="button" class="btn btn-primary active" name="style">strict</button>
  </div>



  <input type="submit" value="create your match">

これらのラジオボタンから情報を取得し、ビューでそれに一致するオブジェクトを作成したいと思います。

   def test(request):
       user=request.user
       if request.method == 'POST':
       style = request.POST['style']
       supporting = request.POST['supporting']
       match = Match.objects.create(user=user, style=style, supporting=supporting)
     return HttpResponse(test)

JavaScriptがよくわからないので、ボタンから値を取得する方法がわかりませんでした。

次に、私は使用する必要があると思います：

 $.post('/sportdub/points_dub/', {'style': style , 'supporting': supporting});

しかし、スタイルとサポートがボタンの値に対応し、ユーザーがボタンをクリックしたときにのみ投稿するようにするにはどうすればよいですか？

ご助力ありがとうございます。

4

2 に答える 2

3

私の最後の答えをとって、あなた自身のコードを使用しましょう...あなたのHTMLには次のようなものがあります：

<form action="/sportdub/points_dub/" method="post" class="form-horizontal">

  <div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" class="btn" name="supporting">Team1</button>
    <button type="button" class="btn" name="supporting">Team2</button>
  </div>

  <div class="span6 btn-group ib" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary active" name="style">relaxed</button>
    <button type="button" class="btn btn-primary active" name="style">strict</button>
  </div>

  <input type="submit" value="create your match" />

</form>

ブロックごとに1つの非表示フィールドを追加する必要があります。この場合、2を追加します。フォームは次のように一致します。

<form action="/page" method="post" class="form-horizontal">

  <input type="hidden" id="supporting_team" value="" />
  <input type="hidden" id="supporting_type" value="" />

  <div class="btn-group supporting_team" data-toggle="buttons-checkbox">
    <button type="button" class="btn" name="supporting">Team1</button>
    <button type="button" class="btn" name="supporting">Team2</button>
  </div>

  <div class="span6 btn-group ib supporting_type" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary active" name="style">relaxed</button>
    <button type="button" class="btn btn-primary active" name="style">strict</button>
  </div>

  <input type="submit" value="create your match" />

</form>

ボタンがクリックされたときにこれらの非表示フィールドの値を設定するjQueryヘルパーを追加します。

// whenever a button is clicked, set the hidden helper
$(".supporting_team .btn").click(function() {
    $("#supporting_type").val($(this).text());
}); 
$(".supporting_type .btn").click(function() {
    $("#supporting_team").val($(this).text());
});

create your matchフォーム全体をクリックするactionと、フォームの属性として設定されたページに投稿されます。これ以上何もする必要はありません...

postjavascriptを呼び出して手動で送信する場合は、フォームが再度送信されないようにする必要があります。これはinput type="submit"要素タスクであるため、例のように1つずつではなく、投稿を呼び出してフォームデータ全体をシリアル化できます。 ..

お気に入り：

// when the form is submited...
$("form").submit(function() {

   // submit it using `post`
   $.post('/sportdub/points_dub/', $("form").serialize()); 

   // prevent the form to actually follow it's own action
   return false; 

});

動的コードでは、これらの変数は次のようになります。

supportingTeam = request.POST['supporting_team']
supportingType = request.POST['supporting_type']

これは、手動でフォーム送信スクリプトを使用しているかどうかに関係なく、有効になります...

于 2012-11-12T22:15:09.363 に答える
2

最近のコメントの後、HTMLで提供されている入力ラジオボタンを使用してみてください。ボタンのグループ化、入力のラベルの作成、クリックされたものの取得は非常に簡単です。

HTMLを次のように少し変更します（ラベルのfor属性を使用すると、ユーザーはボタンを直接クリックする代わりに、ラベルをクリックしてラジオボタンを選択できます）。

  <div>
    <input id="team1" type="radio" name="supporting" value="Team1" /><label for="team1">Team 1</label>
    <input id="team2" type="radio" name="supporting" value="Team2" /><label for="team2">Team 2</label>
  </div>
  <div>
    <input id="relaxed" type="radio" name="style" value="relaxed" /><label for="relaxed">Relaxed</label>
    <input id="strict" type="radio" name="style" value="strict" /><label for="strict">Strict</label>
  </div>

これを使用して、どの選択が行われたかを取得できます。

$('input[name="supporting"]').filter(':checked').val();
$('input[name="style"]').filter(':checked').val();

それでもボタンを使用したい場合activeは、クリックするとクラスがラジオボタンに追加されます。ボタンのテキストを取得するには、次のことを試してください。

$('button[name="supporing"]').filter('.active').text();
$('button[name="style"]').filter('.active').text();

この値を非表示の入力に入れるには、次のようにします。

$('#hiddenInput1').val($('button[name="supporting"]').filter('.active').text());
$('#hiddenInput2').val($('button[name="style"]').filter('.active').text());
于 2012-11-12T21:14:20.070 に答える