0

我试图让 jQuery 在单击 submit_tag 时提交两种表单之一。我的条件是基于文本的存在，所以无论哪种形式有文本，然后提交那个。我的表格看起来像这样

<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>

如果两者都填写，我还想显示一条错误消息。这里的另一个问题是：文本事件是否将占位符计为文本？如果是这样，文本事件将不起作用，是吗？

到目前为止，我已经提出了这个，我知道这是错误的；有人会指出我正确的方向吗？

$(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');
});

注意事项：我知道这超出了您的问题范围，您可能已经领先于我，但没有理由告诉您的用户，如果您可以自动修复交互，他们不能同时使用这两种形式。只需在其中一个搜索框中输入任何内容，即可删除另一个搜索框中当前的任何内容。

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

于 2012-12-31T16:19:50.923 回答