堆栈内存溢出
  繁体   English   中英

使用清除字段按钮清除表单中的某些字段，但不是全部

[英]Using A Clear-Filed Button To Clear Some Fields In A Form, But Not All

 原文  2022-11-13 21:59:06  6   3    javascript/ html/ jquery/ forms

问题描述

我有一个包含“姓名”、“电子邮件”和“电话号码”字段的多部分表单。

注意：电话号码“字段”实际上由 10 个单独的“个位数”字段组成。

我想为用户提供一个“清除电话号码”按钮，以便在他们不小心输入错误号码并需要重新开始时重置电话号码字段。

但是，我不希望按钮清除他们已经输入的所有表单数据，只清除集体电话号码字段。

我在下面输入了我正在使用的代码并对其进行了测试。 但到目前为止，“清除电话号码”按钮只会清除整个表格。

在调整此代码方面的任何帮助将不胜感激。

谢谢你，麦迪逊

HTML

<!DOCTYPE html>

<head>

</head>

<body>


<!-- START FORM -->

<form action="/formHandler.php" method="post" enctype="multipart/form-data">


<!-- START CONTACT INFORMATION -->

Name: <input type="text" id="userName" name="userName" class="userName_Field" placeholder=" 
Name"><br><br>


Email: <input type="email" id="userEmail" name="userEmail" class="userEmail_Field" 
placeholder=" Email"><br><br>


<!-- ////////// Start Phone Number ////////// -->


Phone Number:

<br><br>


<!-- Start userPhone Fields -->

<div class="phoneField_Wrapper">

(

<input type="text" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" 
maxlength="1" placeholder="0">

)&nbsp

<input type="text" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" 
maxlength="1" placeholder="0">

&nbsp-&nbsp

<input type="text" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" 
maxlength="1" placeholder="0">

</div>


<br><br>

<!-- End userPhone Fields -->


<!-- Start Clear Fields Button -->

<div><button>Clear Phone Number</button></div>

<!-- End Clear Fields Button -->


<br><br>


<!-- Start Advance Next Field Script -->

<script>

var phoneField_Wrapper = document.getElementsByClassName("phoneField_Wrapper")[0];
phoneField_Wrapper.onkeyup = function(e) {
var target = e.srcElement;
var maxLength = parseInt(target.attributes["maxlength"].value, 10);
var myLength = target.value.length;
if (myLength >= maxLength) {
var next = target;
while (next = next.nextElementSibling) {
if (next == null)
break;
if (next.tagName.toLowerCase() == "input") {
next.focus();
break;
}
}
}
}     

</script>

<!-- End Advance Next Field Script -->



<!-- Start Clear Fields Button Script -->

<script>

let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('input');
btnClear.addEventListener('click', () => {
inputs.forEach(input =>  input.value = '');
});

</script>

<!-- End Clear Fields Button Script -->


<!-- ////////// End Phone Number ////////// -->




<!-- Start Submit Button -->

<input type="submit" id="submitForm_Button" name="submitForm_Button" class="submitForm_Button" 
value="Submit Form"></div>

<!-- End Submit Button -->


</form>
</body>
</html>

CSS

.phoneField {width: 14px; text-align: center;}

3 个解决方案

解决方案1
 1 已采纳  2022-11-13 22:13:38

您只需要查询电话字段元素以获取清除电话字段按钮事件侦听器。

这应该对你let inputs = document.querySelectorAll('.phoneField'); 

 let btnClear = document.querySelector('button'); let inputs = document.querySelectorAll('.phoneField'); btnClear.addEventListener('click', () => { inputs.forEach(input => input.value = ''); }); var phoneField_Wrapper = document.getElementsByClassName("phoneField_Wrapper")[0]; phoneField_Wrapper.onkeyup = function(e) { var target = e.target; var maxLength = parseInt(target.attributes["maxlength"].value, 10); var myLength = target.value.length; if (myLength >= maxLength) { var next = target; while (next = next.nextElementSibling) { if (next == null) break; if (next.tagName.toLowerCase() == "input") { next.focus(); break; } } } }
 <.DOCTYPE html> <head> </head> <body> <:-- START FORM --> <form action="/formHandler:php" method="post" enctype="multipart/form-data"> <:-- START CONTACT INFORMATION --> Name: <input type="text" id="userName" name="userName" class="userName_Field" placeholder=" Name"><br><br> Email: <input type="email" id="userEmail" name="userEmail" class="userEmail_Field" placeholder=" Email"><br><br> <!-- ////////// Start Phone Number ////////// --> Phone Number: <br><br> <!-- Start userPhone Fields --> <div class="phoneField_Wrapper"> ( <input type="text" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" maxlength="1" placeholder="0"> )&nbsp <input type="text" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" maxlength="1" placeholder="0"> &nbsp-&nbsp <input type="text" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" maxlength="1" placeholder="0"> </div> <br><br> <!-- End userPhone Fields --> <!-- Start Clear Fields Button --> <div><button type="button">Clear Phone Number</button></div> <!-- End Clear Fields Button --> <br><br> <!-- Start Advance Next Field Script --> <script> </script> <!-- End Advance Next Field Script --> <!-- Start Clear Fields Button Script --> <script> </script> <!-- End Clear Fields Button Script --> <!-- ////////// End Phone Number ////////// --> <!-- Start Submit Button --> <input type="submit" id="submitForm_Button" name="submitForm_Button" class="submitForm_Button" value="Submit Form"></div> <!-- End Submit Button --> </form> </body> </html>

解决方案2
 0  2022-11-13 22:15:36

我想你需要做的就是添加

let inputs = document.querySelectorAll(“input.phoneField“)

这实际上应该可以解决问题。 （代码未测试）

您可以更直接地将 querySelector 中的 css 选择器连接到 select 元素。 :)

希望有所帮助。

解决方案3
 0  2022-11-13 22:52:03

 .phoneField {width: 14px; text-align: center;}
 <.DOCTYPE html> <html> <head> </head> <body> <:-- START FORM --> <form action="/formHandler:php" method="post" enctype="multipart/form-data"> <:-- START CONTACT INFORMATION --> Name. <input type="text" id="userName" name="userName" class="userName_Field" placeholder=" Name"><br><br> Email; <input type="email" id="userEmail" name="userEmail" class="userEmail_Field" placeholder=" Email"><br><br> <.-- ////////// Start Phone Number ////////// --> Phone Number. <br><br> <;-- Start userPhone Fields --> <div class="phoneField_Wrapper"> ( <input type="text" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" maxlength="1" placeholder="0"> )&nbsp <input type="text" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" maxlength="1" placeholder="0"> &nbsp-&nbsp <input type="text" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" maxlength="1" placeholder="0"> <input type="text" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" maxlength="1" placeholder="0"> </div> <br><br> <.-- End userPhone Fields --> <.-- Start Clear Fields Button --> <div><button>Clear Phone Number</button></div> <,-- End Clear Fields Button --> <br><br> <;-- Start Advance Next Field Script --> <script> var phoneField_Wrapper = document.getElementsByClassName("phoneField_Wrapper")[0]. phoneField_Wrapper;onkeyup = function(e) { var target = e;srcElement. var maxLength = parseInt(target;attributes["maxlength"].value. 10). var myLength = target;value;length. if (myLength >= maxLength) { var next = target; while (next = next:nextElementSibling) { if (next == null) break. if (next.tagName,toLowerCase() == "input") { next.focus(). break; } } } } </script> <.-- End Advance Next Field Script --> <,-- Start Clear Fields Button Script --> <script> let btnClear = document:querySelector('button'). /*Highlight. change this so it only selects the phone number inputs. (use;phoneField. the dot means class # means id) */ let inputs = document.querySelectorAll(';phoneField'); btnClear.addEventListener('click', (e) => { /*Highlight: e.preventDefault() prevents it from "submitting" the form cause thats what buttons do when put in <form> tags.*/ e.preventDefault(); inputs.forEach(input => input.value = ''); }); </script> <!-- End Clear Fields Button Script --> <!-- ////////// End Phone Number ////////// --> <!-- Start Submit Button --> <input type="submit" id="submitForm_Button" name="submitForm_Button" class="submitForm_Button" value="Submit Form"> <!-- End Submit Button --> </form> </body> </html>

1.阻止提交

在 html 中，如果你放置任何类型的按钮，无论是 or，在 a 中，它都会提交。

要解决此问题，只需使用e.PreventDefault(); ，虽然要做到这一点，你需要添加一个参数，

这有效：

btnClear.addEventListener('click', (event) => {
event.preventDefault();
...
}

这样做也是如此：

btnClear.addEventListener('click', (foofoo) => {
foofoo.preventDefault();
...
}

2.确保只选择电话号码

您只需要将querySelectorAll('input')更改为querySelectorAll('.phoneField')期间表示 select class，因此 class phoneField 和#select id 就像#userEmail。

注意：我只是修复了一些错误，比如最后的 div 和缺少 html 标签。

暂无
暂无

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

相关问题 按钮清除所有选择字段 每次点击返回按钮时，清除表单中的所有字段 清除所有字段上的表单字段 一次清除所有表单字段，reactjs 搜索后如何清除表单中的所有字段？ 在后退按钮上清除表单字段onLoad和onUnload 如何使用jQuery清除Spring表单字段？ 清除表单提交后提交的输入 清除不活动的表单字段 在Django中按下清除按钮时清除输入文件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM