在HTML中的输入标记内使用onclick事件来调用Javacscript函数

时间：2016-02-13 12:34:27

标签： javascript html

是否可以在HTML中插入“onclick =”function（）“”，如下所示：

<input type="submit"  name="subm" id="sub" value="Submit" onclick="js()" />

按下此提交按钮后，我想调用脚本中包含的函数js（）。如果我的一个带有“tel”id的输入字段包含或不包含字符，则此函数进行控制。提交表单后没有输出。有人可以帮助这个代码，以便它可以在js（）函数内输出消息。

<script>
  var a=getElementById("tel");
//tel is the id of a input field
function js(){
  
if((a.search(/[a-zA-Z]*/))!=-1){
	document.writeln("Tel nr mustn't contain charachters");
}
else document.writeln("The tel number is Ok");

}
</script>

2 个答案:

答案 0 :(得分：1)

是的，但更好的选择是使用事件监听器。听众与onclick的完整比较如下：addEventListener vs onclick

JS：

var sub = document.getElementById("sub");
sub.addEventListener("click", js);

但是！ （问题1）

请勿使用document.writeln() 。这是因为如果在加载网页后触发该功能，它将擦除整个页面。它仅用于测试而非用于生产性用途。请参阅：http://www.w3schools.com/jsref/met_doc_write.asp

最重要的是！ （问题2）

您的按钮中需要type="button"才能阻止页面重新加载！

此外（问题3）

你不能a.search()。 a是element，而您只能.search() string。要获取输入的值，您需要a.value。

然后（问题4）

如果您使用/[a-zA-Z]*/，正则表达式将无效。尝试使用/[a-zA-Z]/

除此之外（问题5）

没有getElementById()功能。只有document.getElementById()方法。我不知道你是否添加了自己的，但目前这不起作用。

请参阅此示例（我修复了所有错误）：

window.onload = function() {
  var a = document.getElementById("tel");
  var out = document.getElementById("output");
  document.getElementById("btn").addEventListener("click", js);
  function js() {
    if (a.value.search(/[a-zA-Z]/) != -1)
      out.innerHTML = "Tel nr mustn't contain charachters";
    else
      out.innerHTML = "The tel number is Ok";

  }
}
<input type="text" id="tel">
<button type="button" id="btn">Click me :)</button>
<p id="output"></p>

答案 1 :(得分：0)

您是否考虑过使用html5提供的pattern属性？如果您提供模式（正则表达式样式），那么如果字段的内容违反了模式，您将获得特定于浏览器的样式通知 - 它还会阻止在根据模式接受数据之前提交表单。

澄清@Daniel Cheung的答案 - 它确实有用，他应该得到答案（非常类似于我的建议）  〜我确实略微修改了他的代码，但没有改变行为。

尚未解决的是实际提交表格。如果您从标准submit输入按钮更改为常规button，则需要使用javascript提交表单，但您需要确保首先在表单内容中没有错误。< / p> 

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Form field onclick event listener</title>
        <script>
            window.onload = function() {
                var a = document.getElementById("tel");
                var out = document.getElementById("output");
                document.getElementById("bttn").addEventListener("click", js);

                function js() {
                  out.innerHTML = ( a.value.search(/[a-zA-Z]/) != -1 ) ? "Telephone numbers must not contain charachters, only numbers" : "The telephone number is Ok";
                }
            }
        </script>
    </head>
    <body>
        <form method='post' id='fred'>
            <label>Username:<input type='text' name='username' id='username' pattern='[a-zA-Z0-9\s]+' /></label>
            <label>Tel:<input type='text' name='tel' id='tel' pattern='[a-z0-9]{5,16}' /></label>
            <input type='button' name='subm' id='bttn' value='Submit' />
        </form>
        <output id='output'></output>
    </body>
</html>

验证表单并在没有问题时提交的常用方法是为表单本身分配onsubmit事件处理程序。事件处理程序将对数据进行任何处理，并根据是否存在任何错误返回true或false。

例如：

<form method='post' id='fred' onsubmit='return validateform( this )'></form>

function validateform( form ){
    var errors=false;
    /* do tests, displays messages */
    return errors ? false : true;
}

正如我所提到的，这实际上是丹尼尔的代码 - 只是扩展〜他应该得到他的答案 - 仅仅添加我的10分值; - ）

相关问题
最新问题