Hi:

I have an order entry form where a customer can choose to order the same thing he did last time or enter a new order.

The form should, by default show what he ordered last year with a simple button that says "Yes order the same"

There is a select list which allows the user to say "No I want to order something new" which hides the default (same order) section and displays a different (new order section)

At the beginning of the page is a script that looks like this:

Code:
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.validate.creditcardtypes.js"></script>
<script>
	$(document).ready(function(){
		$("#checkout_form").validate();
	});
</script>
      
<script>
	jQuery(document).ready(function () {
		$('#emAction').live('change', function() {
        var v = $(this).attr('value');
        $('.field').hide();         // hide all fields
        $('.' + v).show();          // show only selected classes
    }).triggerHandler('change');
});
</script>
Then, later in the page, just before the entry forms is the following select field:
Code:
			<p><strong>Would you like the same display items as last year?</strong></p>
			<select id=\"emAction\">
			<option value=\"\" >select one</option>
			<option value=\"ordering\" selected>Yes, same display items, please</option>
			<option value=\"not_ordering\">No, I would like to change my display this year.</option>
			</select>
Then, the actual forms look like this:
echo <<<EOT
<!-- this is for people ordering same as last year -->
<div class= "field ordering">

<form method="post" action="$_SERVER[PHP_SELF]" id="checkout_form">
<h3>Same as Last Year</h3>
<input type="hidden" name="co_id" value="$co_id">
<input type="hidden" name="company_name" value="$company_name">
<p><input type="submit" name="submit" value="Submit "></p>

</form>
</div>
<!-- this is for people NOT ordering new stuff-->
<div class="field not_ordering">
<h3>Changing order for this year</h3>
<form method="post" action="$_SERVER[PHP_SELF]" id="checkout_form">
[Lots of Form stuff here]
<input type="hidden" name="co_id" value="$co_id">
<input type="hidden" name="company_name" value="$company_name">
<p><input type="submit" name="submit" value="Submit "></p>
</form>
</div>
The issue is this: Only one form should be shown at a time. If I change selection between "yes" and "no" it works fine, one form is hidden and the other is shown. However, when the page is first accessed or it is refreshed BOTH forms are shown until the SELECT field is changed.

Can anyone suggest why this is happening? Where would I look top troubleshoot this?

Thanks