Get input field value from Elementor Pro Form

user_19074328 0
Viewed 326

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

  1. 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?

Thank you for your time.

elementor html jquery javascript
1 Answers

  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
    });
 });

  1. 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();
     });
 });
user_141978640
Related