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

#php #jquery #ajax #forms

#php #jquery #ajax #формы

Вопрос:

Я пытаюсь автоматически отправлять форму, когда пользователь нажимает флажок select (с помощью 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']) amp;amp; ($_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']) amp;amp; ($_GET['category'] != 'All')) : ?>
         <?php foreach($data['businessCategoryListing'] as $businessCatListing) : ?>
         <input id="name"  class="sub" <?php if (isset($_GET["name"]) amp;amp; ($_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"]) amp;amp; ($_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'])  amp;amp; 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;
    }

 

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

Ответ №1:

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

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

Комментарии:

1. Спасибо Dhaval. Кнопка отправки — это просто или отладочный банкомат, если мне нужно удалить $(‘input.main, input.sub’).on(‘change’, function() { $(‘#businessSearch’).trigger(‘submit’); });