0
這個問題是兩部分。我想根據用戶的操作在這裏做兩件事。 我有一個頁面可以顯示出貨地址，如果按鈕列表中存在多個地址。如果有多個地址，則會出現多個按鈕。用戶還可以輸入新地址。這是來自NopCommerce結帳。使用JQuery來禁用Submit按鈕和/或獲取表單動作值
我想要做的是，如果用戶通過單擊按鈕選擇一個特定的地址來使用，然後獲取該運輸信息並禁用按鈕點擊，執行驗證，然後允許點擊繼續，如果沒有問題。
但是，如果用戶輸入新地址，我想要禁用底部的「提交」按鈕，驗證信息，如果一切正常，則前進通過這些步驟。這是目前比較重要的部分。
有人可以幫助禁用此表單底部的提交按鈕嗎？我嘗試了幾種方法，但無法得到它。
這裏是表單數據：
<div class="page-title">
<h1>Shipping address</h1>
</div>
<div class="page-body checkout-data">
<div class="section select-shipping-address">
<div class="title">
<strong>Select shipping address</strong>
</div>
<div class="address-grid">
<div class="address-item">
<div class="select-button">
<input type="button" value="Ship to this address" class="button-1 select-shipping-address-button" onclick="setLocation('/checkout/selectshippingaddress?addressId=43') " />
</div>
<ul class="address-box">
<li class="name">
<strong>John Smith</strong>
</li>
<li class="email">Email: [email protected]</li>
<li class="phone">
Phone number:
1234567890
</li>
<li class="fax">
Fax number:
</li>
<li class="address1">
320 E 2nd St
</li>
<li class="address2">
</li>
<li class="city-state-zip">
New York ,
New York 10022-6708
</li>
<li class="country">
United States
</li>
</ul>
</div>
<div class="address-item">
<div class="select-button">
<input type="button" value="Ship to this address" class="button-1 select-shipping-address-button" onclick="setLocation('/checkout/selectshippingaddress?addressId=74') " />
</div>
<ul class="address-box">
<li class="name">
<strong>John Smith</strong>
</li>
<li class="email">Email: [email protected]</li>
<li class="phone">
Phone number:
123457890
</li>
<li class="fax">
Fax number:
</li>
<li class="address1">
42 Deacon Lane
</li>
<li class="city-state-zip">
New Hampshire,
New Hampshire 02548
</li>
<li class="country">
United States
</li>
</ul>
</div>
</div>
</div>
<div class="section new-shipping-address">
<div class="title">
<strong>Or enter new address</strong>
</div>
<div class="enter-address">
<form action="/checkout/shippingaddress" method="post">
<div class="enter-address-body">
<script type="text/javascript">
$(function() {
$("#NewAddress_CountryId").change(function() {
var selectedItem = $(this).val();
var ddlStates = $("#NewAddress_StateProvinceId");
var statesProgress = $("#states-loading-progress");
statesProgress.show();
$.ajax({
cache: false,
type: "GET",
url: "/country/getstatesbycountryid",
data: { "countryId": selectedItem, "addEmptyStateIfRequired": "true" },
success: function (data) {
ddlStates.html('');
$.each(data, function (id, option) {
ddlStates.append($('<option></option>').val(option.id).html(option.name));
});
statesProgress.hide();
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve states.');
statesProgress.hide();
}
});
});
});
</script>
<input data-val="true" data-val-number="The field Id must be a number." data-val-required="'Id' must not be empty." id="NewAddress_Id" name="NewAddress.Id" type="hidden" value="0" />
<div class="edit-address">
<div class="inputs">
<label for="NewAddress_FirstName">First name:</label>
<input class="text-box single-line" data-val="true" data-val-required="First name is required." id="NewAddress_FirstName" name="NewAddress.FirstName" type="text" value="John" />
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.FirstName" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_LastName">Last name:</label>
<input class="text-box single-line" data-val="true" data-val-required="Last name is required." id="NewAddress_LastName" name="NewAddress.LastName" type="text" value="Smith" />
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.LastName" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_Email">Email:</label>
<input class="text-box single-line" data-val="true" data-val-email="Wrong email" data-val-required="Email is required." id="NewAddress_Email" name="NewAddress.Email" type="text" value="[email protected]" />
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.Email" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_Company">Company:</label>
<input class="text-box single-line" id="NewAddress_Company" name="NewAddress.Company" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="NewAddress.Company" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_CountryId">Country:</label>
<select data-val="true" data-val-number="The field Country must be a number." data-val-required="Country is required." id="NewAddress_CountryId" name="NewAddress.CountryId">
<option value="0">Select country</option>
<option value="1">United States</option>
<option value="2">Canada</option>
</select>
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.CountryId" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_StateProvinceId">State/province:</label>
<select data-val="true" data-val-number="The field State/province must be a number." id="NewAddress_StateProvinceId" name="NewAddress.StateProvinceId">
<option value="0">Other (Non US)</option>
</select>
<span id="states-loading-progress" style="display: none;" class="please-wait">Wait...</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.StateProvinceId" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_City">City:</label>
<input class="text-box single-line" data-val="true" data-val-required="City is required" id="NewAddress_City" name="NewAddress.City" type="text" value="" />
<span class="required">*</span> <span class="field-validation-valid" data-valmsg-for="NewAddress.City" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_Address1">Address 1:</label>
<input class="text-box single-line" data-val="true" data-val-required="Street address is required" id="NewAddress_Address1" name="NewAddress.Address1" type="text" value="" />
<span class="required">*</span> <span class="field-validation-valid" data-valmsg-for="NewAddress.Address1" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_Address2">Address 2:</label>
<input class="text-box single-line" id="NewAddress_Address2" name="NewAddress.Address2" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="NewAddress.Address2" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_ZipPostalCode">Zip/postal code:</label>
<input class="text-box single-line" data-val="true" data-val-required="Zip/postal code is required" id="NewAddress_ZipPostalCode" name="NewAddress.ZipPostalCode" type="text" value="" />
<span class="required">*</span> <span class="field-validation-valid" data-valmsg-for="NewAddress.ZipPostalCode" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_PhoneNumber">Phone number:</label>
<input class="text-box single-line" data-val="true" data-val-required="Phone is required" id="NewAddress_PhoneNumber" name="NewAddress.PhoneNumber" type="text" value="" />
<span class="required">*</span> <span class="field-validation-valid" data-valmsg-for="NewAddress.PhoneNumber" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_FaxNumber">Fax number:</label>
<input class="text-box single-line" id="NewAddress_FaxNumber" name="NewAddress.FaxNumber" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="NewAddress.FaxNumber" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="buttons">
<input type="submit" name="nextstep" value="Next" class="button-1 new-address-next-step-button" />
</div>
</form>
</div>
我有下面的代碼，但沒有：
$(".new-shipping-address > .enter-address > .enter-address-body > .edit-address > .new-address-next-step-button")[0].onclick = null;
$(".new-shipping-address > .enter-address > .enter-address-body > .edit-address > .new-address-next-step-button").click(function() {
alert("here");
$(":submit").closest("form").submit(function() {
$(':submit').attr('disabled', 'disabled');
});
var selectedShippingAddressId = $('#shipping-address-select').val();
var url = '/WidgetsAddressVerification/PublicInfo/' + selectedShippingAddressId;
var urlNewAddress = '/WidgetsAddressVerification/ValidateNewAddress/';
if (selectedShippingAddressId == "") {
//alert($('#ShippingNewAddress_Id').val());
$.ajax({
type: 'post',
url: urlNewAddress,
data: {
FirstName: $('#NewAddress_FirstName').val(),
LastName: $('#NewAddress_LastName').val(),
CompanyName: $('#NewAddress_Company').val(),
EmailAddress: $('#NewAddress_Email').val(),
CompanyName: $('#NewAddress_Company').val(),
CountryId: $('#NewAddress_CountryId').val(),
StateProvinceId: $('#NewAddress_StateProvinceId').val(),
City: $('#NewAddress_City').val(),
Address1: $('#NewAddress_Address1').val(),
Address2: $('#NewAddress_Address2').val(),
PostalCode: $('#NewAddress_ZipPostalCode').val(),
PhoneNumber: $('#NewAddress_PhoneNumber').val()
},
success: function (data) {
$("#dialog-modal").html(data);
$("#dialog-modal").dialog({
autoOpen: true,
title: 'Address Verification',
height: 360,
width: 500,
modal: true
});
}
});
}
else {
$.ajax({
type: 'post',
url: url,
success: function (data) {
$("#dialog-modal").html(data);
$("#dialog-modal").dialog({
autoOpen: true,
title: 'Address Verification',
height: 360,
width: 500,
modal: true
});
}
});
}
if (e.preventDefault) {
// For modern browsers
e.preventDefault();
}
else {
// For older IE browsers
e.returnValue = false;
}
});
我的問題是，如何讓到該按鈕將其禁用。我想獲得按鈕，禁用提交點擊事件。執行一個操作，然後點擊按鈕。但是當我點擊按鈕時，它會提交併發佈到下一步。我的問題也是我必須深入到水平，因爲這個頁面上有其他按鈕，並且按鈕的類名相同。這有意義嗎？ – sjramsay