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

发布于 2024-12-11 06:17:00 字数 838 浏览 0 评论 0原文

我有一张表格，里面有很多盒子。我想添加一个复选框字段，因为值来自通过 Ajax 调用的 php 文件。如何在一个表单中处理另一个表单？

<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>

有两个选择字段的示例，用于捕获所选国家/地区的城市；但在这里我需要国家的类型输入和生成的城市的复选框。

原文

I have a form with lots of boxes. I want to add a field of checkbox as the values come from a php file via Ajax call. How to handle a form within another form?

<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>

There are example of two select field for capturing cities for selected country; but here I need TYPE INPUT for country and CHECKBOX for resulting cities.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

永不分离 2024-12-18 06:17:00

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 为 cityListContainer。
您还可以使用appendChild方法来添加每个单独的复选框，但我的是懒人的答案。
演示

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>';
}

Use the above code where your query returns a list of cities, with each city being separated by a comma. In your HTML, you have a div, with the id citiesListContainer.
You could also use the appendChild method to add each individual checkbox, but mine is the lazy man's answer.
Demo

回复收藏 0 原文

唠甜嗑 2024-12-18 06:17:00

表单中不能有表单。您可以提交整个表单（并且仅使用必要的数据）或分开两个表单。

回复收藏 0 原文

白首有我共你 2024-12-18 06:17:00

在国家/地区上使用 .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 位

use .change on the country

$("#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
    });    
})

that would example would be for a select box, however the principle of using .change would be the same for any type, though you wouldn't need the select option:selected.each bit

回复收藏 0 原文

~没有更多了~