Löschen Optionsfelder eines übermittelten Formulars

Ich habe ein Formular mit zwei Optionsfeldgruppen. Wenn Optionen in jeder Gruppe ausgewählt werden, bleiben sie ausgewählt und ändern ihre Farbe, um anzuzeigen, dass sie ausgewählt wurden. Wenn ich jedoch versuche, das Formular mit der Taste löschen Filter zurücksetzen, passiert nichts.Löschen Optionsfelder eines übermittelten Formulars

Ich möchte das Formular für den Benutzer angezeigt, wie es beim ersten Mal geladen (keine Auswahl, keine Farbänderung - nur gelöscht.), Irgendwelche Ideen?

Ich benutze den onclick: "javascript: submit()" anstelle eines Senden-Knopfes, vielleicht verursacht dies ein Problem?

Der Code:

<form action="" method="post"> 
     <p>Date:</p> 
      <input type="radio" name="dateorder" onclick="javascript:submit()" value="dateasc" autocomplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'dateasc') echo ' checked="checked"';?> /> <label for="dateasc">Newest &rsaquo; Oldest</label> 
      <br> 
      <input type="radio" name="dateorder" onclick="javascript:submit()" value="datedesc" autocomplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'datedesc') echo ' checked="checked"';?> /> <label for="datedesc">Oldest &rsaquo; Newest</label> 

     <hr><br>  
     <p>Title:</p> 
      <input type="radio" name="title" onclick="javascript:submit()" value="Mr" <?php if (isset($_POST['title']) && $_POST['title'] == 'Mr') echo ' checked="checked"';?> /><label for="Mr">Mr</label> 
      <br> 
      <input type="radio" name="title" onclick="javascript:submit()" value="Mrs" <?php if (isset($_POST['title']) && $_POST['title'] == 'Mrs') echo ' checked="checked"';?> /><label for="Mrs">Mrs</label> 
      <br> 
      <input type="radio" name="title" onclick="javascript:submit()" value="Miss" <?php if (isset($_POST['title']) && $_POST['title'] == 'Miss') echo ' checked="checked"';?> /><label for="Miss">Miss</label><br><br> 
    <p class="clear">Clear Filters<p> 
    </form>

Dies sind die Methoden, die ich bisher versucht haben:

Methode 1: das Formular auf den Button Standard html Reset Gave nur vor dem schließenden Formular-Tag.

Methode 2: Added diese Zeile kurz vor dem Schließen Formular-Tag:

<input type="button" onclick="myFunction()" value="Reset form">

hinzugefügt dieses Skript nach dem Schließen Formular-Tag:

<script> 
function myFunction() { 
    document.getElementById("myForm").reset(); 
} 
</script>

Methode 3: Innerhalb Das Body-Tag wurde hinzugefügt <body onload="document.refine.reset();"> und gab dem Formular den Namen verfeinern.

Methode 4: Set Eingabefelder

Quelle

2016-07-29 Andy R

Ihre Versuche zu tun haben, die Form in den Ausgangszustand zurückgesetzt werden tatsächlich arbeiten, aber das Problem ist, dass, weil Sie das Formular einreichen jedes Mal, Sie klicken auf eine input, die Seite und damit das Formular werden neu geladen und die zuletzt angeklickte input hat jetzt einen Ausgangszustand von checked. Also, was Sie tun müssen, ist durch alle checked Eingänge zu durchlaufen und "deaktivieren" sie.Hier ist ein trimed unten Beispiel für eine Art und Weise, dies zu tun:

var inputs=document.querySelectorAll("input[type=radio]:checked"), 
 
    x=inputs.length; 
 
document.querySelector("button[type=reset]").addEventListener("click",function(event){ 
 
    while(x--)inputs[x].checked=0; 
 
    event.preventDefault(); 
 
},0);

<form> 
 
    <input id="option1a" name="option1" type="radio" value="a"><label for="option1a">Option 1A</label> 
 
    <input checked id="option1b" name="option1" type="radio" value="b"><label for="option1b">Option 1B</label> 
 
    <input id="option1c" name="option1" type="radio" value="c"><label for="option1c">Option 1C</label> 
 
    <hr> 
 
    <input id="option2a" name="option2" type="radio" value="a"><label for="option2a">Option 2A</label> 
 
    <input checked id="option2b" name="option2" type="radio" value="b"><label for="option2b">Option 2B</label> 
 
    <input id="option2c" name="option2" type="radio" value="c"><label for="option2c">Option 2C</label> 
 
    <hr> 
 
    <button type="reset">Clear</button> 
 
</form>

Quelle

2016-07-29 15:58:52 Shaggy

Danke Shaggy, ich fand das die beste Lösung und es funktionierte so, wie ich es wollte. –

mithilfe von Jquery prop automatisch zu vervollständigen aus() Sie nicht markiert das Optionsfeld aktiviert oder easly.

$('Radio-buttion').prop('checked', false);

von JavaScript verwenden Sie mögen dieses

Document.getElementbyId("Radio-buttion").checked="false"

Quelle

2016-07-29 15:43:02

Dank Hassan Ali, muss ich jedem Radio-Button eine eindeutige ID geben? Oder kann ich das JavaScript ausführen, dass es den Typ als Optionsfeld sieht. Versucht es mit den folgenden: –

können Sie mit Klasse arbeiten, denn wenn Sie ID verwenden, dann müssen Sie ihnen eindeutige IDs zu beiden Radio-Buttons geben. Bitte akzeptieren Sie es als Antwort, wenn Sie zufrieden sind. Danke für Ihr Interesse. –

Funktioniert gut mit ID, aber mit der Klasse passiert nichts. Ich erwarte, dass ich einen Fehler im Code habe. Das ist, was ich habe: Die Formularschaltfläche: und das Skript: Funktion deaktivieren() { document.getElementByClassName ("Aufsteigend"). Checked = false; } –

Sie

<form action="" class="form" method="post">

Javascript Sie

$(document).ready(function(){ 
$(".form input[type=radio]").each(function() { 
$(this).prop('checked', false); 
    }); 
});

check here on jsfiddle

verwenden können, verwenden sollten,

Quelle

2016-07-29 16:38:14

Ich muss etwas vermissen, dies deaktiviert nicht das Formular, wenn ich es ausprobiere. –

hast du class = "form" in

https://jsfiddle.net/q21dy32v/ geh und check hier sehen standardmäßig habe ich jedes radio aber überprüft auf Seite laden niemand wird überprüft –

Löschen Optionsfelder eines übermittelten Formulars

Antwort

Verwandte Themen