javascript - Rails-jQuery。提交后如何重置表格？

Question

我一直在谷歌搜索，但找不到任何解决方案。 如何重置表单，提交后清除字段的输入？

当我使用正确的输入/电子邮件单击“提交”时，表单被重置并调用“POST”操作，但看起来表单在“POST”操作之前被重置，这意味着我没有提交任何内容。如何清除输入、重置表单并实际提交输入？

请检查下面我的users.js、users_controller.rb、new.html.erb 提前致谢。

users.js

function isValidEmailAddress(emailAddress) {
  var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
  return pattern.test(emailAddress);
};

$(function () {
  $("form").submit(function (event) {
      var email = $("input#user_email").val();
      if (email == "") {
        $(".subscribe-message").html('<i class="fa fa-warning"></i> You must enter a valid email address.').show();
      } 
      else if (!isValidEmailAddress( email )) {
        $(".subscribe-message").html('<i class="fa fa-warning"></i> Email address is not valid').show();
      }
      else {
        $(".subscribe-message").html('<i class="fa fa-check"></i> We will be in touch soon!').show();
        $("form")[0].reset();
          }
   });
});

new.html.erb

<%= form_for @user, remote: true do |f| %>
  <p>
    <%= f.text_field :email %>
  </p>

  <p>
    <%= f.submit :Submit %>
  </p>
<% end %>
<div></div>

users_controller.rb

class UsersController < ApplicationController

  def new
    @users = User.all
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    respond_to do |format|
      format.html { redirect_to '/' }
      format.js
      end   
    @user.save
  end

private

  def user_params
    params.require(:user).permit(:email)
  end

end

Answer 1

您需要首先实际发布数据。查看 jQuery 的 $.post() 函数。在回调中，您可以更改成功/错误消息。

示例:

function isValidEmailAddress(emailAddress) {
  var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
  return pattern.test(emailAddress);
};

$("#form").submit(function(e) {
  e.preventDefault(); // handle the post ourselves

  var $form = $(this),
      email = $("input#user_email").val();

  if (email == "") {
    $(".subscribe-message").html('<i class="fa fa-warning"></i> You must enter a valid email address.').show();
    return false;
  } 
  else if (!isValidEmailAddress( email )) {
    $(".subscribe-message").html('<i class="fa fa-warning"></i> Email address is not valid').show();
    return false;
  }

  $.post($form.attr("action"), $form.serialize(), function(response) {
    if(response.status == 'OK') { // assuming there is a "status" object in response in JSON format
      $(".lj-subscribe-message").html('<i class="fa fa-check"></i> We will be in touch soon!').show();
      $("form")[0].reset();
    } else {
      $(".subscribe-message").html('<i class="fa fa-warning"></i>' + response.status).show();
    }
  }, "json"); // make sure the response TYPE matches here
});

您现在唯一需要的是处理 POST 数据并以 JSON 格式输出结果。