Question

女士们，先生们，你好。

当前，我正在尝试创建网站中所有表单的事件监听器，但是...（我是后端开发人员，因此前端对我来说是噩梦），所以现在我尝试使用JavaScript （纯Vanilla JS），没有任何框架，或者什么也没有……我使用ES5。

所以我要做的是发送我们拥有的不同名称require 'test_helper' class UsersControllerTest < ActionController::TestCase include Warden::Test::Helpers include Devise::Test::ControllerHelpers setup do # https://github.com/plataformatec/devise/wiki/How-To:-Test-with-Capybara # @user = users(:admin) # sign_in @user end teardown do Warden.test_reset! end test "login as admin" do @user = users :admin sign_in @user get :dashboard assert_redirected_to admin_dashboard_path end end，但是我为此感到非常努力，因为我正在使用<form>和 < em>我只是想出 ，这是不正确的，因为它只会选择一个querySelector('form')，因此正确的方法必须使用此<form>，但是“标准”存在另一个问题在我公司，我们没有定义表单的名称，因此我们用querySelectorAll('form')“定义”表单，目前我们有约32个无名action='/searchExample，并且我们只有两种表单，名称分别为<form>和{ {1}}（仅适用于我们定义名称的人）

login_form

如果有人可以帮助我解决此特殊情况，我将非常感谢，因为我不想为每个registration创建32个function formSubmitTrack() { var formName = ''; var form = document.querySelector('form'); form.addEventListener('submit', function() { formName = form.getAttribute('action') ? form.getAttribute('action') : form.getAttribute('name'); var data = { event: 'e_formSubmit', formName: formName }; send(data); });，例如，此代码将适用于一种形式：

所以我正在尝试这一步骤：（第1步，获取值）

function form1...32()

所以第2步是在用户单击表单时触发eventListener（'click'），这是我的代码，但是我对<form>的这部分感到困惑：

function formSubmitTrackAll() {
      var form = document.querySelectorAll('form');

      for (let i = 0; i < form.length; i++) {
          const element = form[i];
          var formName = element.name;
          var formAction = element.getAttribute('action');

          console.log(formName);
          console.log(formAction);

          if(formName === ""){
              var data = {
                  event: 'e_forSubmit',
                  formName: formAction,
              }
          } else {
            var data = {
                  event: 'e_forSubmit',
                  formName: formName,
              }
          }

          send(data);
      }
  }

并且我使用此HTML代码进行测试

eventListener

感谢您的耐心等候。

Answer 1

我不确定您在问什么。

function formSubmitTrackAll() {
      var form = document.querySelectorAll('form');

      for (let i = 0; i < form.length; i++) {
          const element = form[i];
          var formName = element.name;
        

          console.log(formName);
       

          if(formName === ""){
              form[i].addEventListener('click', function() {
                var formAction = element.getAttribute('action');
                var data = {
                    event: 'e_forSubmit',
                    formName: formAction,
                }
                console.log(data);
              });

          } else {
            form[i].addEventListener('click', function() {
               var formAction = element.getAttribute('name');
                var data = {
                    event: 'e_forSubmit',
                    formName: formAction,
                }
                  console.log(data);
              });
          }

          //send(data);
      }
  }
  formSubmitTrackAll();

<form action="something">
    <input type="email"></input> 
    <button class="btn btn-safe col-xs-6"></button>
</form>
<br><br>

<form name='registration'>
    <button class="btn btn-security col-xs-6"></button>
</form>

Answer 2

您需要将send(data)调用置于click事件处理程序的内部，而不是外部。按照目前的情况，您正在调用send(data)而不是循环浏览表单。

Answer 3

我不知道我是否能正确解释您的问题，但我了解您需要在发送表格时，在发送表格之前，根据您提到的条件获取事件和名称。我认为表单将使用POST发送，因此您可以：

获取数据
创建隐藏类型输入并为其分配相应的数据值
将这些输入附加到表单上
发送表格

请考虑以下示例

具有这套表格

<form name="login_form"><button type="submit">Send</button></form>
<form name="registration"><button type="submit">Send</button></form>
<form action="action_name1"><button type="submit">Send</button></form>
<form action="action_name2"><button type="submit">Send</button></form>
<form action="action_name3"><button type="submit">Send</button></form>
<form action="action_name4"><button type="submit">Send</button></form>
<form action="action_name5"><button type="submit">Send</button></form>

给出这种逻辑

var forms = document.querySelectorAll('form');

function handleforms(forms) {
    for (var i = 0; i < forms.length; i++) {
        var data = { event: 'e_formSubmit' };
        var form = forms[i];

        data.name = form.hasAttribute('name') ? form.getAttribute('name') : form.getAttribute('action');

        form.addEventListener('click', function(event) {
            event.preventDefault();

            var eventInput = document.createElement('input');
            var nameInput = document.createElement('input');

            eventInput.setAttribute('type', 'hidden');
            eventInput.setAttribute('name', 'event');
            eventInput.setAttribute('value', data.event);

            nameInput.setAttribute('type', 'hidden');
            nameInput.setAttribute('name', 'name');
            nameInput.setAttribute('value', data.name);

            form.appendChild(eventInput);
            form.appendChild(nameInput);

            form.submit(); // In processing action ypu will have access to event and name 
        })
    }
}

handleforms(forms);

我希望它对您有用

所有形式的querySelectorAll（）以及不同形式的addEventListener

3 个答案: