this question is two part. I am trying to do two things here depending on the users actions. I have a page that displays the shipping addresses if more than one exist in a button kind of list. If there are more than one address, more than one button will appear. The user also has the ability to enter in a new address. This is from NopCommerce checkout.
这个问题是两个部分。我试图在这里做两件事取决于用户的行为。如果按钮类型列表中存在多个地址,我有一个显示送货地址的页面。如果有多个地址,则会出现多个按钮。用户还可以输入新地址。这是来自NopCommerce结帐。
What I would like to do, is if the user selects a particular address to use by clicking the button, then get that shipping information and disable the button click, perform validation and then allow the click to continue if okay.
我想做的是,如果用户通过单击按钮选择要使用的特定地址,然后获取该发货信息并禁用按钮单击,执行验证,然后允许点击继续,如果没问题。
However, if the user enters a new address, I would like to disable the "submit" button at the bottom, verify the info, if all is good, move forward through the steps. This is the more important part right now.
但是,如果用户输入新地址,我想禁用底部的“提交”按钮,验证信息,如果一切正常,请继续执行这些步骤。这是现在更重要的部分。
Can someone assist in disabling the submit button at the bottom of this form? I have tried a few ways, but can't get it.
有人可以帮助禁用此表单底部的提交按钮吗?我尝试了几种方法,但无法得到它。
Here is the form data:
这是表单数据:
<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: admin@yourstore.com</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: admin@yourstore.com</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="admin@mariobadescu.com" />
<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>
I have the following code but nothing:
我有以下代码,但没有:
$(".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;
}
});
2 个解决方案
#1
0
Not sure exactly what the issue is. The core part of your question is easy enough. To disable a button you just add a disabled attribute to it. With jQuery:
不确定问题究竟是什么。你问题的核心部分很简单。要禁用按钮,只需向其添加禁用属性即可。使用jQuery:
$('#myButton').prop('disabled', true);
Now, if your question has more to do with how to know when it should be disabled, that's kind of all on you. Basically, you'll just need to bind to the change event on one or more fields that you determine are definitive: i.e., if the user filled this field out, then the button should be disabled. Then, disable the button in those scenarios.
现在,如果你的问题更多地与如何知道它应该被禁用有关,那就是你的全部。基本上,您只需要绑定到您确定的一个或多个字段上的更改事件是确定的:即,如果用户填写此字段,则应禁用该按钮。然后,在这些情况下禁用该按钮。
You may also want to investigate using a framework like Knockout. By binding fields as observables, you can be instantly notified of changes and have things happen on page based on current statuses. For example, you can use a data bind like:
您可能还想使用像Knockout这样的框架进行调查。通过将字段绑定为可观察对象,您可以立即收到有关更改的通知,并根据当前状态在页面上进行操作。例如,您可以使用数据绑定,如:
<button type="submit" data-bind="attr: { disabled: SubmitDisabled }">Submit</button>
And assuming SubmitDisabled is an obversable, the submit button would be disabled or enabled automatically depending on whether it returned true or false at any given moment.
假设SubmitDisabled是可观的,则提交按钮将被自动禁用或启用,具体取决于它在任何给定时刻是返回true还是false。
#2
0
This should disable the button:
这应该禁用按钮:
$( '.new-address-next-step-button' ).prop( 'disabled', true );
#1
0
Not sure exactly what the issue is. The core part of your question is easy enough. To disable a button you just add a disabled attribute to it. With jQuery:
不确定问题究竟是什么。你问题的核心部分很简单。要禁用按钮,只需向其添加禁用属性即可。使用jQuery:
$('#myButton').prop('disabled', true);
Now, if your question has more to do with how to know when it should be disabled, that's kind of all on you. Basically, you'll just need to bind to the change event on one or more fields that you determine are definitive: i.e., if the user filled this field out, then the button should be disabled. Then, disable the button in those scenarios.
现在,如果你的问题更多地与如何知道它应该被禁用有关,那就是你的全部。基本上,您只需要绑定到您确定的一个或多个字段上的更改事件是确定的:即,如果用户填写此字段,则应禁用该按钮。然后,在这些情况下禁用该按钮。
You may also want to investigate using a framework like Knockout. By binding fields as observables, you can be instantly notified of changes and have things happen on page based on current statuses. For example, you can use a data bind like:
您可能还想使用像Knockout这样的框架进行调查。通过将字段绑定为可观察对象,您可以立即收到有关更改的通知,并根据当前状态在页面上进行操作。例如,您可以使用数据绑定,如:
<button type="submit" data-bind="attr: { disabled: SubmitDisabled }">Submit</button>
And assuming SubmitDisabled is an obversable, the submit button would be disabled or enabled automatically depending on whether it returned true or false at any given moment.
假设SubmitDisabled是可观的,则提交按钮将被自动禁用或启用,具体取决于它在任何给定时刻是返回true还是false。
#2
0
This should disable the button:
这应该禁用按钮:
$( '.new-address-next-step-button' ).prop( 'disabled', true );