1

我有一个像下面这样的表单我需要使用 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 +'&notes='+ 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}]
4

4 回答 4

0

您可以使用以下代码（使用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 
        });
    });
});

您可以按如下方式接收colorsandanimals变量php

$color=$_POST['colors'];
$animal=$_POST['animals'];
于 2012-09-11T08:47:52.870 回答
0

这是一个框架，可以帮助您序列化此表单并使用 ajax 将数据发送到某个端点。

(function($) {
    $('#what').bind('submit', function(e) {

        $.post('/url/to/send', $(this).serialize(), function(response) {
            console.log(response);
        });

    });

})(jQuery);
于 2012-09-11T09:02:03.437 回答
0

此代码是用表单中的所有单选值填充您的数组：

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 发送您的数组

于 2012-09-11T09:10:29.230 回答
0

只需使用 jquery序列化功能，就像这样

$('#what').on('submit', function(e) {
    e.preventDefault();
    alert($('#what').serialize());
  });​

检查小提琴

于 2012-09-11T09:28:27.500 回答