フォームのエラーを返すと、選択オプションの値が失われます

Question

これは似たようなものですが、私は有用な記事を見つけることができませんでした。 カテゴリを選択するために使用された私のウェブサイトに選択肢htmlタグがあります。しかし、エンドユーザが選択した値は消えています（選択された場所の最初の値になります）。例では、私は初めて、ブラウザの読み込みと、任意のユーザが任意の値を選択することができたときに最初に選択ボックスが選択されている例では、このタグ

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

を持っており、それが可能empty.andユーザー場合は「バンを選択してはいけません"フォームに他のフィールドも入力していますが、データベースに値を挿入する前にエラーが返された場合、この選択ボックスの値は最初の値（「カテゴリを選択」）にリセットされています。私はもうこれを防ぐつもりです。専門家がこの時点で私を助けてくれることを願っています。ありがとう！

Answer 1

私はあなたの質問を理解すると思います。

ウェブページを閲覧したユーザーは、いくつかのデータフィールドを完成させます。その1つは選択コントロールです。ただし、データをデータベースに送信する際に問題が発生した場合は、そのページがユーザーに再表示されたときに値が消去されます。これは正しいです？

もしそうなら、それを解決するにはいくつかの方法があります。

（1）クライアント側のフィールド検証：フォームが送信される前に、フォーム提出を続行する前に、フィールドが有効であることをテストして有効であることを確認します。

ジャバスクリプト/ 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は、フォームを使用する場合と同様に、ページを残したり更新したりせずに、サーバーにデータを送信する方法です。問題がある場合は、ページを更新して修正する内容をユーザーに伝え、すべてのユーザーの変更を保存します。 AJAXで<form>コンテナを使用することはできますが、必ずしも必要はありません。あなたはDIVを使うことができ、AJAXも同じように動作します。実際には、フォームを使用するときには、フォームをページから出そうとしないようにするには、常にevent.preventDefault()を使用する必要があります（デフォルト動作）。

ジャバスクリプト/ 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; 

参考文献：

More about AJAX, some simple examples