从 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?

Thank you for your time.

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