HTML表单 - 提交所选div的ID数组

时间:2013-06-14 11:52:34

标签: html forms

我有一个可以选择的div数组(点击时更改背景颜色以表示给用户)。

我想要一种方法将所有这些div的ID提交到我的应用程序,虽然看不到这样做的“好”方式;目前我唯一可以做的就是有一个按钮,onclick触发一个获取id的javascript函数,并在POST中将它们发送回我的服务器。

有没有办法在表单上创建多选输入,使用div而不是复选框或多选列表,或者更好的方式来做我正在尝试的内容?

3 个答案:

答案 0 :(得分:1)

为每个div都有一个隐藏的输入,所有div都具有相同的名称,但ID不同。单击div时,使用id更新相应的隐藏输入。然后,当您通过标准表单POST提交时,所有这些值都将通过您指定的名称提供。

答案 1 :(得分:1)

假设您在用户“选择”div:

时添加了课程selected
var data = {};
$(".classOfDivs.selected").each(function(){
   data[$(this).prop('id')] = 'true';
}
$.ajax({
   url : 'ajaxPage.php',
   type : 'POST',
   dataType : 'text',
   cache: false,
   data: data,
   success : function(text){alert('Saved: '+text);},
   error: function(){alert('Did not reach server');}
});

使用success函数根据需要处理返回的文本。 dataType可以更改为htmlJSON等。请参阅.ajax()文档。

答案 2 :(得分:0)

由于这是一款应用,您可以使用JQuery javascript库将所有内容存储在HTML5 localstorage中。

以下是如何逐步完成的步骤:

  1. 创建一个jquery数组
  2. 点击,获取div id并将其存储在具有键/值对的数组中
  3. 如果再次单击,则将其从阵列中删除
  4. 有一些事件监听器,如“提交”按钮,用于将数组的值存储到localstorage
  5. 这是一个我所拥有的jsfiddle,正是你所说的:http://jsfiddle.net/CR47/bqfXN/1/

    它会更深入,但jquery应该正是你所需要的。

    这比使用POST或使用ajax提交更好的原因是因为你说这是一个应用程序,你将能够离线使用这个方法,因为post或ajax需要连接到运行php的服务器。

    var skinCare=[];                                       //the array
    $('.skinCare').click(function(){                       //onclick
        var value = event.target.className.split(" ")[0];  //get classname, you would get id
        var index = skinCare.indexOf(value);               //gets where the location in 
                                                           //the array this code is
        if($(this).hasClass('selected')){                  //when a div is clicked it gets
            //$('.skinCare').removeClass('selected');      //the class "selected" and adds
            skinCare.splice(index, 1);                     //to array, then another click
        } else if($.inArray(value, skinCare) == -1){       //removes it from array
            skinCare.push(value);
        }
    });
    $('.submitbutton').click(function(){
        localStorage.setItem('Skin Care', JSON.stringify(skinCare));
    
    });