html-selectを更新するにはPHPを再ロードせずに

Question

私はdropdwonlistを更新する必要があります。ページをリロードせずに、必要な要素を追加するフォームがあります。私のデータベースにドロップダウンリストがありますが、私が選択する必要のある要素がない場合は、他のフォームから追加する必要がありますが、問題は、ドロップダウンリストに新しい要素を表示するためにページをリロードする必要があることです私が入力したデータが失われます。 ページをリロードせずにドロップダウンリストを更新する方法を知りたいです。 イム使用してPHPとmysqliの私のコードは単純です：（ "要素の順序から要素ASCによって選択*"）

select要素 クエリまたはダイ（：

<form action="edit_col_exe.php" method="post"> 
 
<p><label>Add Element:</label> 
 
    <input autofocus type="text" name="elemnt" class="input" required /> 
 
</p> 
 
<table> 
 
    <tr> 
 
     <td><input type="submit" name="Save" value="Save" /></td> 
 
    </tr> 
 
</table> 
 
</form>

のForm2 "失敗します"）; echo "オプションを選択"; while（$ reg - $ con - > fetch_assoc（））{ エコー ""; echo $ reg ['Element']; }？>

誰かが私を助けてくれることを願っています！ はご安心！

Answer 1

Ajaxを使用して（私はjQueryが好きです）、フォームを削除してください。

JS

function addElement(){ 
    // get new name 
    var name = $("#newElementsName").val(); 
    // create ajax call 
    $.ajax({ 
    type: "POST", 
    url: "edit_col_exe.php", // URL to php script 
    data: { // post data for php script (I use the data from your form (including the typo)) 
     elemnt: name, 
     save: 'Save' 
    }, 
    success: function(data){ 
     // this function will be called when php script run successful (HTTP-Status 2xx) 
     // Clear the input filed 
     $("#newElementsName").val(''); 
     // Add new name to dropdown 
     $("#elements").append("<option>"+name+"</option>"); 
    } 
    }); 

} 

HTML

<div> 
    <p><label>Add Element:</label> 
    <input autofocus type="text" id="newElementsName" class="input" required /> 
    </p> 
    <table> 
    <tr> 
     <td><button type="button" onclick="addElement()">Save</button></td> 
     </tr> 
    </table> 
</div> 
<div> 
    <select id="elements" size="1"> 
    </select> 
</div> 

Answer 2

私は私の問題を解決し、私はあなたと私の解決策、そのシンプルを共有したい：

setInterval(function(){ 
      $('#searchelement').load('addelements.php'); 
     }); 

<p><label>Element</label> 
 
\t \t \t \t \t <select id="searchelement" name="element" required /> 
 
</option> 
 
</select></p>

「addelements.php」に要素を追加するたびに、選択リストの新しい要素を検索できます。