使用清除欄位按鈕清除表單中的某些欄位，但不是全部-有解無憂

我有一個包含“姓名”、“電子郵件”和“電話號碼”欄位的多部分表單。

注意：電話號碼“欄位”實際上由 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;}

uj5u.com熱心網友回復：

您只需要查詢您的電話欄位元素以獲取清除電話欄位按鈕事件偵聽器。

這應該適合你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>

uj5u.com熱心網友回復：

我想你需要做的就是添加

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

這實際上應該可以解決問題。（代碼未測驗）

您可以在 querySelector 中連接 css 選擇器以更直接地選擇元素。:)

希望有所幫助。

uj5u.com熱心網友回復：

.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 中，如果您放置任何型別的按鈕，無論是還是，在中，無論如何它都會提交。

要解決此問題，只需使用e.PreventDefault();，盡管要執行此操作，您需要添加一個引數，

這有效：

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

這樣做也是如此：

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

2.確保只選擇電話號碼

您只需要將句點更改querySelectorAll('input')為querySelectorAll('.phoneField') “選擇類”即可，因此類 phoneField 和#select the id like #userEmail。

注意：我只是修復了一些錯誤，比如末尾的 div 和缺少的 html 標簽。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/535689.html

標籤：javascript网页格式查询形式

上一篇：通過進入上一頁或離開當前頁面以草稿形式發送資料

下一篇：如何在提交到另一個表單后將資料保存在陣列中