简体   繁体   English

使用 JavaScript 提交后清除输入字段

[英]Clear an input field after submission using JavaScript

I am a JavaScript newbie.我是 JavaScript 新手。 I have an input text field that I wish to clear after pressing the form submit button.我有一个输入文本字段,我希望在按下表单提交按钮后清除它。 How would I do that?我该怎么做?

In your FORM element, you need to override the onsubmit event with a JavaScript function and return true.在您的 FORM 元素中,您需要使用 JavaScript 函数覆盖onsubmit事件并返回 true。

<script type="text/javascript">
    function onFormSubmit ()
    {
        document.myform.someInput.value = "";
        return true; // allow form submission to continue
    }
</script>
<form name="myform" method="post" action="someaction.php" onsubmit="return onFormSubmit()">
<!-- form elements -->
</form>

If a user presses the submitbutton on a form the data will be submitted to the script given in the action attribute of the form.如果用户按下表单上的提交按钮,数据将被提交到表单的 action 属性中给出的脚本。 This means that the user navigates away from the site.这意味着用户导航离开该站点。 After a refresh (assuming that the action of the form is the same as the source) the input field will be empty (given that it was empty in the first place).刷新后(假设表单的操作与源相同),输入字段将为空(假设它首先是空的)。

If you are submitting the data through javascript and are not reloading the page, make sure that you execute Nick's code after you've submitted the data.如果您通过 javascript 提交数据并且没有重新加载页面,请确保在提交数据后执行 Nick 的代码。

Hope this is clear (although I doubt it, my English is quite bad sometimes)..希望这很清楚(尽管我对此表示怀疑,但我的英语有时很糟糕)。

function testSubmit() { var x = document.forms["myForm"]["input1"]; function testSubmit() { var x = document.forms["myForm"]["input1"]; var y = document.forms["myForm"]["input2"]; var y = document.forms["myForm"]["input2"]; if (x.value === "") { alert('plz fill!!'); if (x.value === "") { alert('plz fill!!'); return false;返回假; } if(y.value === "") { alert('plz fill the!!'); } if(y.value === "") { alert('请填写!!'); return false;返回假; } return true;返回真; } function submitForm() { if (testSubmit()) { document.forms["myForm"].submit(); } function submitForm() { if (testSubmit()) { document.forms["myForm"].submit(); //first submit document.forms["myForm"].reset(); //先提交document.forms["myForm"].reset(); //and then reset the form values } } //然后重置表单值 } }

 First Name: <input type="text" name="input1"/> <br/> Last Name: <input type="text" name="input2"/> <br/> <input type="button" value="Submit" onclick="submitForm()"/> </form>

a simple form in index.html index.html 中的简单表单

<form id="message-form">
      <label for="name">label</label><br />
      <input type="text" placeholder="message" name="name" /><br />
      <button>submit</button>
    </form>

index.js索引.js

const $messageForm = document.getElementById("message-form");
const $messageFormInput = $messageForm.querySelector("input");
const $messageFormButton = $messageForm.querySelector("button");

$messageForm.addEventListener("submit", e => { //listening for submit event
  e.preventDefault();

  $messageFormInput.value = "";}) //value of input will be cleared upon submit 

After successfully submitting or updating form or password you can put empty value.成功提交或更新表单或密码后,您可以输入空值。

CurrentPasswordcontroller.state.confirmPassword = ''; CurrentPasswordcontroller.state.confirmPassword = '';

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM