How to populate Contact Form 7 input field with jQuery button click?

Question

My script can't make this, and I don't know why.

<script>
jQuery('#hondabtn').on('click', function(){ 
    alert(jQuery('#carsubject').val());  
    jQuery('#carsubject').val('NEW VAL'); 
    alert(jQuery('#carsubject').val()); 
}); 
</script>

Both of alerts work and display things as I need. BUT nothing change in text input element with id="carsubject"

@Kelvin it works on https://jsfiddle.net/Ltakp4y5/ What can be the problem? Why it not work on my site? I useDivi theme. — nobilik, Feb 26 '16 at 05:56
Your function is only setting a new value on the #carsubject element, this will not populate the form. Look at [val()](http://api.jquery.com/val/) and [this](http://stackoverflow.com/questions/7298364/using-jquery-and-json-to-populate-forms) question for a specific example on setting form input values using jQuery. — Kristoffer Bohmann, Feb 26 '16 at 06:58
@KristofferBohmann it populate form. I answer my own question. take a look if you wish. — nobilik, Feb 26 '16 at 07:01

score 0 · Accepted Answer · answered Feb 26 '16 at 06:30

Contact form 7 don't want to work with custom id for subject field. So we need to use access by name of element. This script works:

<script>
jQuery('#hondabtn').on('click', function(){ 
    jQuery('input[name=subject]').val('NEW VAL'); 
}); 
</script>

How to populate Contact Form 7 input field with jQuery button click?

1 Answers1