Using A Clear-Filed Button To Clear Some Fields In A Form, But Not All-CodePudding

I have a multipart form which includes 'Name', 'Email' and 'Phone Number' fields.

Note: The phone number 'field' is actually made up of 10 individual 'single-digit' fields.

I want to provide the user with a 'Clear Phone Number" button to reset the phone number fields if they accidentally enter the number incorrectly and need to start over.

However, I do not want the button to clear all of the form data they have already entered, just the collective phone number fields.

I have entered the code I am using below and have tested it. But so far the 'Clear Phone Number' button will only clear the entire form.

Any help in tweaking this code would greatly be appreciated.

Thank you, Maddison

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"  placeholder=" 
Name"><br><br>


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


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


Phone Number:

<br><br>


<!-- Start userPhone Fields -->

<div >

(

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

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

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

)&nbsp

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

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

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

&nbsp-&nbsp

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

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

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

<input type="text" id="userPhone_digit-10" name="userPhone_digit-10"  
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"  
value="Submit Form"></div>

<!-- End Submit Button -->


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

CSS

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

CodePudding user response：

You need to only query your phone field elements for the clear phone field button event listener.

This should work for you 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"  placeholder=" 
Name"><br><br> Email: <input type="email" id="userEmail" name="userEmail"  placeholder=" Email"><br><br>


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


    Phone Number:

    <br><br>


    <!-- Start userPhone Fields -->

    <div >

      (

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

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

      <input type="text" id="userPhone_digit-03" name="userPhone_digit-03"  maxlength="1" placeholder="0"> )&nbsp

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

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

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

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

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

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

      <input type="text" id="userPhone_digit-10" name="userPhone_digit-10"  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"  value="Submit Form"></div>

    <!-- End Submit Button -->


  </form>
</body>

</html>

CodePudding user response：

I guess all you need to do is to add

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

That actually should do the trick. (code is not tested)

You can concat css selectors in your querySelector to select elements more directly. :)

Hope that helps.

CodePudding user response：

.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"  placeholder=" 
Name"><br><br>


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


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


Phone Number:

<br><br>


<!-- Start userPhone Fields -->

<div >

(

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

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

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

)&nbsp

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

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

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

&nbsp-&nbsp

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

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

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

<input type="text" id="userPhone_digit-10" name="userPhone_digit-10"  
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"  
value="Submit Form">

<!-- End Submit Button -->


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

1.Prevent it from submitting

In html, if you put any type of button, whether it is or , in a , it will submit no matter what.

To fix this, just use e.PreventDefault();, although to do this, you need to add a parameter,

This works:

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

So does this:

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

2.Make sure only the phone number are selected

You just need to change the querySelectorAll('input') to querySelectorAll('.phoneField') The period means select the class, so the class phoneField and # select the id like #userEmail.

Note: I just fix a few bugs like div at the end and missing html tag.