使用 Javascript 的 HTML 表单按钮 onclick答案

【问题标题】：HTML Form Button onclick using Javascript使用 Javascript 的 HTML 表单按钮 onclick
【发布时间】：2013-10-20 12:07:02
【问题描述】：

我有一个问题，我试图在使用 Javascript 单击“重置按钮”后将表单中的文本输入更改为黑色。

我曾考虑在 HTML 中使用 onReset 来解决问题，但是，问题表明我必须使用 Javascript only（或 JQuery，如果需要）来解决这个问题，因此下面的下面的HTML 不可编辑。我已经考虑过 document.forms 和 getElementbyID("contact") 但不知道从那里做什么。

任何帮助表示感谢！

这是我的 HTML：

<form id="contact" action="" onsubmit="checkContactForm( this ); return false;" >
<p>
  <label for="name">First name:</label>
  <input name="name" id="name" onfocus="resetField( this );" />
</p>
  <label for="message">Your Message:</label>
  <textarea name="message" id="message" onfocus="resetField( this );"></textarea>
</p>
<p>
  <button type="submit">Send Message</button>
  <button type="reset">Reset Form</button>
</p>

这是我的 Javascript：

var requiredFields = [ "name", "message" ];


function resetField( theField ) {
  if ( theField.value == "Error" ) {
theField.value = "";
theField.style.color = "#000";
  }
}

function resetForm( theForm ){
for ( i in requiredFields ) {
    var fieldName = requiredFields[ i ];
    var theField = theForm[ fieldName ];
    theField.style.color = "#000";
    theField.value = "";
}

【问题讨论】：

你调用的resetField函数在哪里？
对不起，我没有把它添加到上面的问题中

标签： javascript jquery html forms dom

【解决方案1】：

解决方法如下

HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Insert title here</title>
    </head>
    <body>
        <form action="nothing" id="testForm">
            <label for="textInput">Text Input</label>
            <input type="text" id="textInput" name="textInput">
            <label for="textAreaInput">Text Area Input</label>
            <textarea rows="10" cols="20" id="textAreaInput" name="textAreaInput"></textarea>
            <input type="submit" id="submitButton"> <input type="reset" id="resetButton">
        </form>
        <script type="text/javascript" src="scripts/lib/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="scripts/app/test.js"></script>
    </body>
</html>

使用 jquery 的 Javascript 代码

$(document).ready(function() {
        $("#resetButton").click(function() {
            // change color of all textarea fields to red
            $("#testForm textarea").css('color', 'red');
            // change color of all text input fields to red
            $("#testForm input[type='text']").css('color', 'red');
            return false;
        });
    }
);

【讨论】：

【解决方案2】：

我正在尝试使用 Javascript 单击“重置按钮”后将表单中的文本输入更改为黑色。

这可以使用jQuery 中的click 事件来完成。像这样：

$('button[type="reset"]').click(function () {
  /* change the color using
   * $('input').css('color', '#000'); #000 is black..
   */
}

这样，当单击重置按钮时，输入文本的颜色将变为黑色。

重置输入的jQuery代码是：

$('input[type="name"]').val('');

注意 val 方法中的单个 qoutes，这将删除 val 并将其替换为空字符串。你也可以使用双引号作为val("")。

var requiredFields = [ "name", "message" ];

这不是正确的方法，您应该使用input[name="name"]。但是，您可以使用简单的 jQuery 来更改 ID 或类的输入。

您正在使用：

resetField( this );

这不起作用，因为您正在使用script 标记

resetForm

而且由于这两者不匹配，因此不会运行任何脚本！

祝你好运，

【讨论】：

对不起，我的代码中也有resetfield，我没有在上面添加它，因为我认为它与问题无关（现在添加）。我会尽快尝试您的解决方案，谢谢。
哦，没关系！那么现在的问题是什么？代码很好..它在哪里崩溃？