JavaScript to get an element names value

I am trying to get value from a element name when a user clicks, I set up submission tracking in the tag management systems that tracks when a submit events happens, however on some pages the client has two places that a customer can sign up and they want to split the events out.

I am not a developer hence need some help, I have bound the click tracking in the tag management system to:

"button.button--rightSide.validateFormSubmit"

Based on the below code:

<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>


Second Code Block:

<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>


Which sends the click event as I would like however, the client wants me to pass the value of the name="adestraActionUrl"value, however there is sometimes two on the page.

I know how to get the value when there is only 1 by doing the following:

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


However what I want help with is dynamically onClick getting the onClick name value, eg if the first component on the page get [0] versus if the second get [1].

Tried @Teemu logic from answers by doing the following:

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);



Unfortunately it is alerting as follows:

[object HTMLInputElement]


2 Answers
2

this.closest('ul').querySelector('input[name="adestraActionUrl"]') in the button click handler function finds the input in the same "form" where the button is placed. this refers the element the click listener is attached to. If you've delegated the event, use event.target instead.

this.closest('ul').querySelector('input[name="adestraActionUrl"]')

this

event.target

Note, that you'd need a polyfill for closest in IEs, see closest at MDN.

closest

value

If all you have is two pages (and not a dynamic amount), why not assign different names or ID's to your URL tags?

See:

<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"/>


or even better: give them an 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;


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.