如何使用“复选框"将当前地址更新为与永久地址相同 [英] How to use a 'checkbox' to update present address to same as permanent address
本文介绍了如何使用“复选框"将当前地址更新为与永久地址相同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
通常在网页上创建表单时，我需要客户填写诸如永久地址和当前地址之类的字段(选中此复选框后会自动填写当前地址). 我可以使用JavaScript将表单的数据从一个字段复制到另一个字段，而不必让客户两次填写该表单.
Often when creating a form on a web page, I need our customers to fill out a field such as a permanent address, as well as a present address( when checked check box then present address fill automatically). Instead of having our customers fill out the form twice,I can use JavaScript to copy the form's data from one field to another.
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div>
<div class="well">
<b>Parmanent Address </b>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="col-lg-12">
@Html.LabelFor(model => model.ParFirstAddr, htmlAttributes: new { @class = "control-label " })
@Html.EditorFor(model => model.ParFirstAddr, new { htmlAttributes = new {@class = "form-control", autocomplete = "off", @placeholder = "Enter Address" } })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
@Html.LabelFor(model => model.ParFirstPO, htmlAttributes: new { @class = "control-label " })
@Html.EditorFor(model => model.ParFirstPO, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.O." } })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
@Html.LabelFor(model => model.ParFirstPS, htmlAttributes: new { @class = "control-label " })
@Html.EditorFor(model => model.ParFirstPS, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.S." } })
</div>
</div>
</div>
</div>
<br />
<div class="well">
<b>Present Address </b>
</div>
<input type="checkbox" name="filladdress" onclick="fillAddress()" /> Present address same as parmanent address.<br />
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="col-lg-12">
@Html.LabelFor(model => model.PreFirstAddr, htmlAttributes: new { @class = "control-label " })
@Html.EditorFor(model => model.PreFirstAddr, new { htmlAttributes = new {@id= "PreFirstAddr", @class = "form-control", autocomplete = "off", @placeholder = "Enter Address", style = "width: 5000px" } })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
@Html.LabelFor(model => model.PreFirstPO, htmlAttributes: new { @class = "control-label " })
@Html.EditorFor(model => model.PreFirstPO, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.O." } })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
@Html.LabelFor(model => model.PreFirstPS, htmlAttributes: new { @class = "control-label " })
@Html.EditorFor(model => model.PreFirstPS, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.S." } })
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-5 col-md-12">
<input type="submit" value="Submit" class="btn btn-success" />
</div>
</div>
</div>
}
<script>
function fillAddress()
{
if (filladdress.checked == true)
{
var addr = document.getElementById("ParFirstAddr").value;
var addrpo = document.getElementById("ParFirstPO").value;
var addrps = document.getElementById("ParFirstPS").value;
var copyaddr = addr;
var copyaddrpo = addrpo;
var copyaddrps = addrps;
document.getElementById("PreFirstAddr").value = copyaddr;
document.getElementById("PreFirstPO").value = copyaddrpo;
document.getElementById("PreFirstPS").value = copyaddrps;
}
else if (filladdress.checked == false)
{
document.getElementById("PreFirstAddr").value = '';
document.getElementById("PreFirstPO").value = '';
document.getElementById("PreFirstPS").value = '';
}
}
</script>
推荐答案
您可以尝试一下，
function fillAddress(){
if ($(this).attr('checked')) {
$("#PreFirstAddr").val($("#ParFirstAddr").val());
$("#PreFirstPO").val($("#ParFirstPO").val());
$("#PreFirstPS").val($("#ParFirstPS").val());
}
else {
$("#PreFirstAddr").val('');
$("#PreFirstPO").val('');
$("#PreFirstPS").val('');
}
}
它不起作用，那么您可以使用setTimeout(function (){ },100)
It's not working then you can use setTimeout(function (){ },100)
这篇关于如何使用“复选框"将当前地址更新为与永久地址相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
