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

首先，始终使用＆＃34; jQuery＆＃34;而不是＆＃34; $＆＃34;。其次，您需要使用正确的选择器。你没有一个名为＆＃34; form.contactForm＆＃34;的课程。在你的形式。所以，试试这个：

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

更改为 ..）。（＆＃39;提交＆＃39;，功能（...

然后汽车名称= $（＆＃39;输入[名称=＆＃34;全名＆＃34;]＆＃39;）。val（）;

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

3 个答案: