Get input field value from Elementor Pro Form

Question

I created a form using Elementor Pro Form widget. Now I want to write some code and I need to get the value of the input fields from the Elementor Pro Form. How can I do that?

Here is what I did:

1. Created a form with the Elementor Pro Form widget. Fields: Email, Website URL. I added ID to both of them.

Email input field id: email

Website URL input field ID: websiteurl

Submit button ID: analysee

2. Imported HTML widget to my page and tried to DOM the value of the Website URL input field. I added an Event Listener to the button (that works). When the button is clicked it should alert the value of the Website URL input field.

When I do that I get the following error:

Uncaught TypeError: Cannot read properties of null (reading 'value')
    at HTMLButtonElement.<anonymous>

Here is my code:

<script>
    let analyse_dugme = document.getElementById("analysee");
    let website_url = document.getElementById("websiteurl");
    
    analyse_dugme.addEventListener("click", function(){
        alert(website_url.value);
    });
    
</script>

How can I solve this?

Answer 1

1. You can use the val() property to retrieve the input's value, by doing something like this:

   jQuery(document).ready(function($) {
       $('#theForm').submit(function() { // #theForm to select the whole form
           let analyse_dugme = $("#email").val(); // get the email value
           let website_url = $("#websiteurl").val(); // get the website url value
       });
    });
   

---

2. Or you can do something like this and get an associative array with just the values:

   $('#theForm').submit(function() {
        var $inputs = $('#theForm :input');
        var values = {};
        $inputs.each(function() {
            values[this.name] = $(this).val();
        });
    });