JavaScript to get an element names value

Question

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]

Please make your code readable by properly adjusting indentation. If you don't show you care to format your questions so others have no difficulty reading it, why would we care answering? Also your wording seems off, at least I don't understand what exactly you are asking. — connexo
– connexo, Commented Sep 6, 2018 at 18:03
Sorry will add second code block and tidy up indentation when I get back to my laptop, I was trying to keep size of the code to a minimum. — Roman Rock
– Roman Rock, Commented Sep 6, 2018 at 18:17

Teemu · Accepted Answer · 2018-09-07 05:02:41Z

1

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.

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

answered Sep 7, 2018 at 5:02

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roman Rock Over a year ago

Thanks for this, here is what I did: '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]'

Teemu Over a year ago

Sure, "function finds the input" meaning you've to read the value property of the found input element to get the value of the element ...

poolfork · Accepted Answer · 2018-09-06 18:15:46Z

0

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;

answered Sep 6, 2018 at 18:15

poolfork

406 bronze badges

1 Comment

Roman Rock Over a year ago

I am not able to update source code as the go live is in two days so I am being asked to write the code in the TMS, I asked to update the id’s but I have been told there is not enough time before go live.

Collectives™ on Stack Overflow

JavaScript to get an element names value

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related