Wert der Select-Option wird verloren gehen, wenn es einen Fehler auf dem Formular

Question

zurückgeben Ich weiß, das klingt wie ähnlich, aber ich konnte keinen nützlichen Artikel finden. Ich habe Option HTML-Tag in meiner Website, die ich verwendet, um Kategorien zu wählen gewählt.aber die Endbenutzer ausgewählten Werte verschwinden (kommen zum ersten Wert, wo überhaupt ausgewählt wurde). In einem Beispiel habe ich diesen Tag

<select name="type" > 
    <option value="">select a category</option> 
    <option value="car">car</option> 
    <option value="van">van</option> 
    <option> 
</select> 

in einem Beispiel erste Auswahlfeld ausgewählt wird, wenn der Browser Laden zum ersten Mal und jeder Benutzer einen Wert auswählen kann und darf es nicht empty.and, wenn der Benutzer wählen „van sein "und hat auch andere Felder im Formular ausgefüllt, aber wenn es einen Fehler zurückgibt, bevor die Werte in meine Datenbank eingefügt werden, wurde dieser Auswahlfeldwert auf den ersten Wert zurückgesetzt (" wähle eine Kategorie "). Ich möchte verhindern, dass dies passiert. Ich hoffe, dass einer der Experten mir an dieser Stelle helfen kann. Danke!

Answer 1

Ich glaube, ich verstehe Ihre Frage.

Besucher Ihrer Webseite vervollständigen eine Reihe von Datenfeldern, von denen eines ein Select-Steuerelement ist. Wenn jedoch ein Problem beim Übermitteln der Daten an die Datenbank auftritt, werden die Werte gelöscht, wenn die Seite für den Benutzer erneut angezeigt wird. Ist das richtig?

Wenn ja, gibt es eine Reihe von Möglichkeiten, es zu lösen.

(1) Clientseitige Feldvalidierung: Testen Sie vor dem Senden des Formulars die Werte der Felder, um sicherzustellen, dass sie gültig sind, bevor Sie die Formularübertragung fortsetzen können. Etwas wie:

Javascript/jQuery:

$(document).ready(function(){ 
    $('#myFormID').submit(function(e){ 
     var first_name = $('#firstname').val(); 
     var last_name = $('#lastname').val(); 

     if (firstname=="" || lastname==""){ 
      alert('Please complete all fields') 
      e.preventDefault(); 
     } 

    }); 
}); //END document.ready 

(2) AJAX. Ajax ist eine Methode, mit der Sie Daten an den Server senden können (ähnlich wie bei der Verwendung eines Formulars), ohne die Seite verlassen/aktualisieren zu müssen. Wenn ein Problem auftritt, kann die Seite aktualisiert werden, um dem Benutzer mitzuteilen, was zu beheben ist - und alle Änderungen des Benutzers werden beibehalten. Sie können einen <form> Container mit AJAX verwenden, aber es ist nicht notwendig. Sie können einfach DIVs verwenden und AJAX wird genauso funktionieren. Wenn Sie ein Formular verwenden, müssen Sie immer event.preventDefault() verwenden, um zu verhindern, dass das Formular versucht, die Seite zu verlassen (Standardverhalten).

Javascript/jQuery:

$(document).ready(function(){ 
    $('#myFormID').submit(function(e){ 
     var first_name = $('#firstname').val(); 
     var last_name = $('#lastname').val(); 

     if (firstname=="" || lastname==""){ 
      alert('Please complete all fields') 
      e.preventDefault(); 
     } 

    }); 

    $('#myFormID').submit(function(e){ 
     var first_name = $('#firstname').val(); 
     var last_name = $('#lastname').val(); 

     if (firstname=="" || lastname==""){ 
      alert('Please complete all fields') 
      e.preventDefault(); 
     } 

     $.ajax({ 
      type: 'post', 
      url: 'add_the_data.php', 
      data: 'fn=' +firstname+ '&ln=' +lastname, 
      success: function(d){ 
       if (d == 1){ 
        //Success 
        $('#firstname').val(''); 
        $('#lastname').val(''); 
        alert('Form submission was successful'); 
       }else 
        //Fail 
        alert('Data was not submitted. Please try again.') 
        $('#firstname').focus(); 
       } 
      } 
     }); 
    }); //End Submit 

}); //END document.ready 

add_the_data.php

<?php 
    $fn = $_POST['fn']; 
    $ln = $_POST['ln']; 

    //Do your database entry here 

    $out = add_the_data_function($fn, $ln); //returns 1 or 0 
    echo out; 

Referenzen:

More about AJAX, some simple examples