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

次のようにcolorsとanimals変数を受け取ることができますphp

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

このコードは、フォーム内のすべてのラジオ値を配列に入力します。

var theArray = []
$("#what > input[type='radio']").each(function(){
theArray.push($(this).val())
})

// theArray  will be like this: red,blue,green,dog,parrot,horse

配列でchecked属性を渡したい場合は、これを行うことができます：

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 に答える
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 に答える