Question

I have four input fields two text and two hidden.

The HTML:

<input type="text" name="pie1" class="green" id="pie1" value="Hello"/>
<input type="hidden" name="hPie1" value="green">
<input type="text" name="pie2" class="green" id="pie2" value="Goodbye"/>
<input type="hidden" name="hPie2" value="green">

My script code:

<script>
$(document).ready(function(){   
 $('input:text').click(function( ){
  $(this).toggleClass('green red');
 });
})
 </script>

Question: How do I change the value of the hidden field to the coherent text field class that is toggled at the same time I click the input box?
Thanks for any help that you can give.

Answer 1

A first fast solution for your problem.

<script>
$(document).ready(function(){   
    $('input:text').click(function( ){
        $(this).toggleClass('green red');
        $(this).next().val($(this).attr('class'));
     });
})
</script>