Question

I am trying to get jQuery to submit one of two forms when a submit_tag is clicked. I am basing my conditions on the presence of text, so whichever form has text in then submit that one. My forms looks like this

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

I also want to show an error message if both are filled in. Another question here is: does the text event count the placeholder as text? If so, the text event won’t work, will it?

So far I have come up with this, which I know is wrong; would someone point me in the right direction?

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

  });
 });

Also I have just noticed from posting my HTML is that the form id for albumSearch is not present. Any ideas why this would be happening?

Answer 1

You should check for the presence of text in your inputs, not in your forms.

Fiddle: 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');
});

One note: I know it’s beyond the scope of your question and you may have already been ahead of me, but there’s no reason to tell your user they can’t use both forms if you could just make the interaction fix itself automatically. Just have any typing into one of the search boxes erase anything currently inside the other one.

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