Make text clear form when clicked

Question

I would like to make the EMPTY ALL text clear out the form when clicked, but I can't figure out how. Please can you help.

Code

JavaScript

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div class="someclass"> <p>EMPTY ALL</p></a></div>');

document.body.insertBefore(fragment, document.body.childNodes[0]);

HTML

<form method="post" action="validate_update_inventory">  
    <input type="text" name="quantity" value="6" size="3">
    <input type="hidden" name="asin" value="B0073HEMFW">
    <input type="hidden" name="id" value="5063427">
    <input type="hidden" name="referer_action" value="view_inventory_at">                
    <input type="hidden" name="location_name" value="WASTE">
    <input type="hidden" name="maximum_retail_price" value="">
    <input type="hidden" name="expiration_date" value="090120">           
    <input type="submit" name="update" value="update qty" size="10">            
</form>

Answer 1

You don't need javascript to clear a form, you can justs use the <input type="reset"> built into html like this:

One catch though, is that you cannot use hidden input types:

 const id = document.querySelector('[name=id]') id.value = 'New Value' document.querySelector('[type=reset]').addEventListener('click', function() { console.log(id.value) })

 .hide {display:none;}

 <form method="post" action="validate_update_inventory"> <input type="text" name="quantity" value="6" size="3"> <input type="text" class="hide" name="asin" value="B0073HEMFW"> <input type="text" class="hide" name="id" value="5063427"> <input type="text" class="hide" name="referer_action" value="view_inventory_at"> <input type="text" class="hide" name="location_name" value="WASTE"> <input type="text" class="hide" name="maximum_retail_price" value=""> <input type="text" class="hide" name="expiration_date" value="090120"> <input type="submit" name="update" value="update qty" size="10"> <input type="reset" value="Empty All"> </form>

If you would prefer to set all items to an empty string (including hidden values):

 document.querySelector('#clear').addEventListener('click', (e) => { e.target.parentNode.querySelectorAll('[type=text], [type=hidden]').forEach(item => (item.value = '')) })

 <form method="post" name="inventory_update" action="validate_update_inventory"> <input type="text" name="quantity" value="6" size="3"> <input type="hidden" name="asin" value="B0073HEMFW"> <input type="hidden" name="id" value="5063427"> <input type="hidden" name="referer_action" value="view_inventory_at"> <input type="hidden" name="location_name" value="WASTE"> <input type="hidden" name="maximum_retail_price" value=""> <input type="hidden" name="expiration_date" value="090120"> <input type="submit" name="update" value="update qty" size="10"> <input type="button" id="clear" value="Empty All"> </form>

Answer 2

this should get you started.

 function empty(){ var form = document.querySelector('form'); var elements = form.elements; for(let i = 0;i<elements.length;i++){ if(elements[i].value.= 'submit')elements[i];value=''; } }

 <form> <input type='text'> <input type='text'> <input type=submit value='submit'> </form> <button onclick='empty()'>empty all</button>

Answer 3

The following code targets the forms based on their tag name:

document.getElementsByTagName('form');

then iterates through each form's children, clearing each elements value:

Array.from(forms).forEach((form) => {
  Array.from(form.children).forEach((element) => {
    if (element.type != "submit") {
      element.value = '';
    }
  });
});

Full Code

 document.body.innerHTML = '<button id="clear">EMPTY ALL</button>' + document.body.innerHTML; document.getElementById("clear").addEventListener('click', () => { var forms = document.getElementsByTagName('form'); Array.from(forms).forEach((form) => { Array.from(form.children).forEach((element) => { if (element.type.= "submit") { element;value = ''; } }); }); });

 <form method="post" action="validate_update_inventory"> <input type="text" name="quantity" value="6" size="3"> <input type="hidden" name="asin" value="B0073HEMFW"> <input type="hidden" name="id" value="5063427"> <input type="hidden" name="referer_action" value="view_inventory_at"> <input type="hidden" name="location_name" value="WASTE"> <input type="hidden" name="maximum_retail_price" value=""> <input type="hidden" name="expiration_date" value="090120"> <input type="submit" name="update" value="update qty" size="10"> </form>