使 HTML onClick 事件有条件答案

【问题标题】：Making HTML onClick events conditional使 HTML onClick 事件有条件
【发布时间】：2013-09-16 03:29:59
【问题描述】：

我以前问过这个问题，并让它在 ie7 中起作用。从那以后，我们升级到 IE 8，我找不到让它工作的方法。我有一个由用户手动填写的表单，当他们单击复制时，表单会连接到一个应用了格式的文本框中。我需要格式是有条件的，所以如果表单的某些部分没有输入或留空，它们不会在格式中留下空换行符。示例表格：

<body>
<form name="data_entry" id="frm1"

<tr>
<td>Name of Person:</td>
<td><textarea name="name" rows="2" cols="30" id="name"></textarea></td>
</tr><br>

<tr>
<td>Type of Service:</td>
<td><select name="drop1" id="txt_drop1">
    <option value="">None</option>
    <option value="Type of Service: Minimal">Minimal</option>
    <option value="Type of Service: Normal">Normal</option>
    <option value="Type of Service: Full">Full</option>
    <option value="Type of Service: Premium">Premium</option>
</select></td>
</tr><br>

<tr>
<td>Dollar Amount:</td>
<td><textarea name="amount" rows="1" cols="30" id="txt_info2"></textarea></td>
</tr><br>

<tr>
<td><textarea name="bigtextbox" rows="5" cols="30" id="txt_info2"></textarea></td>
</tr>
</form>
</body>

<input type="button" style="font-weight:bold;" name="clipboard_copy" value="Copy" onClick="document.data_entry.bigtextbox.value = 'Name:&nbsp;' + document.data_entry.name.value + '\n' + document.data_entry.drop1.value + '\n' + 'Amount: $' + document.data_entry.amount.value">

</body>

如果“服务类型”值为空，我希望实现的结果是：

姓名：约翰·史密斯
金额：$123

而不是：

姓名：约翰·史密斯

金额：$123

它还需要适用于他们将任何其他字段留空的情况。
在此先感谢，对于重复的问题，我们深表歉意！

【问题讨论】：

标签： javascript html forms onclick conditional

【解决方案1】：

<html>
<head>
<title>test</title>
<script type="text/javascript" language="javascript">
    function validate() {
        var value = '';

        try {
            if (document.data_entry.name.value.length > 0) {
                value += 'Name: ' + document.data_entry.name.value + '\n';
            }

            if (document.data_entry.drop1.selectedIndex > 0) {
                value += document.data_entry.drop1[document.data_entry.drop1.selectedIndex].value + '\n';
            }

            if (document.data_entry.amount.value.length > 0) {
                value += 'Amount: $' + document.data_entry.amount.value;
            }

            document.data_entry.bigtextbox.value = value;
        }
        catch (Error) {
            alert(Error);
        }
    }
</script>
</head>

<body>
<form name="data_entry" id="frm1">

<tr>
<td>Name of Person:</td>
<td><textarea name="name" rows="2" cols="30" id="name"></textarea></td>
</tr><br>

<tr>
<td>Type of Service:</td>
<td><select name="drop1" id="txt_drop1">
    <option value="">None</option>
    <option value="Type of Service: Minimal">Minimal</option>
    <option value="Type of Service: Normal">Normal</option>
    <option value="Type of Service: Full">Full</option>
    <option value="Type of Service: Premium">Premium</option>
</select></td>
</tr><br>

<tr>
<td>Dollar Amount:</td>
<td><textarea name="amount" rows="1" cols="30" id="txt_info2"></textarea></td>
</tr><br>

<tr>
<td><textarea name="bigtextbox" rows="5" cols="30" id="txt_info2"></textarea></td>
</tr>
</form>
</body>

<input type="button" style="font-weight:bold;" name="clipboard_copy" value="Copy" onClick="validate();">

</body>
</html>

【讨论】：

我假设这意味着，像这样设置 onlick ： document.data_entry.name.value + '\n' + (document.data_entry.drop1.value.length > 0) ？ document.data_endry.drop1.value + '\n' : '') + document.data_entry.drop1.value
基本上是的。您实际上可以对所有值执行此操作（取决于是否需要以及是否进行了验证）。此外，您可能需要通过输入集合“document.data_entry.drop1[document.data_entry.drop1.selectedIndex].value”从下拉列表中获取值
另外，正如 Max 所说，你真的应该把它移到一个函数中，而不是内联它。
我无法在 Max 的回复中评论您的问题，但是由于您将信息放入另一个 HTML 控件中，以摆脱只需使用空格字符。如果您将信息放在页面上，您可以使用
这里是 javascript 三元运算符的链接供参考，因为您提到您是新手msdn.microsoft.com/en-us/library/ie/be21c7hw(v=vs.94).aspx

【解决方案2】：

看起来您想让clipboard_copy 上的 onClick 事件引用一个单独的函数。例如：

onClick="validate()"

您的函数可以使用简单的 if 语句来正确格式化输出：

function validate() {
     var value;
     if (document.data_entry.bigtextbox.value.length > 0) value += 'Name:&nbsp;' +
     document.data_entry.name.value + '\n';
     if (document.data_entry.drop1.value.length > 0) value += document.data_entry.drop1.value + '\n';
     if (document.data_entry.amount.value.length > 0) value += 'Amount: $' + document.data_entry.amount.value;

    document.data_entry.bigtextbox.value = value;
}

真正的函数比内联的 onclick 功能更强大。

【讨论】：

谢谢！这更有意义，我只是不太擅长 Javascript。如何使它不将“&nbsp”作为文本返回？以及每次单击副本时如何阻止它在开头放置“未定义”？