CODEWITHSUNDEEP
jquerywordpresscontact-form-7
archvist
archvist

Reputation: 722

jQuery grab contact form 7 input value before submission

I want to grab the value of a field and store it in a jQuery variable for use later after a form is submitted using the ContactForm 7 plugin.

I notice I can use the $(".wpcf7").on('wpcf7:submit', function(event){} however when I try to grab a value its always empty I assume this is because the form has already been submitted so the value is empty/inaccessible at this point.

Is there a way to access the form before submission or do I need to prevent default on the form, grab the data then submit manually.

Example of my use; 

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

Rendered CF7 Form;

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

Upvotes: 1

Views: 8763

Answers (3)

JP Alpano
JP Alpano

Reputation: 120

Change to .. ).on('submit', function(...

Then Car name = $('input[name="full-name"]').val();

Upvotes: 0

CMartins
CMartins

Reputation: 3293

You can use the keypress to update the variable value every time the user change it.

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

Upvotes: 0

Elvin Haci
Elvin Haci

Reputation: 3572

First of all, always use "jQuery" instead of "$". Second, you need to use correct selector. You don't have a class called "form.contactForm" in your form. So, try this:

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

Upvotes: 2

Related Questions