Question

On a HTML page I have three sections with 3 tables. Each table has its own Reset button which should reset only the sections it is required to. Unfortunately, I have used the same form for all the three and there is lot of change to be made if 3 seperate forms are created.

Is there a way to reset only a particular section of the page in this way?

Answer 1

form.reset() is built in to the browser, so it’s behaviour cannot be amended.

An alternative is to write your own code in javascript to reset the fields of each table, like this:

function resetInput1(e){
    document.getElementById('input1').value = document.getElementById('input1').defaultValue;
}
function resetInput2(e){
    document.getElementById('input2').value = document.getElementById('input2').defaultValue;
}

document.getElementById("btn1").addEventListener('click', resetInput1, true);
document.getElementById("btn2").addEventListener('click', resetInput2, true);

Example fiddle here