document.getElementsByTagName on change function

Question

I'm having trouble implementing a js function. My skills are limmited... I don't have access to field ID's because the fields are widgets and no ID's are listed so I am forced to use field names.

There is a default value for an email address field allowing customers to send in anonymous emails through the webbform. The thing is, I would like to have a text shown when this default email address is not changed (this as there would be no way to answer the email)

<rn:widget path="input/FormInput" name="Contact.Emails.PRIMARY.Address" required="false" label_input="E-postadress" default_value="[email protected]" />

As the above makes the email by default [email protected] I would need to call a function when an event happens. I thought I could just check for a change on the subject field and show a message when the email address is still equal to [email protected]

I thought the following code would solve my problem but it doesn't seem to register the change event. Any advice on what I did wrong?

<rn:widget path="input/FormInput" name="Contact.Emails.PRIMARY.Address" required="false" label_input="E-postadress" default_value="[email protected]" />

<p id="Message"></p>

<rn:widget path="input/FormInput" name="Incident.Subject" required="true" label_input="Subject" />

<script>
document.getElementsByTagName('Incident.Subject')[0].onchange = function() {

    var x = document.getElementsByName("Contact.Emails.PRIMARY.Address")[0].value;

        if (x == '[email protected]') {
            document.getElementById("Message").innerHTML = 'Some text...';
        }
}
</script>

Edit: I had a bright idea this morning, I thought let's check the source code when the html is rendered and I found the ID's there :-) So I guess this means there are alternative solutions now, using ID's.

<input type="email" id="rn_TextInput_4_Contact.Emails.PRIMARY.Address" name="Contact.Emails.PRIMARY.Address" class="rn_Email" maxlength='80' value='[email protected]' />

<input type="text" id="rn_TextInput_11_Incident.Subject" name="Incident.Subject" class="rn_Text" maxlength='240' required  />

Answer 1

Use event listener.

<script>
var tag = document.getElementsByTagName('Incident.Subject')[0];
tag.on('change',function() {
    var x = document.getElementsByName("Contact.Emails.PRIMARY.Address")[0].value;

    if (x == '[email protected]') {
        document.getElementById("Message").innerHTML = 'Some text...';
    }
});
</script>

Answer 2

I have made a demo here

https://jsfiddle.net/aquadk/etmsqzLq/15/

    <script>
document.querySelector('input[name="Incident.Subject"]').onchange = function() {
    var x = document.querySelector('input[name="Contact.Emails.PRIMARY.Address"]').value;
        if (x == '[email protected]') {
            document.getElementById("Message").innerHTML = 'Some text...';
        }
}
</script>

Answer 3

I managed to get it right :-) (took me a few hours but it feels good to have it acomplished)

I'm posting the answer below for those with similar challenges :-)

Email: <input name="Contact.Emails.PRIMARY.Address" type="text" value="[email protected]"><br>
<font color="red"><b><p id="Message"></p></b></font>
Subject: <input id="rn_TextInput_11_Incident.Subject" name="subject" type="text" value=""><br>
<br>


<script>
document.getElementById("rn_TextInput_11_Incident.Subject").onchange = function() {myFunction()};
</script>

<script>
function myFunction() {
    var x = document.getElementsByName("Contact.Emails.PRIMARY.Address")[0].value;
if (x == "[email protected]") {
    document.getElementById("Message").innerHTML = "Glöm inte att fylla i din e-postadress om du önskar svar från oss.";
}

}
</script>