从 Elementor Pro Form 获取输入字段值

Question

我使用 Elementor Pro Form 小部件创建了一个表单。现在我想编写一些代码，并且需要从 Elementor Pro Form 获取输入字段的值。我怎样才能做到这一点？

这就是我所做的：

1. 使用 Elementor Pro Form 小部件创建了一个表单。字段：电子邮件、网站 URL。我给他们两个都添加了ID。

电子邮件输入字段ID：

email

网站网址输入栏ID：

websiteurl

提交按钮 ID：

analysee

2. 将 HTML 小部件导入到我的页面，并尝试对网站 URL 输入字段的值进行 DOM 处理。我向按钮添加了一个事件监听器（有效）。单击该按钮时，它应该提醒网站 URL 输入字段的值。

当我这样做时，我收到以下错误：

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

这是我的代码：

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

我该如何解决这个问题？

Answer 1

1. 您可以使用 val() 属性来检索输入的值，方法如下：

   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. 或者您可以执行类似的操作并获取仅包含值的关联数组：

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

Answer 2

我也有类似的问题

我需要一些帮助。

在 Elementor 的表单中，我创建了一个 HTML 小部件，其中包含 n 人的输入字段，如下所示，但是收到电子邮件时并未显示人数表单设计

<div class="center">
       <span class="text">Nº de Pessoas</span>
      <div class="number-input" min="" max="" step="1" value="0">
        <button type="button" class="btn" onclick="decrease()">
          <span class="material-icons-outlined">-</span>
        </button>
        <div class="value">
          <span class="number">1</span>

        </div>
        <button type="button" class="btn" onclick="increase()">
          <span class="material-icons-outlined">+</span>
        </button>
      </div>
   </div>
<script>
  let input = document.querySelector(".number-input");
  const min = input.getAttribute("min");
  const max = input.getAttribute("max");
  const step = Number(input.getAttribute("step") || 1);
  var value = Number(input.getAttribute("value") || 0);
  let number = document.querySelector(".number");
  number.innerHTML = value;

  function increase() {
    if (max) {
      if (value < max && value + step <= max) {
        value += step;
      }
    } else {
      value += step;
    }
    number.innerHTML = value;
  }

  function decrease() {
    if (min) {
      if (value > min && value - step >= min) {
        value -= step;
      }
    } else {
      value -= step;
    }
    number.innerHTML = value;
  }
</script>