jquery country select when country is saved already?

Question

I have an issue with this jquery code below. Please give me advice or code if you can help

So I have a country drop down list, a state drop down list for USA, and a state input field for non USA users.

When you select USA from the country list it hides the othstate field, when you select any country other then the USA it hides the USA statelist and shows the input field

So far so good, now here is where the problem comes in, this code works great for a signup form but not for editing a users location.

When a user has this data already saved in mysql/php when they visit the edit page it will not work very well. 1 solution I was thinking is to have 2 javascript functions and use PHP to parse the correct one depending on there country, that deals with the issue if they have other country then the USA saved, it would load with example England selected but would show USA states instead of state input field and vice.

There is still 1 major issue though. If you select a Non USA country, you then get the othstate input box, you can then type in data, now lets say I did this and typed in some data and then selected USA from country list, it would hide the data I typed in and let me select a state.

The problem with this is in the backend with PHP I check to see if the text input is empty or the state is empty, this flaw would allow both to hold data.

I hope this made sense and I would love your opinions and help please

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
   locationlist();
});

function locationlist() {
    $('#othstate').hide();
    $('#country').change( function() {         
        var val = $(this).val();
     if (val == 223) {
      $('#state').val('').show();
         $('#othstate').hide();
     }else {
        $('#state').val('').hide();
        $('#othstate').show();
     }
   });
 }
</script>

<form method="post" name="form1">
   <select style="background-color: #ffffa0" name="country" id="country">
      <option>Select Country</option>
      <option value="223" selected="selected">USA</option>
      <option value="224">Canada</option>
      <option value="225">England</option>
      <option value="226">Ireland</option>
   </select>
<div id="state">
   <select style="background-color: #ffffa0" name="state" id="state">
      <option>Select State</option>
      <option value="1">Florida</option>
      <option value="2">New York</option>
      <option value="3" selected="selected">Georgia</option>
      <option value="4">California</option>
   </select>
</div>
<div id="othstate"><input type="text" name="othstate" id="othstate" value="" class="textBox"></div>

Answer 1

Instead of just hiding the input/select, disable it. This will prevent the value form being posted to your server.

function locationlist() {
    $('#othstate').hide().attr("disabled", "disabled");
    $('#country').change( function() {         
        var val = $(this).val();
        if (val == 223) {
         $('#state').val('').show().removeAttr("disabled");
             $('#othstate').hide().attr("disabled", "disabled");
        }else {
            $('#state').val('').hide().attr("disabled", "disabled");
            $('#othstate').show().removeAttr("disabled");
        }
    });
}

Answer 2

I read two issues (clarify if I'm wrong)

1) with signup page, PHP might recieve both fields filled in.

1> Joel Potter's suggestion works.

2) reusing code for an edit page

2> it sounds like you need PHP to insert default values for the inputs. Other than that, I'm not sure if there are any other high-level issues -- it's just a matter of implementation.

options I think of:

client-side = have js code poll (via ajax) server for info and then insert those values.

server-side = PHP can just directly input the values for text input. As for drop-downs, I'm not sure how to set a default choice in html <select> tag, but PHP could insert js code to select the right value on page load, or PHP could make default choice also the first given.