How to get the readonly textbox values into javascript variable

See more:

Javascript

PHP

HTML5

i have a form inside that using php i am filling the textbox fields and set it to readonly.now i want to get the readonly textbox values into variables in javascript and do the validation.After loading the document i am trying to store values into variables i am getting empty string.is it possible to doing like this. please help me.Thanks in advance.

<div class="col-md-1">
						<div class="form-group">
						<label>CAPACITY</label>
						<input type="text" id="student1" name="student1" value="<?php echo $venuecapacity1;?>" readonly class="form-control">
						</div>
					</div>
					<div class="col-md-1">
						<div class="form-group">
						<label>TO BE ALLOTED</label>
						<input type="text" id="cpcty1" name="capacity1"   class="form-control">
						<input type="hidden" id="fld1" name="filled1" value="<?php echo $capacity;?>" readonly class="form-control">
						</div>
					</div>
				</div>

What I have tried:

<pre>$(document).ready(function(){
		debugger;
		var aloted=$("#fld1").val();
		var capacity=$("#cpcty1").val();
		var aloted2=$("#fld2").val();
		var capacity2=$("#cpcty2").val();
		var aloted3=$("#fld3").val();
		var capacity3=$("#cpcty3").val();

			$("#cpcty1").change(function(){

				alert(aloted);
				alert(capacity);
					});
				});
			</script>