2017-02-20 4 views
0

ich eine sehr einfache HTML mit einem div für Info-Nachrichten und eine Form mit zwei Tasten (eigentlich zwei Eingangstypen einreichen und Reset)innerHTML- nicht von Event-Handler-Anwendung

die div # info bevölkert wird dynamisch (Ajax) habe . In JavaScritpt, warte ich auf das Fenster, um den Reset-Eingang für den onreset Ereignis zu laden und ich registrieren:

window.addEventListener("load", onloadWindow); 
 

 
function onloadWindow() { 
 
    // Document loaded, register onreset event for my form 
 
    document.getElementById("formId").addEventListener("onreset", onresetForm); 
 
} 
 

 
// Reset al the infos 
 
function onresetForm(event) { 
 
    document.getElementById("formId").reset(); 
 
    document.getElementById("info").innerHTML = ''; 
 
}
<body> 
 
    <div id="info"></div> 
 
    <form id='formId' action='#' method='post'> 
 
    <label for='cod'>Code:</label> 
 
    <input id='cod' type='text' name='cod'><br> 
 
    <label for='desc'>Description:</label> 
 
    <input id='desc' type='text' name='desc'><br> 
 
    <label for='type'>Type:</label> 
 
    <input id='type' type='text' name='type'><br> 
 
    <input id='upd' type='submit' name='upd' value='Update'> 
 
    <input id='res' type='reset' name='res' value='Reset'> 
 
    </form> 
 
</body>

alle Textfelder in Form gelöscht, aber die innerHTML = '' für die div # info funktioniert nicht, die zuvor von ajax generierten Nachrichten werden nicht gelöscht. Fehle ich hier etwas?

By the way, ich bin mit einem Smarty Template für die Form, aber ich glaube nicht, das zu meinem Problem

+2

Der Ereignisname "zurückgesetzt" werden sollte, nicht "onreset". – Pointy

+0

Ja und entfernen Sie diese Zeile 'document.getElementById (" formId "). Reset();' weil es eine Endlosschleife verursacht. –

+0

Anfänger dumm Fehler. Vielen Dank – rodrunner

Antwort

1
verwendet ist

Der Ereignistyp/Name einfach reset ist, nicht onreset. Dann müssen Sie das Formular innerhalb Ihres Rücksetzungsrückrufs nicht erneut zurücksetzen.

window.addEventListener("load", onloadWindow); 
 

 
function onloadWindow() { 
 
    // Document loaded, register onreset event for my form 
 
    document.getElementById("formId").addEventListener("reset", onresetForm); 
 
} 
 

 
// Reset al the infos 
 
function onresetForm(event) { 
 
    document.getElementById("info").innerHTML = 'form has been reset'; 
 
}
<body> 
 
    <div id="info">Info before reset</div> 
 
    <form id='formId' action='#' method='post'> 
 
    <label for='cod'>Code:</label> 
 
    <input id='cod' type='text' name='cod'><br> 
 
    <label for='desc'>Description:</label> 
 
    <input id='desc' type='text' name='desc'><br> 
 
    <label for='type'>Type:</label> 
 
    <input id='type' type='text' name='type'><br> 
 
    <input id='upd' type='submit' name='upd' value='Update'> 
 
    <input id='res' type='reset' name='res' value='Reset'> 
 
    </form> 
 
</body>