Блог

Мне нужно обновить один выпадающий список без перезагрузки страницы, я имею в виду, у меня есть форма, куда я добавляю нужные мне элементы, затем у меня есть другая форма, где у меня есть выпадающий список, связанный с моей базой данных, но если у меня нет элемента, который мне нужно выбрать, я должен добавить его из другой формы, но проблема в том, что мне нужно перезагрузить страницу, чтобы выпадающий список отображал новый элемент, тогда я теряю данные, которые я вводил. Я хотел бы знать способ обновить выпадающий список без перезагрузки страницы. Я использую php и mysqli, мой код прост:

 <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:

Выберите запрос элемента («выбрать * из элементов, упорядоченных по элементу asc») или die («сбой»); echo «Выберите опцию»; в то время как ($reg=$con ->fetch_assoc()){ echo «»; echo $reg[‘Element’]; }?>

Я надеюсь, что кто-нибудь сможет мне помочь! с уважением!

Используйте 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>
  

Я решил свою проблему и хочу поделиться с вами своим решением, оно простое:

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

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

Итак, каждый раз, когда я добавляю элемент в ‘addelements.php ‘, Я могу выполнить поиск нового элемента в списке выбора.