Question

我正在尝试使用ajax表单来验证用户尝试注册时是否已使用用户名。

显然，常规表格由常规表格组成有名称，用户名，电子邮件和密码等普通字段。

对于此用户名部分，我想添加要验证的按钮。

但是我不知道如果我和普通的帖子形式分开做的话会怎么样。

这变成了什么？

<%= 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代码

<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提交。您可以使用远程选项。

You can check this guide on how to use it.

如何在表格中放置ajax表格？

2 个答案: