I have the following form. The JavaScript works because I have used it for other forms. Basically disables the 'Add Address' (Continue) button until all fields are completed. But I have added an address feature, where the user only types in their house number and street then the other two fields (town and postcode) are automatically filled (the JavaScript for this feature isn't shown as unneeded). So because these two fields are automatically filled and the user doesn't type in to them, the original JavaScript does not work and the 'Add Address' (Continue) button stays disabled. Any ideas?
EDIT:
I have managed to solve this. I have rearranged the form, by placing the 'country list, house number, town and postcode' at the beginning of the form instead of the end. It now works. Not sure why it makes a difference though.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Payment Gateway</title>
<link rel="stylesheet" type="text/css" href="ue1.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#firstname, #surname, #addresslist, #autocomplete').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
</script>
<script>
var placeSearch, autocomplete;
var componentForm = {
locality: 'long_name',
postal_code: 'short_name'
};
</script>
<form action="addaddresspage3.html" method="post" id="form" class="form">
<div id="form1">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Billing Address</legend>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">First Name(s)*:</label>
<input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Surname*:</label>
<input type="text" id="surname" class="form-control" placeholder="Surname" required="">
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-3 col-sm-3">
<label>Country of Home Address</label>
<select name="title" id="addresslist" class="form-control">
<option value="1">Select Address</option>
<option value="1">United Kingdom</option>
<option value="2">Saudi Arabia</option>
<option value="3">Iran</option>
<option value="4">Nigeria</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="street_<cfoutput>#Add#</cfoutput>">House number and street:</label>
<input type="text" name="street_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="autocomplete" size="54" maxlength="120" message="Please enter owner #Peoplecount#'s mailing address." onFocus="geolocate()" placeholder="Please enter your house number and street">
<p>
<label for="city_<cfoutput>#Add#</cfoutput>">Town:</label>
<input type="text" name="city_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="locality" size="30" maxlength="50" message="Please enter owner #Peoplecount#'s mailing city." value="">
</p>
<label for="street_<cfoutput>#Add#</cfoutput>">Postcode:</label>
<input type="text" name="postal_#Add#" required="yes" id="postal_code" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s mailing zip code." value="">
</div>
</div>
</div>
</div>
</div>
<input type="submit" id="continue" disabled="disabled" value="Add Address"/>
</div>
After setting the value of the input field, firer the keyup event of the field.
function setValues(){
var my_field = $('#myfield');
my_field.val('Alice');
my_field.trigger('keyup');
}
In your case, I think is enough just to do this:
$('#firstname, #surname, #addresslist, #autocomplete').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
$('#firstname, #surname, #addresslist, #autocomplete').keyup();