0

submit_tag がクリックされたときに、jQuery に 2 つのフォームのいずれかを送信させようとしています。テキストの存在に基づいて条件を設定しているため、テキストが含まれているフォームがあれば、そのフォームを送信してください。私のフォームは次のようになります

<div class="container margin50">
 <div class="row">
  <div class="span6 offset3 cf formBackground">
   <h1>CoverArt Finder</h1>

   <h3>Search Movies</h3>
   <%= form_tag main_results_path, :method => "get", :id => 'submitMovie' %>
   <%= text_field_tag 'search', nil, :placeholder => 'Enter Film Name Here.....', :id => 'movieForm' %>

   <h1>OR<h1>

   <h3>Search Albums</h3>
   <%= form_tag album_album_results_path, :method => "get", :id => 'submitAlbum' %>
   <%= text_field_tag 'search', nil, :placeholder => 'Enter Artist Name here.....', :id => 'albumForm' %>
   <%= submit_tag "search", :id => 'submitForm' %>

   </div>
  </div>
 </div>

HTML

<div class="container margin50">
 <div class="row">
  <div class="span6 offset3 cf formBackground">
   <h1>CoverArt Finder</h1>
   <h3>Search Movies</h3>
    <form id="submitMovie" method="get" action="/main/results" accept-charset="UTF-8">
     <input id="movieForm" type="text" placeholder="Enter Film Name Here....." name="search">
    <h1>OR</h1>

    <h3>Search Albums</h3>
    <input id="albumForm" type="text" placeholder="Enter Artist Name here....." name="search">
    <input id="submitForm" type="submit" value="search" name="commit">
    </form>
    </div>
   </div>
  </div>

また、両方が入力されている場合はエラー メッセージを表示したいと考えています。もう 1 つの質問は、テキスト イベントはプレースホルダーをテキストとしてカウントするかどうかです。もしそうなら、テキストイベントは機能しませんよね？

これまでのところ、これが間違っていることはわかっています。誰かが私を正しい方向に向けますか？

$(document).ready(function() {
 $('#submitForm').click(function(e) {
   e.preventDefault();
    if ($('#submitMovie').text().length > 0) 
    $('#submitMovie').submit();
   else if
   ($('#submitAlbum').text().length > 0)
   $('#submitAlbum').submit();
   else
    ($('#submitAlbum' + 'submitMovie').text().length > 0)
   alert("Cant fill in both forms");

  });
 });

また、HTML を投稿したところ、albumSearch のフォーム ID が存在しないことに気付きました。なぜこれが起こるのでしょうか？

4

1 に答える 1

2

フォームではなく、入力にテキストが存在するかどうかを確認する必要があります。

フィドル: http://jsfiddle.net/rdqch/1/

$('#submitForm').click(function(e) {

    var movie = false,
        album = false,
        $movieForm = $('#movieForm'),
        $albumForm = $('#albumForm');

    // Prevent the default action of the submit button
    e.preventDefault();

    if ($movieForm.val().length) {
        movie = true;
    }

    if ($albumForm.val().length) {
        album = true;
    }

    if (movie && album) {
        alert('Can\'t fill in both forms.');
    } else if (movie) {
        $movieForm.closest('form').submit();
    } else if (album) {
        $albumForm.closest('form').submit();
    }

});

// This is just for demonstration   
$('#submitMovie').on('submit', function (event) {
    event.preventDefault();
    alert('We have submitted a movie search');
});

$('#submitAlbum').on('submit', function (event) {
    event.preventDefault();
    alert('We have submitted an album search');
});

1 つの注意: それはあなたの質問の範囲を超えており、あなたはすでに私より先を行っているかもしれませんが、インタラクション自体を自動的に修正できるのであれば、両方のフォームを使用できないとユーザーに伝える理由はありません。検索ボックスの 1 つに入力すると、現在他のボックスにあるものはすべて消去されます。

例: http://jsfiddle.net/rdqch/2/

于 2012-12-31T16:19:50.923 に答える