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" 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">
) 
<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">
 - 
<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
Answers
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');I guess all you need to do is to add
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.
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:
So does this:
2.Make sure only the phone number are selected
You just need to change the
querySelectorAll('input')toquerySelectorAll('.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.