Fatal编程技术网
  • javascript/
  • Javascript 使HTML onClick事件有条件

Javascript 使HTML onClick事件有条件

javascript html forms

Javascript 使HTML onClick事件有条件,javascript,html,forms,onclick,conditional,Javascript,Html,Forms,Onclick,Conditional,我以前问过这个问题，并且在ie7中实现了功能。从那时起，我们升级到IE8，我找不到一种方法使它工作。我有一个由用户手动填写的表单，当用户单击“复制”时，该表单会连接到一个文本框中，并应用格式设置。我需要格式化是有条件的，因此如果表单的某些部分没有输入或留空，它们不会在格式化中留下空行分隔符。示例表格： <body> <form name="data_entry" id="frm1" <tr> <td>Name of Person:</td>

我以前问过这个问题，并且在ie7中实现了功能。从那时起，我们升级到IE8，我找不到一种方法使它工作。我有一个由用户手动填写的表单，当用户单击“复制”时，该表单会连接到一个文本框中，并应用格式设置。我需要格式化是有条件的，因此如果表单的某些部分没有输入或留空，它们不会在格式化中留下空行分隔符。示例表格：

<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>



看起来您希望在
剪贴板上的onClick事件\u copy
引用一个单独的函数。例如：


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功能相比，实函数提供了更多的功能。
看起来您希望将onclick事件放在
剪贴板上\u copy
引用一个单独的函数。例如：


<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>



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功能提供更多的功能。


<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>


测试
函数验证（）{
var值=“”；
试一试{
如果（document.data\u entry.name.value.length>0）{
value+='Name:'+document.data_entry.Name.value+'\n'；
}
如果（document.data\u entry.drop1.selectedIndex>0）{
value+=document.data\u entry.drop1[document.data\u entry.drop1.selectedIndex].value+'\n'；
}
如果（document.data\u entry.amount.value.length>0）{
值+='金额：$'+document.data_entry.Amount.value；
}
document.data\u entry.bigtextbox.value=值；
}
捕获（错误）{
警报（错误）；
}
}
姓名:


服务类别：
没有一个
最小的
正常的
满满的
保险费


美元金额：




测试
函数验证（）{
var值=“”；
试一试{
如果（document.data\u entry.name.value.length>0）{
value+='Name:'+document.data_entry.Name.value+'\n'；
}
如果（document.data\u entry.drop1.selectedIndex>0）{
value+=document.data\u entry.drop1[document.data\u entry.drop1.selectedIndex].value+'\n'；
}
如果（document.data\u entry.amount.value.length>0）{
值+='金额：$'+document.data_entry.Amount.value；
}
document.data\u entry.bigtextbox.value=值；
}
捕获（错误）{
警报（错误）；
}
}
姓名:


服务类别：
没有一个
最小的
正常的
满满的
保险费


美元金额：



谢谢！这更有意义，我只是还不太擅长Javascript。如何使其不以文本形式返回“ ”？我是如何阻止每次点击拷贝时在开头加上“未定义”的呢？谢谢！这更有意义，我只是还不太擅长Javascript。如何使其不以文本形式返回“ ”？如何防止每次单击复制时在开始处添加“undefined”（未定义）？我假设这意味着，将onlick设置为：document.data\u entry.name.value++'\n'+（document.data\u entry.drop1.value.length>0）？document.data\u endry.drop1.value+'\n'：''）+document.data\u entry.drop1.value基本上是。实际上，您可以对所有值执行此操作（取决于哪些值是必需的，哪些值不是必需的，以及是否有验证）。此外，您可能需要通过输入集合“document.data\u entry.drop1[document.data\u entry.drop1.selectedIndex].value”从下拉列表中获取值。此外，正如Max提到的，您确实应该将其移动到函数中，而不是将其内联。我无法在Max的回答中对您的问题进行评论，但是，由于您将信息放入另一个HTML控件中，所以要除去这些信息，只需使用空格字符。如果您将信息放在页面上，您可以在这里使用的是javascript中三元运算符的链接，以供参考，因为您提到您是新手，我假设这意味着，将onlick设置为这样：document.data_entry.name.value++'\n'+（document.data_entry.drop1.value.length>0）？document.data\u endry.drop1.value+'\n'：''）+document.data\u entry.drop1.value基本上是。实际上，您可以对所有值执行此操作（取决于哪些值是必需的，哪些值不是必需的，以及是否有验证）。此外，您可能需要通过输入集合“document.data\u entry.drop1[document.data\u entry.drop1.selectedIndex].value”从下拉列表中获取值。此外，正如Max提到的，您确实应该将其移动到函数中，而不是将其内联。我无法在Max的回答中对您的问题进行评论，但是，由于您将信息放入另一个HTML控件中，所以要除去这些信息，只需使用空格字符。如果您将信息放在页面上，您可以在这里使用javascript中三元运算符的链接，以供参考，因为您提到您是新手