使HTML onClick事件成为条件

时间:2013-09-11 22:43:13

标签: javascript html forms onclick conditional

我之前已经问过这个问题,并让它在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

而不是:

姓名:John Smith

金额:123美元


它还需要适用于将任何其他字段留空的情况。
提前致谢,对不起重复的问题感到抱歉!

2 个答案:

答案 0 :(得分: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;
}

实际功能比内联点击功能提供更多功能。

答案 1 :(得分: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>