简体   繁体   English

选中复选框时,警报文本框为空

[英]Alert textbox is empty when checkbox is checked

This might be a bit confusing but bear with me. 这可能有点令人困惑,但请多多包涵。 I need 2 textbox and 1 checkbox. 我需要2个文本框和1个复选框。 When the checkbox is checked, it needs to check whether the textboxes are filled or not. 选中复选框后,需要检查文本框是否已填充。 If the textboxes are filled in, it will do nothing. 如果填写了文本框,则不会执行任何操作。

I'm really struggling with this so I would really appreciate it. 我为此感到非常挣扎,因此我将不胜感激。 If you don't understand what I even said, here's the question that I need to solve. 如果您不明白我什至在说什么,这是我需要解决的问题。

*In page order.html, create a checkbox with label “same as delivery address” somewhere appropriate near the fields for billing address. *在order.html页面中,在帐单地址字段附近的适当位置创建一个标签为“与送货地址相同”的复选框。 When this checkbox is checked, the fields for billing address will be filled with the delivery address automatically. 选中此复选框后,帐单地址字段将自动填充送货地址。 If the delivery address is not completed when this checkbox is checked, display an alert or inline message: “Please enter your delivery address first”. 如果选中此复选框后送货地址未完成,则显示警告或内联消息:“请先输入您的送货地址”。 * *

I've managed to do the duplicate part with these codes.(address and post codes are separated) 我设法用这些代码重复了一部分。(地址和邮政编码分开了)

function copy() {
var daddress = document.getElementById("daddress");
var baddress = document.getElementById("baddress");
baddress.value = daddress.value;
var dpost = document.getElementById("dpost");
var bpost = document.getElementById("bpost");
bpost.value = dpost.value;  
}

But I cannot figure out the part after this. 但是,在此之后我无法弄清楚那部分。

Here's the code for the checkbox 这是复选框的代码

<input id="duplicate" type="checkbox" name="duplicate"
value="Duplicate" onClick="copy();"/>Same as delivery address
<p id="dalert"><b><i>Please  enter your delivery address first</i></b><p>

In this case you could use a textarea for the address: 在这种情况下,您可以使用文本区域作为地址:

<textarea id="delivery-address"></textarea>

Then you would use JavaScript to get the contents of it with: 然后,您将使用JavaScript通过以下方式获取其内容:

var deliveryAddress = document.getElementById("delivery-address").value.trim();

To check if they entered an address, you would use: 要检查他们是否输入了地址,您可以使用:

if (deliveryAddress === "") { ... }

In most cases, the address would be broken up into several inputs, often two lines for the street address, an input for city, state and postal code. 在大多数情况下,地址会分为几个输入,通常是街道地址的两行,城市,州和邮政编码的输入。

An alert is displayed like so: 警报显示如下:

alert('Some text');

You can use an if statement to check whether there's any input before setting them. 您可以使用if语句在设置输入之前检查是否有任何输入。

if (daddress.value && dpost.value) {
    baddress.value = daddress.value;
    bpost.value = dpost.value;
} else {
    alert('Please enter your delivery address first!');
    e.preventDefault(); // Stops checkbox from becoming checked.
}

JSFiddle JSFiddle

Edit: Forgot to mention that to use e.preventDefault() , you need to change your function to accept the e parameter ( function copy(e) {...} ) and pass event in your onclick event ( onclick="copy(event)" ). 编辑:忘了提,使用e.preventDefault()你需要改变你的函数接受e参数( function copy(e) {...}并通过event在你的onclick事件( onclick="copy(event)" )。 You'll see those in the JSFiddle. 您会在JSFiddle中看到它们。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM