CF7 change input value on onChange using jQuery

    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/

      how many participants?

      0 meat 0 fish

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

      Post navigation

      You might be interested in...

      No comments yet, be the first!

      Comments

      Your email address will not be published. Required fields are marked *