Используйте ajax для отображения формы в зависимости от ввода

Question

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

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

это код:

<?php 
$postcode = $_POST['postcode']; 
$postcode = preg_replace('/\s+/', '', $postcode); 
$postcode = substr($postcode, 0, -3); 

    if(in_array($postcode, array("NR1", "NR2", "NR3", "NR4", "NR5", "NR6", "NR7", "NR8", "NR9", "NR19", "NR20"))){ 
?> 
[bookly-form staff_member_id="2" hide="staff_members,date,week_days,time_range"] 
<?php 
    } elseif(in_array($postcode, array("NR10", "NR11", "NR12", "NR26", "NR27", "NR28"))) { 
?> 
[bookly-form staff_member_id="3" hide="staff_members,date,week_days,time_range"] 
<?php 
    } elseif(in_array($postcode, array("NR13", "NR14", "NR15", "NR29", "NR30", "NR31", "NR32", "NR33", "NR34", "NR35", "IP18", "IP19", "IP20", "IP21", "IP22"))) { 
?> 
[bookly-form staff_member_id="4" hide="staff_members,date,week_days,time_range"] 
<?php 
    } else { 
?> 
Thank you for enquiring about our microchipping services. Unfortunatly we don't cover your postcode at the moment. 
If you'd like to know when we do cover your area simply fill out the form below or feel free to call our offices to register your details 

[ccf_form id="57"] 
<?php 
    } 
?> 

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

Answer 1

Начальная форма для почтового индекса в вашем HTML файле:

<form id="form" action="" method="post"> 
    <input type="text" id="postcode" name="postcode" value="" /> 
    <button type="submit">Submit</button> 
</form>; 
<div id="return-wrap"></div> 

На отправки данных сериализации для отправки. (Console.log(); для отладки и вы можете увидеть результат в браузере консоли)

jQuery(document).ready(function ($) { 

$('#form').on('submit', function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: 'ajax.php', 
     type: 'POST', 
     data: $(this).serialize(), 
     dataType: 'json', 
     beforeSend: function() { 
     }, 
     success: function (data, textStatus, xhr) { 
      console.log(data); 
      console.log(data.status); 
      $('#return-wrap').html(data.result); 
     }, 
     error: function (xhr, textStatus, errorThrown) { 
      console.log(textStatus); 
      console.log(errorThrown); 
      console.log(data.status); 
     } 
    }); 
}); 
}); 

, а затем доступ к данным в PHP, как вы сможете получить доступ любые другие почтовые данные

if($_POST){ 

    $template = $_POST['postcode']; 

    /** Do whatever with this data */ 
    $form = ''; 
    echo json_encode(array('status' => 'ok', 'result' => $form)); 

} else { 
    echo json_encode(array('status' => 'error')); 
}