我有一个如下的表单我需要使用JavaScript为每个单选按钮创建一个数组,并使用Ajax 发布到PHP脚本
<form id="what" name="what" >
<input type="radio" name="colors" id="red" value="red" />Red<br />
<input type="radio" name="colors" id="blue" value="blue" />Blue<br />
<input type="radio" name="colors" id="green" value="green" />Green
<input type="radio" name="animals" id="dog" value="dog" />Red<br />
<input type="radio" name="animals" id="parrot" value="parrot" />Blue<br />
<input type="radio" name="animals" id="horse" value="horse" />Green
<button type="button" >send</button>
</form>
我的Ajax发布代码
var data = 'username=' + username + '&api_password=' + apipassword + '&sender=' + sender + '&to=' + owner + "," + mobile + '&message=' + "Name : " + name +"%0d%0a"+ "Mobile No : " + mobile +"%0d%0a"+ "Address : " + street +" "+ area + " " + formlandmark +"%0d%0a"+ "Notes : " + notes + "%0d%0a" + "Order Id : " + randomnewnewnumber + "%0d%0a" + itemstosmsdata() + '&priority=' + priority;
var adminsubmit = 'name=' + name+'&mobile='+ mobile +'&adds='+ street +" "+ area + " " + formlandmark +'¬es='+ notes+'&orderid='+ randomnewnewnumber+'&orders='+ itemstowebdata()+'&status=opened'+'&time='+time+'&date='+ dates;
$('.text').attr('disabled','true');
$('.loading').show();
$.ajax({
url: "http://something.some.com/appost.php?", // Your Sms Api Url
type: "POST",
data: data,
cache: false,
success: function (html) {
alert("Order Placed");
if (html==1) {
$('.form').fadeOut('slow');
$('.done').fadeIn('slow');
}
}
});
数据的发送方式应与相同
radio[ { "radiobuttonename" => clicked value of the radio button},{ "radiobuttonename" => clicked value of the radio button}]
此代码用于用表单中的所有无线电值填充数组:
var theArray = []
$("#what > input[type='radio']").each(function(){
theArray.push($(this).val())
})
// theArray will be like this: red,blue,green,dog,parrot,horse
如果你想用数组传递选中的属性,你可以这样做:
theArray.push($(this).val() + "@" + this.checked)
// theArray will be like this: red@false,blue@false,green@false,dog@true,parrot@false,horse@false
最后,将数组转换为字符串:
theArray = theArray.join("##")
现在您可以使用ajax 发送您的数组
这是一个框架,应该可以帮助您序列化此表单,并使用ajax将数据发送到某个端点。
(function($) {
$('#what').bind('submit', function(e) {
$.post('/url/to/send', $(this).serialize(), function(response) {
console.log(response);
});
});
})(jQuery);
您可以使用以下代码(使用jQuery)
HTML
<form id="what" name="what" >
<input type="radio" name="colors" id="red" value="red" />Red<br />
<input type="radio" name="colors" id="blue" value="blue" />Blue<br />
<input type="radio" name="colors" id="green" value="green" />Green<br /><br />
<input type="radio" name="animals" id="dog" value="dog" />Red<br />
<input type="radio" name="animals" id="parrot" value="parrot" />Blue<br />
<input type="radio" name="animals" id="horse" value="horse" />Green
<input type="submit" value="send" name="btn" />
</form>
JS
$(function(){
$('form#what').on('submit', function(e){
e.preventDefault();
var frm=$(this);
var len=$('input:radio[name="colors"]:checked', frm).length;
if(!len)
{
alert('Please select a color');
return false;
}
var arr=frm.serialize();
$.post('ajax_php.php', arr, function(data){
//console.log(data);
// do something with data
});
});
});
您可以在php
中接收colors
和animals
变量,如下所示
$color=$_POST['colors'];
$animal=$_POST['animals'];
只需使用jquery序列化函数,就像这个
$('#what').on('submit', function(e) {
e.preventDefault();
alert($('#what').serialize());
});
检查fiddle