Unable to completely copy billing address to mailing address

Question

Greetings,

I tried to find Jquery tag for this question but could not. So, please forgive me if this is the wrong forum this question.

I have a form that asks users to provide their billing and shipping addresses.

If the billing address is same as the mailing address, click a checkbox to copy the billing address information to mailing address boxes.

So far, address, city and zip are getting copied from billing to mailing addresses but the State address is not getting copy.

The billing State has a hardcoded value of WI for Wisconsin. That NEVER changes, hence it is hardcoded.

The mailing address for State has a DropDownList of states, I am pretty sure that has to do with why the billing address for State is not getting cover over to mailing address for State.

Can you guys please see what I am doing wrong?

            <script type="text/javascript"> 
	            $('#SameAsMailing').click(function () {
	             if ($('input[name="SameAsMailing"]').is(':checked')) { 
	             $('#mailStreetAddress').val($('#instAddress').val());
	             $('#mailCity').val($('#instAddressCity').val()); 
	             var thestate = $('#instAddressState option:selected').val();
	             if (thestate != "") {
	                         $('#mailState option[value="' + thestate + '"]').prop('selected', true);
	                  } 
	             $('#mailZip').val($('#instAddressZip').val());
	             }
	           else
	            {
	            //Clear on uncheck
	            $('#mailStreetAddress').val("");
	            $('#mailCity').val("");
	            $('#mailState option:eq(0)').prop('selected', true);
	            $('#mailZip').val("");
	           }
	         }); 
           </script>


	    <asp:TableRow>
	      <asp:TableHeaderCell CssClass="align-right">Install Address:</asp:TableHeaderCell>
		<asp:TableCell><asp:TextBox ID="instAddress" runat="server" /></asp:TableCell>	    
		<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
	    </asp:TableRow>           
	    <asp:TableRow>
		<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
		<asp:TableCell><asp:DropDownList ID="instAddressCity" OnSelectedIndexChanged="instAddressCity_Changed" AutoPostBack="true" runat="server" /></asp:TableCell>
		<asp:TableHeaderCell CssClass="align-right">State:</asp:TableHeaderCell>
		<asp:TableCell  CssClass="align-left"><asp:Label ID="instAddressState" runat="server" Text="WI" /></asp:TableCell>
		<asp:TableHeaderCell CssClass="align-left">Zip:</asp:TableHeaderCell>
		<asp:TableCell><asp:DropDownList ID="instAddressZip" runat="server" /></asp:TableCell>
	    </asp:TableRow>
	            
	    <asp:TableRow>
		<asp:TableHeaderCell CssClass="align-right">Address:</asp:TableHeaderCell>
		<asp:TableCell><asp:TextBox ID="mailStreetAddress" runat="server" /></asp:TableCell>
		<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
		<asp:TableCell><asp:TextBox ID="mailCity" runat="server" /></asp:TableCell>
	    </asp:TableRow>
	    <asp:TableRow>
		<asp:TableHeaderCell CssClass="align-right">State:</asp:TableHeaderCell>
		<asp:TableCell><asp:DropDownList ID="mailState" runat="server"></asp:DropDownList></asp:TableCell>
		<asp:TableHeaderCell CssClass="align-right">Zip:</asp:TableHeaderCell>
		<asp:TableCell><asp:TextBox ID="mailZip" runat="server" /></asp:TableCell>
	    </asp:TableRow>

Answer 1

Hi @Simflex

Your problem is：

Your "instAddressState" is a label control

<asp:Label ID="instAddressState" runat="server" Text="WI" />

But the method you use when getting its value in jQuery is "var thestate = $('#instAddressState option:selected').val(); "

"option: selected​" is the CSS selector for the dropdownlist element. Therefor you will get "undefined" from Label. 

You can replace the label with a dropdownlist, or use the correct CSS selector to get the element value.

Best Regards

Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

The ID of TextBox control suck like <asp:TextBox ID="mailStreetAddress" ... will not be the id of input element of html when the TextBox control is located in a naming container such as a master page. In such case $('#mailStreetAddress') does not work.

Use <%= %> as follows:

$("#<%=mailStreetAddress.ClientID%>")