我有以下表格。 JavaScript之所以有效,是因为我已经将它用于其他形式。基本上禁用“添加地址”(继续)按钮,直到完成所有字段。但是我添加了一个地址功能,用户只在其门牌号和街道中键入,然后自动填写其他两个字段(城镇和邮政编码)(此功能的JavaScript未显示为不需要)。因此,因为这两个字段是自动填充的,并且用户没有输入它们,所以原始JavaScript不起作用,并且“添加地址”(继续)按钮保持禁用状态。有什么想法吗?
编辑:
我设法解决了这个问题。我已经重新安排了表单,将“国家/地区列表,门牌号码,城镇和邮政编码”放在表单的开头而不是结尾处。它现在有效。不知道为什么它会有所作为。
<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>
答案 0 :(得分:0)
设置输入字段的值后,触发该字段的keyup事件。
function setValues(){
var my_field = $('#myfield');
my_field.val('Alice');
my_field.trigger('keyup');
}
在你的情况下,我认为这样就足够了:
$('#firstname, #surname, #addresslist, #autocomplete').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
$('#firstname, #surname, #addresslist, #autocomplete').keyup();