title: How to get a modal form to post to MVC action
body: <p>I have created a modal pop-up login using this tutorial</p>
  
  <p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/progressively-enhance-a-form-link-to-modal-form/" rel="nofollow" title="Modal Form">Modal Form Tutorial</a></p>
  
  <p>Now this gets me as far as the modal form popping up.  Nothing happens when I click on my submit button (the normal form works fine when not in a modal), so my question is two-fold :-</p>
  
  <ol>
  <li>How do I get the submit to post to my Login action in my account controller.</li>
  <li>How do I get any validation errors to show up in the modal?</li>
  </ol>
  
  <p>This is the script that the tutorial produces :-</p>
  
  <pre><code>(function ($) {
  var alog = window.console ? console.log : alert;
  
  $.fn.popUpForm = function (options) {
      // REQUIRE a container
      if (!options.container) { alert('Container Option Required'); return; }
  
      // Give us someplace to attach forms
      $("#popUpHide").length || $('&lt;div id="popUpHide" /&gt;').appendTo('body').css('display', 'none');
  
      // Defaults and options
      var defaults = {
          container: '',
          modal: true,
          resizeable: false,
          width: 440,
          title: 'Website Form',
          beforeOpen: function (container) { },
          onSuccess: function (container) { },
          onError: function (container) { }
      };
      var opts = $.extend({}, defaults, options);
  
      this.each(function () {
          var $this = $(this);
  
          if (!$this.is('a') || $this.attr('href') == '') { return; }
  
          var SRC = $this.attr('href') + ' ' + opts.container;
  
          var formDOM = $("&lt;div /&gt;").load(SRC, function () {
              $('#popUpHide').append(formDOM);
  
              $(opts.container).dialog({
                  autoOpen: false,
                  width: opts.width,
                  modal: opts.modal,
                  resizable: opts.resizeable,
                  title: opts.title
              });
  
              $(opts.container).bind("submit", function (e) {
                  e.preventDefault();
                  ajaxSubmit($this[0]);
              });
  
              $this.bind("click", function (e) {
                  e.preventDefault();
                  opts.beforeOpen.call($this[0], opts.container);
                  $(opts.container).dialog('open');
              });
          });
  
      });
  
      function ajaxSubmit(anchorObj) {
          console.log(anchorObj);
          var form = $(opts.container);
          var method = form.attr('method') || 'GET';
  
          $.ajax({
              type: method,
              url: form.attr('action'),
              data: form.serialize(),
              success: function () {
                  $(opts.container).dialog('close');
                  opts.onSuccess.call(anchorObj, opts.container);
              },
              error: function () {
                  opts.onError.call(anchorObj, opts.container);
              }
          });
      }
  }
  })(jQuery);
  </code></pre>
  
  <p>Thanks for any ideas,</p>
  
  <p>Rich</p>