Формы отображения на основе выбора пользователя - ajax

Question

У меня есть коробка <select>.

Пользователь должен выбрать один из вариантов, чтобы продолжить.

Затем <select> окно должно исчезнуть (select.onchange(html.(display:hidden;)), что-то вроде этого, не так ли ?!) и <option> должны быть отправлены через AJAX в другой файл или - то же самое.

<select name="var" id="var"> 
    <option value="a">A</option> 
    <option value="b">b</option> 
</select> 

Далее, он будет выполнять запрос (на основе предыдущего выбора) и построить сочетание форм (это может быть один или несколько) внутри DIV для пользователя, чтобы выбрать:

<div> 
    <p>Some info</p> 
<form> 
    <inputs> 
    <inputs> 
    <inputs> 
</form> 
</div> 

Я не очень люблю javascript, и я немного потерял функции (load(), getJSON() и т. Д.).

Что является лучшим для этой цели?

Я пытаюсь getJSON() *, но у меня возникают проблемы с синтаксисом, отладки и манипулируют переменных, запросов и т.д.

Все PHP код работает. Я просто хочу добавить гладкость, меньше обновлений, легкость для пользователя, безопасность и производительность.

* кажется, что getJSON не подходит для этого

Answer 1

Вы можете использовать OnChange Javascript событие: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange

var selectField = document.getElementById('selectField'); 
selectField.onchange = function() 
{ 
    //Select Value 
    var value = selectField[selectField.selectedIndex].value; 
    //Hides the field 
    selectField.style.display = "none"; 
    //Display the value 
    document.getElementById("container").innerHTML = value; 
} 

HTML -

<div id="container"> 
<select id="selectField" > 
    <option value ="a">A</option> 
    <option value ="b">B</option> 
</select> 
</div> 

Online Demo: https://jsfiddle.net/acqwwbfb/2/ Это просто для того, чтобы вы начали.

Answer 2

в то время как вы пометили JQuery вы можете использовать .on('change') и создать массив форм, которые вы должны будете использовать .. как этот

в Js

$(document).ready(function(){  
    $('select#var').on('change',function(){ 
    var getValue = $(this).val(); 
    $.ajax({ 
     url : 'yourUrl.php', 
     type : 'post', 
     data : {value : getvalue}, 
     success : function (data){ 
      alert(data); 
      /*if(data !== 0){ 
      $('#show_forms').html(data); 
      }*/ 
     }, 
     error : function(){ 
     alert('error please check the url'); 
     } 
    }); 
    }).change(); 
}); 

index.php файл, который вы связаны с JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select name="var" id="var"> 
    <option value="a">A</option> 
    <option value="b">b</option> 
</select> 

<div id="show_forms"></div> 

yourUrl.php файл, который вы будете проверять dabase в

<?php 
    echo $_POST['value']; 
?> 

после этого кода вы должны получить предупреждение выбора значения