Reset HTML form input fields na submit

Door Filip Lambinet op 23-05-2017 16:39

2.262 views

Vanuit HTML roep ik een php-code aan bij het drukken van de submit knop.
Van zodra ik gelikt heb, zou ik graag hebben dat de input fields van de form
terug gereset zijn of blanko zijn.
Kan er iemand mij hierbij helpen.
Alvast bedankt.

Jan te Pas

24-05-2017 12:40

zet in de html onder </head>

<body onLoad="clearForms()" onUnload="clearForms()">

that does the trick!

Thomas van den Heuvel

24-05-2017 13:35

@Filip: je zou ook kunnen voorkomen dat velden ingevuld blijven door ze in eerste instantie niet te onthouden. Dit bereik je door deze velden te voorzien van de autocomplete property met waarde "off" (oftewel, voorzie je input velden van autocomplete="off").

Mogelijk impliceert de wens voor deze functionaliteit andere achterliggende problemen? Is er sprake van "dubbelposts" of spam in de betreffende formulieren? In dat geval zijn er meer en andere manieren om formulieren verder te beveiligen.

@Jan: clearForms() lijkt mij een custom JavaScript functie. Een implementatie van die functie is dan misschien ook handig. clearForms() is geen standaard JavaScript functie voor zover ik weet, en doet zonder implementatie dan ook niets, behalve het genereren van een foutmelding.

Filip Lambinet

24-05-2017 17:48

@Thomas: Het eerste probleem mbt invullen forms met mysql values is dus opgelost.
Thanks!

@Thomas en@Jan
Beide oplossingen voor leegmaken input value in form na submit werkt spijtiggenoeg niet...

Grts

Jan te Pas

24-05-2017 17:53 gewijzigd op 24-05-2017 17:54

Ik was wat vergeten, sorry, de functie:


<script>
function clearForms()
{
  var i;
  for (i = 0; (i < document.forms.length); i++) {
    document.forms[i].reset();
  }
}
</script>

Ariën

24-05-2017 17:54 gewijzigd op 24-05-2017 17:55

Kan je na het submitten niet een location-header sturen?
Je zit alleen met het nadeel dat je geen notificatie kan geven in de DOM van je HTML.

Thomas van den Heuvel

24-05-2017 19:13

Filip Lambinet op 24/05/2017 17:48:59
@Thomas en@Jan
Beide oplossingen voor leegmaken input value in form na submit werkt spijtiggenoeg niet...

Hmm, wanneer zie je dan nog input terug? Wanneer je via de historie terugbladert? En je submit het formulier naar een aparte URL of actie? Vraag ik mij toch af hoe dat formulier dan in elkaar steekt en hoe de "flow" is. autocomplete="off" zou ervoor moeten zorgen dat (eerder) ingevulde gegevens niet onthouden worden, en dus ook niet automatisch opnieuw ingevuld worden.

Filip Lambinet

24-05-2017 20:29 gewijzigd op 24-05-2017 20:30

Ik denk dat het misschien komt omdat ik met frames werk.
Zou dat kunnen?

Hierbij de code van mijn index.html en ook van top.html:

Index.html:


<html>

<head>
<title>MyBoxForRent</title>
</head>

<frameset rows="149,68%,43" framespacing="0" border="0" frameborder="0">
  <frame name="top" scrolling="no" noresize target="middle" src="top.html" frameborder="0">
  <frame name="middle" target="bottom" src="middle.html" scrolling="auto" noresize frameborder="0">
  <frame name="bottom" src="bottom.html" scrolling="auto" frameborder="0" marginheight="0">
  <noframes>
  <body>

  <p>This page uses frames, but your browser doesn't support them.</p>

  </body>
  </noframes>
</frameset>

</html>


top.html:  (hierin zit de form)...

<html>
<head>
<title>Top</title>
<base target="middle">
</head>

<body bgcolor="#edd9c0" onLoad="clearForms()" onUnload="clearForms()">

<font face="Verdana" size="2" color="darkblue">

<!----------------------------------------------------->
<img border="0" src="images/myboxforrent01.png" width="318" height="58"></img>
<br><br>

<script>
function clearForms()
{
  var i;
  for (i = 0; (i < document.forms.length); i++) {
    document.forms[i].reset();
  }
}

</script>

<table>
 <tr>
    <!----------------------------------------------------->
    <td>
   <form name="boxen_lezen" method="get" action="box_algemeen_overzicht_mysql.php" target="middle">
   <input type="submit" name="leesbox" value="Algemeen overzicht">
   </form>
   </td>
   <!----------------------------------------------------->
   <td width="20"></td>
   <!----------------------------------------------------->
   <td>
   <form name="box_opvragen" method="get" action="box_opvragen.php" target="middle" autocomplete="off">
   <input name="boxnr" type="text" size="03" id="boxnr">
   <input type="submit" name="Opvragen" value="Opvragen">
   </form>
   </td>
   <!----------------------------------------------------->
   <td width="40"></td>
   <!----------------------------------------------------->
   <td>
   <form name="boxen_nieuw" method="get" action="box_toevoegen.html" target="middle">
   <input type="submit" name="nieuwebox" value="Nieuw">
   </form>
   </td>
   <!----------------------------------------------------->
   <td width="40"></td>
   <!----------------------------------------------------->
   <td>
   <form name="box_wijzigen" method="get" action="box_wijzigen.php" target="middle" autocomplete="off">
   <input name="boxnr" type="text" size="03" id="boxnr" value="">
   <input type="submit" name="boxwijzigen" value="Wijzigen">
   </form>
   </td>
   <!---------------------------------------------------->
   
   </tr>
</table>
<td>
<td>
<hr>

</body>

</html>

THANKS IN ADVANCE!

Ariën

24-05-2017 20:31 gewijzigd op 24-05-2017 20:32

Verder raad ik af om frames te gebruiken. Het is een techniek van héél lang geleden die meer nadelen dan voordelen kent.

Reageren

Inloggen om te reageren