0

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.

Adam
  • 203
  • 1
  • 14

1 Answers1

0

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.

IT goldman
  • 14,885
  • 2
  • 14
  • 28
  • Thank you for taking time out to look at my question @IT goldman. The issue I am having isn't the eventListener or setting the function. It is more so when sending the ```setAttribute(value, name)``` field to the BE. It seems the form isn't registering when an input field has been populated with JS so when sent to the BE the field sends as ```""``` – Adam May 05 '23 at 11:50
  • Wait, I think I understand. So are you essentially saying because it is a multistep form and I am using ```setAttribute``` and not adding an ```eventListener```, when I go to the next step of the form, it is not taking the string from those input fields along with the button click to go next? – Adam May 05 '23 at 11:56
  • No, that is irrelevant then. Maybe I didn't understand. But passing values thru a form can be done using ``. You might need to "manually" add them to the request if you're using Ajax. – IT goldman May 05 '23 at 12:02
  • So the ```setAttribute``` is correct. Can you shed some light on how to add them to the request and is it possible to check if the plugin is using AJAX? – Adam May 05 '23 at 12:05
  • yes it is using ajax. you can see by the network tab in the devtools. it looks like you are doing it wrong andin a patchy way. did you try reading the [custom-fields](https://wpamelia.com/custom-fields/) section of wpamelia docs? – IT goldman May 05 '23 at 12:12
  • Yes - so the custom fields work fine but I want to add my own text values in those fields with Javascript which is where the issue arises as the custom fields where I ```setAttribute``` the text to doesn't send to the backend. I think there may be a bigger issue. If you check the URL I have set the test form on, you will see when you press next on the 'Your Information' screen, it registers the ```setAttribute``` fields as empty and gives an error as 'This field is required' – Adam May 05 '23 at 14:03
  • 1. maybe try setting `element.value='test'` instead of `setAttribute`. according to [this answer](https://stackoverflow.com/a/3919313/3807365) it is more precise. 2. you can send me your server side credentials if you think it might help. 3. the custom fields don't have a `name` attribute. so it would be difficult to access them from server. – IT goldman May 05 '23 at 18:55