javascript for changing outputlabel whenever input value is changed

Question

I have a input field with date

 date = 1/16/2013 (in the form of inputtext)

whenever I change this input text their is an another output text where this value should reflect

date1 = 1/16/2013 (in the form of outputtext)

so whenever date is changed date1 should be rendered accordingly.

how can I get it with javascript.

<script>
 function invoicedate(){
     var transaction = jQuery.trim(jQuery(".transaction").val());
    // alert(transaction);
 }
</script>
<apex:page>
 <apex:pageblocksection>
    date
      <apex:inputText value="{!ChargeDate}" styleclass="transaction" onblur="invoicedate"/>
    date1
      <apex:outputlabel value="{!chargedate}" styleclass="transaction" />
  </apex:pageblocksection>
</apex:page>

Answer 1

Give both of the elements a unique id instead of a class. Then use the ids to get the value from one field and put it in the other:

<script>
 function invoicedate(){
     //note the special jQuery identifier to get the visualforce-generated id
     var transaction = jQuery.trim(jQuery("[id$=transaction_input]").val());
     jQuery("[id$=transaction_output]").val(transaction);
    // alert(transaction);
 }
</script>
<apex:page>
 <apex:pageblocksection>
    date
      <apex:inputText value="{!ChargeDate}" id="transaction_input" onblur="invoicedate"/>
    date1
      <apex:outputlabel value="{!chargedate}" id="transaction_output" />
  </apex:pageblocksection>
</apex:page>

Answer 2

<apex:page standardController="Account">
<apex:form >
    <apex:pageBlock title="My Content" mode="edit">
        <apex:pageBlockButtons >
            <apex:commandButton action="{!save}" value="Save"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="My Content Section" columns="2">
            <apex:inputField value="{!account.name}" />
            <apex:inputText value="{!account.site}"/>
            <apex:inputField id="text1"  onchange="writehello();" value="{!account.SLAExpirationDate__c}" />
            <apex:outputText label="Form" id="hello2"/>
            <script>
            function writehello() {
             // alert('Component id = "{!$Component.text1}"');
              var a= document.getElementById("{!$Component.text1}").value;
              //alert('Value'+a);
              document.getElementById("{!$Component.hello2}").innerHTML = a;    
            }
           </script>


        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>

just tried and the above code works fine for me .I created a date field and my simple hello script works perfectly