Javascript setAttribute(value, name) input fields are not sending to BE on submission

Question

I am using the Amelia Calendar Plugin on my WordPress site.

I have custom fields enabled where I use document.setAttribute(value, name) however when I submit this form the JS setAttribute fields are not sending to the back end.

Here is the test domain I set up to take a look: http://s918546899.websitehome.co.uk/elementor-6

Here is the Javascript I have written to set the values in the custom fields:

if(window.location.href.includes("elementor-6")) {
// 1. set on click on next button once you land on page
    setTimeout(function(){
        document.getElementsByClassName("am-button")[1].setAttribute("onclick", "myFunction()"); 
        console.log("onclick has been set")
    }, 3000);
}

// 2. call function that will set on click on next button for second form screen 
function myFunction() {
    if (document.getElementsByClassName("am-fs__main-heading-inner-title")[0].textContent != "Your Information") {
        setTimeout(function() { document.getElementsByClassName("am-button")[1].setAttribute("onclick", "myFunction()"); }, 3000);
        console.log("onclick set again");
    } else {
        //document.getElementsByClassName("am-fs__main-heading-inner-title")[0].textContent == "Your Information" {
                
        // set text in input fields
        document.getElementsByClassName("el-input__inner")[3].setAttribute("value", "test");
        document.getElementsByClassName("el-input__inner")[4].setAttribute("value", "test2");
    }
}

I would be really grateful if someone could take a look and help with this.

This is also a test domain so happy to share the wp-admin credentials if someone wishes to take a look on the BE.

Answer 1

You are attaching an event, not setting attribute. This is done using the function addEventListener. Also consider using the more methodical querySelectorAll or querySelector instead of getElementsByClassName.

Here's an example:

document.querySelector(".button-one").addEventListener('click', function(ev) {
  console.log(this.innerText)
});

document.querySelectorAll(".button-two").forEach(function(elem) {
  elem.addEventListener('click', function(ev) {
    console.log(this.innerText)
  });
})

<button class="button-one">one</button>
<button class="button-two">two</button>
<button class="button-two">two again</button>

On the other hand, sometimes you might be tempted to make an inline onclick especially if you are echoing html from the server. In that case it would work but still it's not recommended.