jQuery 提交前抓取联系表 7 输入值

Question

我想获取一个字段的值并将其存储在一个 jQuery 变量中，以便稍后在使用 ContactForm 7 插件提交表单后使用。

我注意到我可以使用 $(".wpcf7").on('wpcf7:submit', function(event){} 但是当我尝试获取一个值时它总是空的我认为这是因为表单已经提交所以此时值为 empty/inaccessible .

有没有办法在提交前访问表单，或者我是否需要防止表单默认，抓取数据然后手动提交。

我的使用示例；

$(".wpcf7-form").on('wpcf7-form:submit', function(event){
  var name = $('form.contactForm span.full-name input').val();
  console.log(name);
});

渲染的 CF7 表格；

<form action="/installation/#wpcf7-f222-o1" method="post" class="wpcf7-form return-me" novalidate="novalidate" _lpchecked="1">
  <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="222">
    <input type="hidden" name="_wpcf7_version" value="4.9.1">
    <input type="hidden" name="_wpcf7_locale" value="en_US">
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f222-o1">
    <input type="hidden" name="_wpcf7_container_post" value="0">
  </div>
  <div class="input-wrp">
    <label>Name*</label><span class="wpcf7-form-control-wrap full-name"><input type="text" name="full-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span>
  </div>
  <p><input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit btn contactSubmits"><span class="ajax-loader"></span></p>
  <div class="wpcf7-response-output wpcf7-display-none"></div>
</form>

Answer 1

首先，始终使用 "jQuery" 而不是“$”。其次，您需要使用正确的选择器。您的表单中没有名为 "form.contactForm" 的 class。所以，试试这个：

jQuery(".wpcf7-form").on('submit', function(event){
  var name = jQuery('span.full-name input').val();
  console.log(name);
});

Answer 2

每次用户更改时，您都可以使用按键来更新变量值。

var myInputVal = '';
$("#target").keypress(function() {
  myInputVal = $(this).val();
  }

Answer 3

改为 .. ).on('submit', 函数(...

然后车名=$('input[name="full-name"]').val();

jQuery 提交前抓取联系表 7 输入值

jQuery grab contact form 7 input value before submission

wordpress

jquery

contact-form-7