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

Question

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

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

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

我的使用示例；

$(".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”的类。所以，试试这个：

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('提交', function(...

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