Question

我试图在用户单击时从元素名称中获取价值，我在标签管理系统中设置了提交跟踪，以跟踪何时发生提交事件，但是在某些页面上，客户有两个地方可供客户签名起来，他们想把事件分开。

我不是开发人员，因此需要一些帮助，我已将标签管理系统中的点击跟踪限制为：

“ button.button--rightSide.validateFormSubmit”

基于以下代码：

    <ul class="prhList prhList--hor prhForm__form">
   <li class="prhForm__form__input">
      <div class="prhForm__item inputText inputText--leftSide newsletterForm__emailInput validateInputText">
         <div class="inputField inputText__input">
            <input class="inputField__input" type="email" name="email" data-email="email_1424" value="" autocomplete="off" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
            <input type="hidden" name="adestraActionUrl" value="https://penguin-group.msgfocus.com/k/Penguin-Group/lee_child_1027557_form"/>
            <div class="inputField__border"></div>
         </div>
         <div class="prhForm__item__error prhForm__item__error--empty">
            <p>Please enter an email.</p>
         </div>
         <div class="prhForm__item__error prhForm__item__error--invalid">
            <p>Please enter a valid email address</p>
         </div>
      </div>
   </li>
   <li class="prhForm__form__submit">
      <button class="button button--rightSide validateFormSubmit">
      <span class="button__text">Sign Up</span>
      </button>
   </li>
</ul>

第二个代码块：

    <ul class="prhList prhList--hor prhForm__form">
   <li class="prhForm__form__input">
      <div class="prhForm__item inputText inputText--leftSide newsletterForm__emailInput validateInputText">
         <div class="inputField inputText__input">
            <input class="inputField__input" type="email" name="email" data-email="email_5477" value="" autocomplete="off" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
            <input type="hidden" name="adestraActionUrl" value="http://penguin-group.msgfocus.com/k/Penguin-Group/oscar_wilde_15996_form_v2"/>
            <input type="hidden" name="Source123" value="value"/>
            <div class="inputField__border"></div>
         </div>
         <div class="prhForm__item__error prhForm__item__error--empty">
            <p>Please enter an email.</p>
         </div>
         <div class="prhForm__item__error prhForm__item__error--invalid">
            <p>Please enter a valid email address</p>
         </div>
      </div>
   </li>
   <li class="prhForm__form__submit">
      <button class="button button--rightSide validateFormSubmit">
      <span class="button__text">Sign Up</span>
      </button>
   </li>
</ul>

但是我希望发送哪个click事件，客户端希望我传递name =“ adestraActionUrl”值的值，但是有时页面上会有两个。

我知道如何在只有1的情况下通过以下操作获取值：

document.getElementsByName("adestraActionUrl")[0].value

不过，我需要的是动态onClick获取onClick名称值，例如，页面上的第一个组件是否为[0]，而第二个组件为[1]。

通过执行以下操作，尝试了@Teemu逻辑：

var classname = document.getElementsByClassName("prhForm__form__submit");

var myFunction = function() {
    var attribute = this.closest('ul').querySelector('input[name="adestraActionUrl"]');
    alert(attribute);
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

不幸的是，它发出如下警报：

[object HTMLInputElement]

Answer 1

按钮单击处理程序函数中的

this.closest('ul').querySelector('input[name="adestraActionUrl"]')在与放置按钮相同的“表单”中查找输入。 this表示点击侦听器所附加的元素。如果您已委派活动，请改用event.target。

请注意，您需要在IE中为closest使用polyfill，请参阅MDN上的closest。

Answer 2

如果您只有两页（而不是动态金额），为什么不给URL标记分配不同的名称或ID？

请参阅：

<input type="hidden" name="adestraActionUrl" value="https://penguin-group.msgfocus.com/k/Penguin-Group/lee_child_1027557_form"/>

<input type="hidden" name="adestraActionUrl2" value="https://penguin-group.msgfocus.com/k/Penguin-Group/lee_child_1027557_form"/>

甚至更好：给他们一个ID

<input type="hidden" id="url1" value="https://penguin-group.msgfocus.com/k/Penguin-Group/lee_child_1027557_form"/>

// get element by ID
document.getElementbyID("url1").value;

JavaScript获取元素名称值

2 个答案: