javascript - How to add "on change" to a text input in contact form7?

admin管理员组

文章数量:1313188

I am converting a static theme to a wp-theme and I am working on forms with wpcf7 plugin. I am wondering how can I write this code with wpcf7 text tag.

<input type="text" name="name" id="name" value="" onchange="this.setAttribute('value',this.value);" required/>

All what I could do is this

[text* name id:name]

my question is how can I add onchange to this text input ?

I am converting a static theme to a wp-theme and I am working on forms with wpcf7 plugin. I am wondering how can I write this code with wpcf7 text tag.

<input type="text" name="name" id="name" value="" onchange="this.setAttribute('value',this.value);" required/>

All what I could do is this

[text* name id:name]

my question is how can I add onchange to this text input ?

• javascript
• forms
• plugin-contact-form-7
• input

Share Improve this question edited Dec 14, 2020 at 0:28 Aurovrata 1,3461111 silver badges1818 bronze badges asked Dec 12, 2020 at 9:44 ZakiZaki 111 silver badge11 bronze badge 1

• Please ask this kind of question on the Stack overflow forum instead. The WordPress forum isn't for plugins related issues. – Aurovrata Commented Dec 13, 2020 at 17:25

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The CF7 plugin does not give you access to the HTML markup formatting function of the field tags. So you need to capture the JavaScript event fired when the field is changed. To do this you can tag a script at the end of your form,

<label>[text* name id:name]</label>
<label>[text* surname id:surname]</label>
[submit]
<script>
(function($){
'use strict';
  $(document).ready( function(){
    $('form.wpcf7-form :input').change(function(e){
      var $field = $(e.target);
      switch($field.attr('name')){
        case 'name': //text field name was changed.
          //do something.
          break;
        case 'surname': //text field surname was changed.
          //do something.
          break;
      }
    })
  })
})(jQuery)
</script>

本文标签： javascriptHow to add quoton changequot to a text input in contact form7