I have a problem with the val function it is unable to get the value of a field once I have type text into it, this only occurs when the form is in a jQuery popup box that has a form.

According to my inspector, it says that the element does have a value however the value is not being picked up.

Here is the setup, if anyone has any idea or possible problem then please let me know

test.html

<form ....>
<table>
	<tr><td colspan="2"><strong>Account Information</strong></td></tr>
	<tr>
	  <td>Name:</td>
	  <td><input type="text" name="acc_name" value="" /></td>
	</tr>
</table>
<hr style="border: 0; border-top: 1px dotted;">
<table>
	<tr><td colspan="2"><strong>Trading Information</strong></td></tr>
	<tr>
	  <td>Online trading enabled:</td>
	  <td><input type="checkbox" name="acc_name" value="" /></td>
	  <td>Phone trading enabled:</td>
	  <td><input type="checkbox" name="acc_name" value="" /></td>
	  <td>API enabled:</td>
	  <td><input type="checkbox" name="acc_name" value="" /></td>
	</tr>
</table>
<hr style="border: 0; border-top: 1px dotted;">
<table>
		<tr><td colspan="2"><strong>Address Information</strong></td></tr>
		<tr>
		  <td>Contact address:</td>
		  <td><input type="text" id="contact_address" name="contact_address" value="test"/></td>
		  <td>Billing address:</td>
		  <td><input type="text" id="billing_address" name="billing_address" /></td>
		</tr>
		<tr>
		  <td>City:</td>
		  <td><input type="text" id="contact_city" name="contact_city" /></td>
		  <td>City:</td>
		  <td><input type="text" id="billing_city" name="billing_city" /></td>
		</tr>
		<tr>
		  <td>State:</td>
		  <td><input type="text" id="contact_state" name="contact_state" /></td>
		  <td>State:</td>
		  <td><input type="text" id="billing_state" name="billing_state" /></td>
		</tr>
		<tr>
		  <td>Country:</td>
		  <td><input type="text" id="contact_country" name="contact_country" value="" /></td>
		  <td>Country:</td>
		  <td><input type="text" id="billing_country" name="billing_country" value="" /></td>
		</tr>
		<tr>
		  <td>Postal code:</td>
		  <td><input type="text" id="contact_post_code" name="contact_post_code" value="" /></td>
		  <td>Postal code:</td>
		  <td><input type="text" id="billing_post_code" name="billing_post_code" value="" /></td>
		</tr>
		<tr>
		  <td></td>
		  <td></td>
		  <td>Copy address from left:</td>
		  <td><input type="checkbox" id="copy_address" name="copy_address" value="" onclick="copyAddress.copyContactAddress()"/></td>
		</tr>
	</table>
</form>

application .js
part of the code

copyAddress = function () {
	function copyContactAddress() {
	        if ($("input#copy_address").is(':checked')) 
	        { 
	            $("input#billing_address").val($("input#contact_address").val());
				$("input#billing_city").val($("input#contact_city").val());
				alert($("input#contact_city").val());
				$("input#billing_state").val($("input#contact_state").val());
				$("input#billing_country").val($("input#contact_country").val());
				$("input#billing_post_code").val($("input#contact_post_code").val());
	        } 
	        else 
	        { 
	            $("input#billing_address").val("");
				$("input#billing_city").val("");
				$("input#billing_state").val("");
				$("input#billing_country").val("");
				$("input#billing_post_code").val("");
	        } 
	}
	return {
		copyContactAddress: copyContactAddress
	}
}();

Problem solved

I used this instead

$("input#billing_address")[0].value = ($("input#contact_address")[0].value;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.