我怎么能把ajax表单内张贴表单

Question

我试图有ajax的形式，以验证是否如果用户名已经采取当用户试图注册。

显然，规则表单是由规则post表单组成的。
其中包含普通字段，如名称、用户名、电子邮件和密码。

对于Username部分，我想添加一个按钮来验证。

但是我不知道如果我把它从常规的post表单中分离出来是怎么回事。

变成了这样?

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
    <%= f.text_field :username, :placeholder => 'username' %></div>
    <%= form_for(current_user, :url => {:controller => "users", :action => "username_check" }, :remote => true) do |f| %>
        <button type="submit" class="btn">Check if availavle</button>
    <% end %>
    <div class="username_check_message">
        <%= render :partial => "users/username_check_message" %>
    </div>
    <%= button_tag( :class => "btn btn-large btn-primary") do %>
        Sign Up
    <% end %>        
<% end %>

Answer 1

你应该显示一个link代替内部表单，只是绑定onclick事件的链接与js，在其中你可以创建ajax函数。

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
  <%= f.text_field :username, :placeholder => 'username' %>
  <a href="javascript:;" class="btn" id="chk">Check if available</a>
  <div class="username_check_message">
    <%= render :partial => "users/username_check_message" %>
  </div>
  <%= button_tag( :class => "btn btn-large btn-primary") do %>
    Sign Up
  <% end %>
<% end %>

JS代码绑定click事件

<script type="text/javascript">
  $('#chk').click(function() {
      $.ajax({
          url: '/users/username_check',
          type: 'get',
          data: 'uname=' + $('#username').val(), // where 'username' is id of username text_field
          dataType: 'json',
          success: function(data) {
              if(data.valid == 'true') {
                  $('.username_check_message').text('Valid');
              } else {
                  $('.username_check_message').text('Invalid');
              }
          }
      });
  });
</script>

Answer 2

我猜你是试图提交一个使用ajax。您可以使用remote选项。