set field value with js

I have a form where the customer has a number of search parameters, with radio buttons for 'all' and 'range'

When the page loads, the 'from' and 'to' labels and text input boxes are hidden and when the 'range' radio button is clicked, the div id in which these elements appear is set to display via a js function.
Conversely, when the 'all' radio button is clicked, the div is set to hidden.

Depending on the radio button selected, a different id passed to the function.

Something like this

<script type="text/javascript">
<!--
    function visibility_off(id) {
       var e = document.getElementById(id);
       e.style.display = 'none';
    }
//-->
<!--
    function visibility_on(id) {
       var e = document.getElementById(id);
          e.style.display = 'block';
    }
//-->
</script>

This works fine, however hiding the text input boxes doesn't clear their values.

I want to set the text inputs to an empty string when the 'all' radio button is selected and thought if i use the name of the div as the root, and append it with min and max respectively, this would work for me, but it doesn't.

eg lets call the id of the div element 'first'

passing 'first' into the function will do what i want

if i give my text boxes ids of 'firstmin' and 'firstmax' i want to use the div element name as the root and concatenate min and max onto the end.

eg.

<!--
    function visibility_off(id) {
       var e = document.getElementById(id);
       e.style.display = 'none';
       document.getElementById(id+'min').value = '';
       document.getElementById(id+'max').value = '';
    }
//-->

This will allow me to use the same function and keep it nice and compact