HTML表单按钮onclick使用Javascript

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

在HTML中使用onReset我曾考虑要解决的问题，但是，问题指出，我必须解决这个使用的Javascript只（或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 = ""; 
}

来源

2013-10-12 Amber

在哪儿的'resetField'功能你呼叫ING？ – j08691

对不起，我没有把它添加到上面的问题 – Amber

我试图改变的形式向黑色后的文字输入点击使用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并且将与空字符串代替它。您也可以使用双重qoutes val("")。

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

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

您正在使用：

resetField(this);

这是行不通的，因为在script标签使用的是

resetForm

而且，由于这些两者不一致，没有脚本可以运行！

祝你好运，

来源

2013-10-12 13:21:27

对不起，我也有我的代码resetfield，我没有在上面添加它，因为我认为这是无关紧要的问题（现在增加）。我会很快尝试你的解决方案，谢谢。 – Amber

哦，好的！那么现在有什么问题？代码很好..它在哪里崩溃？ –

解决方案低于

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>

Javascript代码使用jQuery

$(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; 
     }); 
    } 
);

来源

2013-10-12 14:13:09 code2use

HTML表单按钮onclick使用Javascript

回答

相关问题