如何重置新添加的表单输入

Question

edits:
1. removed code that was unnecessary...
2. Clarified desired solution and added reset button HTML.

I've seen various methods used to reset a form but I add content to a blank div (id = "unitPulled") via AJAX so, methods similar to the following will not work:

document.forms[0].reset();

My goal is to reset the entire form when a user hits a reset button.

How do I go about tackling this issue? Would the DOM have to be reloaded?

HTML for button:

<button id="reset" name="reset" class="btn btn-default" type="reset">Clear</button>

Javascript:

/* Below is for auto-updating of initial and number */
var oXmlHttp

function showUnits(str) // Change function name
{
    var url = "ajax.cfm?&lic_plate=" + str // Change URL
    oXmlHttp = GetHttpObject(stateChanged)
    oXmlHttp.open("GET", url, true)
    oXmlHttp.send(null)
}

// Below is where new elements are added:
function stateChanged() {
    if (oXmlHttp.readyState == 4 || oXmlHttp.readyState == "complete") {
       document.getElementById("unitPulled").innerHTML = oXmlHttp.responseText; // Change ID
       document.getElementById("lic_plate").focus();

    }
}

Thanks!

Answer 1

Add this line in you function stateChanged()

function stateChanged() {
    if (oXmlHttp.readyState == 4 || oXmlHttp.readyState == "complete") {
       document.getElementById("unitPulled").innerHTML = oXmlHttp.responseText; // Change ID
       document.getElementById("myForm").reset(); 
       document.getElementById("lic_plate").focus();
    }
}

Please put your form id instead of myForm. Let me know if this is not working as form value will be reset after ajax call.