javascript 单击按钮时清除表单文本框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20781952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 19:17:48  来源:igfitidea点击:

Clear form Text boxes on Button Click

javascriptjquery

提问by KC Chai

I would like to clear all the texts boxes on register button click. Below is my attempt. When I click on the button, the texts still remains. Please advise. Thanks

我想清除点击注册按钮时的所有文本框。下面是我的尝试。当我点击按钮时,文本仍然存在。请指教。谢谢

<form action="#" class="signup" method="post" onsubmit="return signup();">
    <input type="text" id="signup-email" class="text-input" name="email" title="E-mail" autocomplete="off" tabindex="11" placeholder="E-mail">
    <input type="password" id="signup-password" class="text-input" name="password" title="Password" autocomplete="off" tabindex="12" placeholder="Password">
    <input type="password" id="signup-password2" class="text-input" name="password2" title="Confirm password" autocomplete="off" tabindex="13" placeholder="Confirm password">
    <table>
        <tr>
            <td></td>
            <td class="align-right">
                <button type="submit" class="signup-btn" onclick="this.form.elements['text-input'].value=''">Register</button>
            </td>
        </tr>
    </table>
</form>

回答by Let me see

try this

试试这个

<button type="submit" class="signup-btn" onclick="this.form.reset();">Register</button>

回答by Milind Anantwar

Add id attribute to form element. and then you can try this:

将 id 属性添加到表单元素。然后你可以试试这个:

  <button type="submit" class="signup-btn" onclick="document.getElementById('formid').reset();">Register</button>

回答by Tony Jose

Try this.

试试这个。

   document.getElementById("myForm").reset();

回答by user2936213

Try this:

试试这个:

$(function() {
  $('.signup-btn').click(function() {
    $('.signup input[type="text"]').val('');
  });
});

And you register button would be:

你注册按钮将是:

<button type="submit" class="signup-btn">Register</button>

回答by Yuriah

Since he wants the form to reset it self automatically he can make a hidden reset button and make it click on submit.

由于他希望表单自动重置它,他可以制作一个隐藏的重置按钮并点击提交。

<input type="reset" id="reset_button" style="display:none"/>

Then click the button by its id on submit of the form.

然后在提交表单时按其 id 单击按钮。

$('reset_button').click();

回答by Sridhar R

Try this

试试这个

<button type="submit" class="signup-btn" onclick="$('form')[0].reset()">Register</button>

回答by skos

IMO this.form.elements[]is a collection array and you can access individual elements by passing either index or element name

IMOthis.form.elements[]是一个集合数组,您可以通过传递索引或元素名称来访问单个元素

For example, this.form.elements[0].value=''

例如, this.form.elements[0].value=''

OR

或者

this.form.elements['email'].value='', this.form.elements['password'].value=''

this.form.elements['email'].value='', this.form.elements['password'].value=''

I am not sure if you can really pass the class name to it to access all elements with that class name. To reset all elements in the form, you can use this.form.reset()

我不确定您是否真的可以将类名传递给它以访问具有该类名的所有元素。要重置表单中的所有元素,您可以使用this.form.reset()

回答by Kiran RS

Try this, First you need to edit your form tag like

试试这个,首先你需要编辑你的表单标签,比如

<form action="#" name="form1" class="signup" method="post" onsubmit="return signup();">

Now add this script.

现在添加这个脚本。

function resetForm($form1) {
    $form.find('input:text, input:password').val('');
}

resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

回答by Kiran RS

Add reset button to your form,

将重置按钮添加到您的表单中,

<button type="reset" value="Reset">Reset</button>