Jquery - How to clear an input field on click?

RyanSmith
May 22, 2024
70 views
2 votes
3 Answers

I need to clear total number of devices input field once clicked on checkbox:

If I click on the checkbox Android a number of devices input field pops up then I select the amount of devices and total number of devices input automatically fills in the number, I would like to clear that number when unchecking the Android checkbox: sample of form here:
https://mobile-guardian.webflow.io/form-template

This is the what the script is at the moment:

<script>
document.addEventListener("DOMContentLoaded", function() {
    const deviceInputs = document.querySelectorAll('#chromebook-device, #windows-device, #macos-device, #android-device, #ios-device');
    const totalInput = document.getElementById('total-device');

    deviceInputs.forEach(input => {
        input.addEventListener('input', function() {
            let totalDevices = 0;
            deviceInputs.forEach(input => {
                const number = parseInt(input.value, 10) || 0;
                totalDevices += number;
            });
            totalInput.value = totalDevices;
        });
    });
});
</script>

Answers

- chickenmuggets
- May 22, 2024 at 9:40 am
- 0 votes
0
If you go document.getElemementById(‘your boxes class here’).innerhtml(”) then I think it should clear it

Login or Signup to reply.

I think this will be solve your problem.

Declare your process as function

function calculateTotal(inputs){
   let totalDevices = 0;
   inputs.forEach(input => {
   const number = parseInt(input.value, 10) || 0;
   totalDevices += number;
   });
   totalInput.value = totalDevices;
   return totalDevices;
}

add event listener for checkbox

const checkboxes = document.querySelectorAll(".your-checkbox-class");

document.addEventListener("DOMContentLoaded", function() {
   checkboxes.forEach(checkbox => {
     checkbox.addEventListener('change',()=>{
         calculateTotal(deviceInputs);
      })
   })
})

If you want to empty totalInput as you said just try

const checkboxes = document.querySelectorAll(".your-checkbox-class");

document.addEventListener("DOMContentLoaded", function() {
   checkboxes.forEach(checkbox => {
     checkbox.addEventListener('change',()=>{
         totalInput.value = "";
      })
   })
})

I create array of objects to set dependances idChBox and idTextInput, modify getters of nodeList and create function to get actual nodeList of textInputs. If desired, the code can be shortened.

document.addEventListener("DOMContentLoaded", function() {
  // array of objects which will contain id's of chBoxes and textInputs
  const devicesList = [
    { textInputId:"chromebook-device", chboxInputId:"Chromebook" },
    { textInputId:"windows-device", chboxInputId:"Windows" },
    { textInputId:"macos-device", chboxInputId:"macOS" },
    { textInputId:"android-device", chboxInputId:"Android" },
    { textInputId:"ios-device", chboxInputId:"iOS" },
  ];
  const initialValue = "";
  // old syntax
  // const deviceInputs =  document.querySelectorAll('#chromebook-device, #windows-device, #macos-device, #android-device, #ios-device ');
  const tmpStr1 = devicesList.reduce( (accumulator,curV,curInd)=>{ const comma=curInd===0?"":","; accumulator+=`${comma} #${curV.textInputId}`; return accumulator},initialValue );
  const deviceInputs =  document.querySelectorAll( tmpStr1 );

  // function which will get actual checked textinputs
  const getDeviceInputs = ( devicesList )=>{
    const initialValue = "";
    // old syntax
    // const deviceInputs2 = document.querySelectorAll('#Chromebook:checked,#Windows:checked,#macOS:checked,#Android:checked,#iOS:checked');
    const tmpStr2 = devicesList.reduce( (accumulator,curV,curInd)=>{ const comma=curInd===0?"":","; accumulator+=`${comma} #${curV.chboxInputId}:checked`; return accumulator},initialValue );
    const deviceInputs2 = document.querySelectorAll( tmpStr2 );
    const newTmpArrForTextInputs = [];
    deviceInputs2.forEach(element => {
      const filteredArr = devicesList.filter( element2=> element2.chboxInputId===element.id );
      newTmpArrForTextInputs.push(`#${filteredArr[0].textInputId}`)
    });
    const newTmpStrForTextInputs = newTmpArrForTextInputs.join(", ");
    const newDeviceInputs =  document.querySelectorAll( newTmpStrForTextInputs );
    return newDeviceInputs;
  }

  const totalInput = document.getElementById('total-device');

  deviceInputs.forEach(input => {
      input.addEventListener('input', function() {
          let totalDevices = 0;
          // deviceInputs
          getDeviceInputs(devicesList).forEach(input => {
              const number = parseInt(input.value, 10) || 0;
              totalDevices += number;
          });
          totalInput.value = totalDevices;
      });
  });
});

To make the code shorter, I recommend giving classes for checkboxes and text fields (general, typed and clarifying).

Jquery – How to clear an input field on click?

Answers