Публикация формы с помощью ajax для себя без перезагрузки и фильтрации данных формы с соответствующими названиями компаний

Question

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

Откровенно говоря, это сводит меня с ума! Я пробовал и методы post и get, и 100 других обходных путей, и я просто не могу заставить его работать

Если я удалю e.preventDefault (); из моей функции отправки затем страница перезагружается, и я получаю правильную информацию по категориям и именам через $ _GET Но проблема у меня заключается в получении данных ajax, передаваемых обратно в var_dump ($ _ GET). Он всегда остается пустым, кроме URL.

Я поступаю неправильно?

Вот моя форма:

<form id="businessSearch" action="" type="get" enctype='multipart/form-data'>
   <div class="col-md-6 business-cat">
      <h2>Business Category</h2>
      <div class="business-inner">
         <input id="category" class="main" <?php if ( !isset($_GET['category']) || ($_GET['category'] == 'All')) { echo 'checked'; } ?> type="checkbox" name="category" value="All" /> All <br>
         <?php foreach($data['businessCats'] as $category) : ?>
         <input id="category"  class="main" <?php if ( isset($_GET['category']) && ($_GET["category"] == $category->BusinessCategory)) { echo 'checked'; } ?> type="checkbox" name="category" value="<?php echo $category->BusinessCategory; ?>"> <?php echo $category->BusinessCategory; ?><br>
         <?php endforeach; ?>
      </div>
   </div>
   <div class="col-md-6 business-name">
      <h2>Company Name</h2>
      <div class="business-inner">
         <?php if( isset($_GET['category']) && ($_GET['category'] != 'All')) : ?>
         <?php foreach($data['businessCategoryListing'] as $businessCatListing) : ?>
         <input id="name"  class="sub" <?php if (isset($_GET["name"]) && ($_GET["name"] == $businessCatListing->company_name)) { echo 'checked'; } ?>  type="checkbox" name="name" value="<?php echo $businessCatListing->company_name; ?>"> <?php echo $businessCatListing->company_name; ?><br>
         <?php endforeach; ?>
         <?php else: ?>
         <?php foreach($data['getAllBusinessListings'] as $getAllBusinessListings) : ?>
         <input id="name" class="sub" <?php if (isset($_GET["name"]) && ($_GET["name"] == $getAllBusinessListings->company_name)) { echo 'checked'; } ?>  type="checkbox" name="name" value="<?php echo $getAllBusinessListings->company_name; ?>"> <?php echo $getAllBusinessListings->company_name; ?><br>
         <?php endforeach; ?>
         <?php endif; ?>
      </div>
   </div>
</form>
<?php if ( isset($_GET['category'])  && isset($_GET['name']) )  : ?>
<div class="clearfix"></div>
<div class="col-md-12 business-details">
   <h2>Details</h2>
   <div class="business-inner">
      <h2><?php  echo  $data['businessListing']->BusinessName  ?></h2>
      <?php  echo $data['businessListing']->BusinessDescription  . '<br>' . $data['businessListing']->BusinessPhone  . '<br>' . $data['businessListing']->BusinessWebsite  . '<br>' . $data['businessListing']->BusinessAddress1   . '<br>' .  $data['businessListing']->BusinessGrid  . '<br>' ; ?>
   </div>
</div>

 <script>
$('input.main, input.sub').on('change', function() { 
 $('#businessSearch').trigger('submit');
});



$(document).ready(function () {
    $('#businessSearch').on('submit', function(e) {
       e.preventDefault();

       var category = $('#category:checked').val(),
       name = $('#name:checked').val();

$.ajax({
      type: 'get',
      data: { ajax: 1,category: category, name: name},
      success: function(response){
       //$('#response').text('category : ' + response);
      }
     });       
    });
});

</script>

Я вижу свой вывод на вкладке сети в

Я просто не могу заставить его отфильтровать обратно в $ _GET var_dump, а затем заставить результаты корректно обновляться на моей странице, одновременно предотвращая перезагрузку страницы.

Наконец, вот как я называю эти данные из моей базы данных

 public function getBusinessByCategory() {

      $category = isset($_GET['category']) ? $_GET['category'] : '';

      $this->db->query('SELECT * FROM business_directory WHERE category = :category and publish_status = "live" ORDER BY company_name ASC');
      $this->db->bind(':category', $category);


      $results = $this->db->resultSet();

      return $results;
    }

Может кто-нибудь дать какие-нибудь указатели? Я действительно застрял, и моя голова вот-вот взорвется !!!

Answer 1

Если вы хотите отправить форму без перезагрузки страницы, то сначала не используйте пользовательскую кнопку типа «отправить» в HTML-форме. Вместо этого используйте обычную кнопку и выполняйте вызов ajax, когда пользователь нажимает на эту кнопку.

Если вы отправите кнопку, она перезагрузит страницу, и это будет поведение по умолчанию для типа кнопки отправки.