-2

この質問はJqueryと密接に関連しています-フォームから一部の値のみを送信します。私はフォームを持っています：

<form accept-charset="UTF-8" action="/filter" data-remote="true" method="get">
  <div>
  <div>
    <h2 class="sort">Sort</h2>
    <select class="checkable" id="sort" name="sort">
         <option value='v'>Rank</option>
         <option value='n'>Alphabetical</option>
    </select>
  </div>
  <div>
    <h2 class="tag">Categories</h2>
    <ul>
      <li>
        <input name="category[a]" type="hidden" value="0" />
        <input class="checkable" id="category_a" name="category[a]" type="checkbox" value="1" />
        <span>a</span>
      </li>
      <li>
        <input name="category[adfsadf  fasdf]" type="hidden" value="0" />
        <input class="checkable" id="category_adfsadf  fasdf" name="category[adfsadf  fasdf]" type="checkbox" value="1" />
        <span>adfsadf  fasdf</span>
      </li>
      <li>
        <input name="category[another]" type="hidden" value="0" />
        <input class="checkable" id="category_another" name="category[another]" type="checkbox" value="1" />
        <span>another</span>
      </li>
      <li>
        <input name="category[another tag]" type="hidden" value="0" />
        <input class="checkable" id="category_another tag" name="category[another tag]" type="checkbox" value="1" />
        <span>another tag</span>
      </li>
    </ul>
  </div>
</form>

チェックされたカテゴリのみをajax経由で送信したい。これは私が現在フォームからすべてを送信しなければならないものです：

 $('.checkable').live('change',
   function() {
     $(this).parents('form:first').submit();
 });

これはうまく機能しますが、カテゴリの数が非常に多い場合、リクエストは不必要に長くなります。このための送信関数を作成する方法がわかりません。または、別のアプローチの方が良いでしょうか？前もって感謝します！

- - - 解決 - - -

代わりにajaxルートを使用

$('.checkable').live('change',
function() {

var dataString = 'sort='+ $('#sort').val();
$('input[type=checkbox]').each(function () {
    if($(this).is(":checked")) {
      dataString += '&'+$(this).prop('name')+'=1';
    }
});
alert
$.ajax({  
  type: "GET",  
  url: "/filter",  
  data: dataString,  
  success: function() {  
  }  
});

}）;

4

1 に答える 1

1

フォーム全体を送信する代わりに、このリンクを確認してください。ajax投稿を行い、送信するフォーム要素のみを含めてください。 http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

これがサンプル投稿です。チェックされたセレクターを使用して、チェックされた入力のみを簡単に送信できます。

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
//alert (dataString);return false;  
$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});  
return false;
于 2012-04-18T22:18:39.187 に答える