title: Submitting form_tag as ajax either gives UnknownFormat error or renders js as html
body: <p>I have a Stripe form and I keep running into errors when I try to submit it with Ajax.</p>
  
  <p>Full code down below, but the line I've been trying to adjust is the <code>form_tag</code> line. With this:</p>
  
  <pre><code>&lt;%= form_tag(buy_path(@product.id), id:'payment-form', authenticity_token: true, remote: true) do %&gt;
  </code></pre>
  
  <p>I get this error:</p>
  
  <pre><code>ActionController::UnknownFormat in UsersController#buy
  ActionController::UnknownFormat
  
  respond_to do |format|  &lt;= HIGHLIGHTED
    format.js
  end
  </code></pre>
  
  <p>But when I specify <code>js</code> format:</p>
  
  <pre><code>&lt;%= form_tag(buy_path(@product.id, format: :js), id:'payment-form', authenticity_token: true, remote: true) do %&gt;
  </code></pre>
  
  <p>The js file is just rendered as plain html. As in, the browser just prints the contents: </p>
  
  <pre><code>$("html").hide();
  </code></pre>
  
  <hr>
  
  <p>Here's my full code. When I remove the inline javascript, <code>buy.js.erb</code> is rendered as normal, so there appears to be something added with javascript that's making the browser unable to process the request as ajax.</p>
  
  <p><strong>buy.html.erb</strong></p>
  
  <pre><code>&lt;!-- The form. Fields are inserted into #card-element with JS --&gt;
  &lt;%= form_tag(buy_path(@product.id), id:'payment-form', authenticity_token: true, remote: true) do %&gt;
      &lt;div id="card-element"&gt;
        &lt;!-- A Stripe Element will be inserted here. --&gt;
      &lt;/div&gt;
    &lt;button id="submit-card"&gt;Submit Payment&lt;/button&gt;
    &lt;div id="cancel-bid"&gt;Cancel&lt;/div&gt;
  &lt;% end %&gt;
  
  &lt;script type="text/javascript"&gt;
  
    var stripe = Stripe('&lt;%= key %&gt;');
    var elements = stripe.elements();
  
    // Create an instance of the card Element.
    var card = elements.create('card', {style: style});
  
    // Add an instance of the card Element into the `card-element` &lt;div&gt;.
    card.mount('#card-element');
  
    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });
  
    // Create a token or display an error when the form is submitted.
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function(event) {
      event.preventDefault();
  
      stripe.createToken(card).then(function(result) {
        if (result.error) {
          // Inform the customer that there was an error.
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          // Send the token to your server.
          stripeTokenHandler(result.token);
        }
      });
    });
  
    function stripeTokenHandler(token) {
      // Insert the token ID into the form so it gets submitted to the server
      var form = document.getElementById('payment-form');
      var hiddenInput = document.createElement('input');
      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', 'stripeToken');
      hiddenInput.setAttribute('value', token.id);
      form.appendChild(hiddenInput);
  
      // Submit the form
      form.submit();
    }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>users_controller/rb</strong></p>
  
  <pre><code>def buy
    respond_to do |format|
      format.js
    end
  end
  </code></pre>
  
  <p><strong>buy.js.erb</strong></p>
  
  <pre><code>$("html").hide();
  </code></pre>