Как назвать часть формы Ajax?

Question

У меня есть форма с множеством ящиков. Я хочу добавить поле флажка, так как значения приходят из файла php через вызов Ajax. Как обрабатывать форму в другой форме?

<form action="result.php" method="post">
<input ...

-------Inner form (imaginary form to perform Ajax call)
TYPE YOUR COUNTRY AND POPULATE CITY
(here user types a country and we populate cities from city.php?q=typed-country. 
City will return by the output of city.php file. In other words, output of 
city.php is exactly list of cities, which can be formatted with required 
CHECKBOX codes)
List of cities as CHECKBOX; e.g.
<input type="checkbox" name="city" value="city1" />
<input type="checkbox" name="city" value="city2" />
<input type="checkbox" name="city" value="city3" />
--------

<input type="submit" value="Submit" />
</form>

Есть пример двух полей выбора для захвата городов для выбранной страны; но здесь мне нужен TYPE INPUT для страны и CHECKBOX для получающихся городов.

Answer 1

var ajax = new XMLHttpRequest();
ajax.open('GET','cities.php?q='+document.getElementById('country').value,true);
ajax.send();
citiesList = new Array();
ajax.onreadystatechange = function(){
    if(ajax.readyState == 4){
        citiesList = ajax.responseText.split(',');
    }
}
for(var i=0;i<citiesList.length;i++){
document.getElementById('citiesListContainer').innerHTML+='<input type="checkbox" value="'+citiesList[i]+'" /> '+citiesList[i]+'<br>';
}

Используйте приведенный выше код, где ваш запрос возвращает список городов, каждый из которых разделен запятой. В вашем HTML у вас есть div с идентификатором townsListContainer. Вы также можете использовать метод appendChild для добавления каждого отдельного флажка, но мой ответ - ленивый. Демо

Answer 2

используйте .change по стране

$("#country").change(function () {    
    $("select option:selected").each(function () {        
        var value = $(this).value()
        ajax to your php, return info you need
            modify/build your city information
    });    
})

это будет пример для поля выбора, однако принцип использования .change будет одинаковым для любого типа, хотя вам не понадобится опция выбора: selected.each bit

Answer 3

Вы не можете иметь форму внутри формы.Вы можете отправить всю форму (и просто использовать необходимые данные) или разделить две формы.