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，其id为citiesListContainer。你也可以使用appendChild方法添加每个复选框，但我的是懒人的答案。 Demo

Answer 2

您不能在表单中包含表单。您可以提交整个表单（并使用必要的数据）或将两个表单分开。

Answer 3

在国家/地区使用.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的原则对于任何类型都是相同的，尽管您不需要select选项：selected.each bit

如何通过Ajax调用表单的一部分？

3 个答案: