使用Web Html表单创建Javascript数组

Javascript Array Creation Using A Web Html Form

本文关键字：Javascript 数组 创建 表单 Web Html 使用      更新时间：2023-09-26

我有一个如下的表单我需要使用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}]

此代码用于用表单中的所有无线电值填充数组：

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

相关文章：