Question

This one is a bit different than the solutions I’ve found thus far. What I have is an HTML form with nearly 500 tags (a browser-based timecard input accounting for a 15-hour window all 7 days with inputs for 15-minute intervals). I’ve named these input tags to be fairly intuitive. Monday’s inputs are named M600, M615, M630, M645, M700 … M2100. Tuesday’s are T###, W### and so on. All of them are in a single form, when on submittal JSON-encodes everything and writes it to a text database to be recalled dynamically later. If the form has not been submitted (via a hidden tag to detect submittal, the page will pull in and decode values from the JSON file into the form as default input values.

What I’m wanting to do is somehow create an html link for each day that will clear only that day’s set of values. I have an idea that this would somehow trigger from a link (or button) onClick event, and run a script that would be similar to form.field.this.value(“”). However, rather than referencing ‘this’, I need to reference all inputs with the equivalent of a regex search string of, say, $(M\d)^.

In an algorithmic sense:

<input type="text" value="1234" name="M900"/>
<input type="text" value="3456" name="M915"/>
<input type="text" value="1234" name="T900"/>
<input type="text" value="3456" name="T915"/>
<a onClick="clearMondayOnly">Clear Monday's Fields</a>

<script>
function clearMondayOnly() {

  for each input element where name matches "M###" do
   $0.value=""
  end
}
</script>

Admittedly I’m not fluent in javascript, though I’m sure I could muddle my way through, if I knew how to initiate match strings. Additionally, I’d like to try avoiding things like jQuery objects, as I’m sure this can be done with just straight-up JS.

Thanks.

Answer 1

Something like this should work in plain modern JavaScript:

function clearDays() {

  var days = [].slice.call( arguments ),
      inputs = document.querySelectorAll(
        'input[name^='+ days.join('], input[name^=') +']'
      );

  [].forEach.call( inputs, function( input ) {
    input.value = '';
  });

}

You can call it like:

clearDays('M');
clearDays('M','T');
clearDays('M','W','Su');
// etc...