Question 2194 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Trying to hook to an Elementor Form submit – WordPress

I am currently trying to toggle the visibility of a download button after the user has submitted their email. This submission is done from a regular Elementor form. Although elementor provides a range of actions, it seems like I can only toggle the visibility of the button with my own code. However, I can not hook to the correct action for some reason.

<script>

   let button = document.getElementById('pdfdownloadbutton');
   let form = document.getElementById('signupform');
   document.addEventListener('DOMContentLoaded',()=>{
       button.style.visibility = 'hidden';
   });
   form.addEventListener('submit',()=>{console.log("ev trig");});
   
</script>

I expected to log in whenever the event was called, however, the console shows an error saying that ‘addEventListener’ is not a property of null. I assume the document can not locate a form with said id, but, I did name it correctly.
Here is the part where I name the id of the form

the error:

Tags:

3

Answers


  1. 0

    A few things to note here without having much context on the rest of your code:

    • You’re listening for a submit event on what appears to be a button, but submit events only fire on form elements. Read more in MDN.
    • You’re running an alert in the submit event handler, an alert won’t do anything to show or hide your button, it will only show a browser alert with the string passed to it in the parenthesis. More on that in MDN.
    • Depending on when your code runs, adding an event listener to DOMContentLoaded (MDN) may not do anything, it may be best to start with the button hidden, and then add a class to it to show it when appropriate. The class must be targeted by some CSS, of course.

    Here’s my shot in the dark at addressing the high level idea you’re expressing here:

    const form = document.getElementById('signupform');
const pdfButton = document.getElementById('pdfdownloadbutton');

form.addEventListener('submit', function (event) {
  // preventDefault added to be able to show the button in this example
  event.preventDefault();
  pdfButton.classList.add('show');
});

    Additionally, you’ll need some CSS for the code above to work:

    #pdfdownloadbutton {
  visibility: hidden;
}

#pdfdownloadbutton.show {
  visibility: visible;
}

    You can see it in action in this Codepen.

    Note that your code doesn’t give the full content so I had to fill in the blanks. Particularly, notice how I added event.preventDefault() (MDN) because the normal behavior of a submit event would load a new page, so you should consider if this is happening on your site in which case you may need a different solution than your current approach.

    Edit 1

    It looks like you added additional context and an error that shows you’re selecting a null element.

    Your problem seems to be that you’re trying to select the form with:

    let form = document.getElementById('signupform');

    But your form’s ID attribute is actually roisignup00 as shown in the screenshot you shared. I advise you read through some docs for Document.getElementById() such as MDN here, but essentially, the parameter you pass to that method must be a valid HTML ID present in the document at the time you run the method.

    This means you should select your form like this:

    const form = document.getElementById('roisignup00');

    Notice I use const instead of let because if I’m not going to reassign an identifier, there’s no reason to make it anything but const. Of course, some may say that’s opinion, reference here.

    Also, this may be applicable, but your form has an ID which may be dynamic (meaning that it may change), you should consult Elementor’s docs to figure out if it changes, because if it does your code will break. I mean that it could change from roisignup00 to roisignup01 or such, but that’s just speculation from past experience with site builders, so don’t be too worried if you don’t find anything that confirms that

    Login or Signup to reply.
  2. 0 
    <div class="">
<h1>(Write heading)</h1>
<p>(Write description)</p>
<form>
<input type="email" class="email" placeholder="Please enter your email !">
<input type="submit" value="subscribe" class="button">
</form>
</div>
    Login or Signup to reply.
  3. 0

    It’s simpler than this. From Elementor options you enable the "Custom message" option, and in the message bar right at the end, you add your HTML code for the button. Example:

    Thanks for you message <div><a href="https://">Download</a></div>

    You can add a class to it and then with CSS you make it prettier.

    In this way, the button will only appear when the message has been sent, it will be accompanied by the "Thank you" message.

    View image example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search