Как отправить данные из формы html5 на страницу php для обработки без перезагрузки страницы или перехода на страницу php

Question

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

Я попытался установить действие формы в виде php-файла, который обрабатывает данные, но это ухудшило ситуацию и перенаправило пользователя в php-файл, если нажать кнопку поиска

HTML-код для формы

<form method="post">
   <select class="select_box">
     <option value="Choose a category">Choose a category</option>
     <option value="category1">category1</option>
     <option value="category2">category2</option>
     <option value="category3">category3</option>
   </select>
   <select class="select_box">
     <option value="Choose a place">Choose a place</option>
     <option value="place1">place1</option>
     <option value="place2">place2</option>
     <option value="place3">place3</option>
     <option value="place4">place4</option>
   </select>
   <select class="select_box">
     <option value="Choose budget">Choose budget</option>
     <option value="budget1">budget1</option>
     <option value="budget2">budget2</option>
     <option value="budget3">budget3</option>
     <option value="budget4">budget4</option>
   </select>
   <button type="button" name="search_btn">Search</button>
</form>

Я ожидаю, что страница no будет перезагружена и покажет данные, основанные на поиске, выполненном php-файлом, но на самом деле происходит то, что страница перезагружается, но ожидаемые данные появляются в указанном для нее месте

Answer 1

То, что вы ищете, называется AJAX.Что вы делаете, это используете JavaScript для публикации содержимого формы, и функция ожидает ответа от страницы PHP.

Вот фрагмент кода, который я использую именно по этой причине.Вы можете легко изменить это, чтобы соответствовать вашей собственной форме:

    function sendMessage(formName) {
//Put the name of your form here - make sure your FORM has a NAME and ID tag
        formIs = document.quoteSubmitForm;

          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
             //Run this part to display the response to the user.
             innercontent = "<span class='close' onclick='closeModal()'>&times;</span>" + xhttp.responseText;
             document.getElementById("modalContent").innerHTML = innercontent;
            }

          };
//Use this to fill in the name of the PHP which you intend to POST to.
          xhttp.open("POST", "quotes/submitnew.php");
          xhttp.send(new FormData (formIs));
        }

Answer 2

Вы можете использовать Ajax, так как он позволяет обновлять веб-страницы без перезагрузки страницы

Добавить это внутри вашего мероприятия

$.ajax({
  url: 'yourphpfile.php',
  //get or post
  type: 'post',
  data: {
   //name & password optional
    name: 'yourinputdata',
    password: 'yourinputpassword'..
  },
  success: function(response) {
    location.reload(); // reloading page
  }
});

В файле php используйте isset ($ _ POST ['name']) и isset ($ _ POST ['password']), чтобы убедиться, что вы получаете значения иманипулировать ими, как вы хотите.