Форма автоматическая подача без обновления

Question

Я искал множество ответов в Интернете, но никто мне не помогает. Также я не очень понимаю Ajax. Все должно происходить на этой странице без обновления (пока не будет представлена ​​вся форма).

<form id="service" action="" method="post"> 
    <select name="service" onchange="document.getElementById('service').submit();" name="select"> 
     <option value="1" <?php if($_POST['service']==1){ print ' selected'; }?>>Opcja1</option> 
     <option value="2" <?php if($_POST['service']==2){ print ' selected'; }?>>Opcja2</option> 
    </select> 
    </form> 

---

if($_POST['service']==1 | empty($_POST['service'])){ 
    //other forms and options 
    } 
elseif($_POST['service']==2){ 
    //smth 
    } 

Answer 1

Вы должны перехватывать данные формы и имеют АЯКС ручку проводки данных что-то вдоль этих линий является хорошим началом:

$('#service select').on('change', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     method: "POST", 
     url: "site-to-post-to.php", 
     data: $('#service').serialize(), 
    }).done(function(msg) { 
     alert("Data Saved: " + msg); 
    }); 
}) 

Это будет сериализовать данные в формы и отправить его через ajax на любой URL-адрес, указанный вами. Вам нужно будет удалить onchange из своего html.

Answer 2

Чтобы очистить немного вашего яваскрипта использования кода JQuery это делает класс АЯКС довольно простой:

$.ajax({ 
     method: "POST", 
     url: "some.php", 
     data: { name: "John", location: "Boston" } 
    }) 
     .done(function(msg) { 
     alert("Data Saved: " + msg); 
     }); 

«Все должно происходить на этой одной странице без обновления» я не знаю, что вы имеете в виду под этим вы пытаетесь сказать, что он отправит форму только с разрешения пользователя? и это разрешение происходит только после заполнения формы? если так вам просто нужно сказать в файле PHP, что вызов Ajax имеет в виду, что:

if $_GET['form'] == isSafeandCorrect 
    echo json_encode('success'); 

, а затем в вашем АЯКС вызова в функции успеха() {}

.success(function(msh){ 
    if msg == success 
      window.location.href = "yournewPage.php"; 
}) 

пропитание в виду атрибут dataType, если не правильный, он не будет показывать ошибку также с вызовами ajax, избегая вызова одной и той же страницы, всегда ясный php-файл без html

Answer 3

Для гибкости я рекомендую написать url и метод для создания и триггер отправить событие м детский элемент.
Что он дает?
1. один пункт обработки
2. запуска вызова отправки формы событие из любого дочернего элемента

здесь код:

$(function(){ 
 
    
 
    function handleForm(form, callback) { 
 
    form.on('submit', function(e) { 
 
     e.preventDefault(); 
 
    
 
     $.ajax({ 
 
     method: $(this).attr('method'), 
 
     url: $(this).attr('action'), 
 
     data: $(this).serializeArray(), 
 
     beforeSend: function(xhr, settings) { 
 
      console.log('sending '+settings.method+' to: '+settings.url); 
 
     } 
 
     }) 
 
     .always(callback); 
 
    }); 
 
    } 
 

 
    $('#service select[name="service"]').on('change', function() { 
 
    $(this).parent().submit(); 
 
    }); 
 
    
 
    handleForm($('#service'), function(response){console.log(response);}); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="service" action="/some/uri" method="post"> 
 
    <select name="service"> 
 
     <option value="1">Opcja1</option> 
 
     <option value="2">Opcja2</option> 
 
    </select> 
 
</form>