---
# CF7 change input value on onChange using jQuery

**URL:** https://modul-r.codekraft.it/2021/08/cf7-change-input-value-on-onchange-using-jquery/
Date: 2021-08-19
Author: Erik
Post Type: post
Summary: This example explains how to get a value with jQuery from a select and set another input value dynamically ref. https://wordpress.org/support/topic/most-elegant-way-to-achieve-this/ Your name Your email Subject Your message (optional)
Categories: Blog, Contact form 7
---

This example explains how to get a value with jQuery from a select and set another input value dynamically

ref. https://wordpress.org/support/topic/most-elegant-way-to-achieve-this/

[contact-form-7 id="611" title="jQuery update input value"]

```
<p><span>how many participants?</span>[select menu-811 id:participants include_blank "1" "2" "3" "4" "5" "6" "7"]</p>
<p><span id="meatcount">0</span> meat [range* your-fishmeat id:fishmeat min:0 max:7 step:1 "0"]<span id="fishcount">0</span> fish </p>
<p class="submitForm">[submit "Submit"]</p>

<script type="text/javascript">
  jQuery(document).ready(function($){
    function updateFishMeat() {
// selected value 
      if (!$('#participants').val()) return 0;
      $('#fishmeat').attr( 'max', $('#participants').val() );
      $('#fishcount').text( $('#fishmeat').val() );
      $('#meatcount').text( $("#fishmeat").attr('max') - $('#fishmeat').val() );
    }
    updateFishMeat();
    $('#participants').change( updateFishMeat );
    $('#fishmeat').change( updateFishMeat );
  });</script>
```

---

## Categories

- Blog
- Contact form 7

---

## Navigation

- [Home](https://modul-r.codekraft.it/)
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Shop](https://modul-r.codekraft.it/shop/)
- [Tag /Archive format](https://modul-r.codekraft.it/tag/post-formats/)
- [Modul R](https://wordpress.org/themes/modul-r/)
- [Modul R (git)](https://github.com/erikyo/Modul-R)
- [Modul R Child (git)](https://github.com/erikyo/Modul-R-child)
- [CF7 Antispam](https://wordpress.org/plugins/cf7-antispam/)
- [OH-MY-SVG](https://modul-r.codekraft.it/oh-my-svg/)
- [Model-Viewer WordPress block](https://modul-r.codekraft.it/model-viewer-wordpress-block/)
- [Remove Capslock](https://wordpress.org/plugins/remove-capslock)
- [Blog](https://modul-r.codekraft.it/category/random-access-memories/)
- [Codekraft](https://github.com/codekraft-studio)
- [About Me](https://modul-r.codekraft.it/erik-golinelli/)
- [Contact](https://modul-r.codekraft.it/contacts/)
- [Credits](https://modul-r.codekraft.it/credits/)

---

## Footer Links

- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Download](https://wordpress.org/themes/modul-r/)
- [Contact form 7](https://modul-r.codekraft.it/category/contact-form-7/)
- [Quick Start](https://modul-r.codekraft.it/category/quick-start/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Post Formats](https://modul-r.codekraft.it/category/post-formats/)
- [Block](https://modul-r.codekraft.it/category/block/)
- [Clothing](https://modul-r.codekraft.it/product-category/clothing/)
- [Privacy Policy](https://modul-r.codekraft.it/privacy-policy/)
- [Proudly powered by WordPress & made in Bologna with ♥ by Codekraft](https://codekraft.it/)