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

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 ?

Topic input plugin-contact-form-7 forms Wordpress javascript

Category Web

1
answered at

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>

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.