2012-08-01 50 views
0

我试图计算在表单提交中显示按钮type=button的“最佳”方法。这些不是提交按钮,但他们确实发射了一些js进行计算,但我也需要发布他们的名字和价值。<button type =“button”>在提交时用作表单值

我想我也可以有一个相同名称的复选框和jquery更新这个检查状态,但这似乎不专业,我也必须隐藏复选框。

有没有一个优雅的解决方案呢?

使用Twitter引导,jquery,Ruby on Rails。

这种方法的主要目标是有几个大按钮为复选框易于使用在平板电脑等

+0

为什么不使用''? – 2012-08-01 00:21:26

+0

我也试过。没有结果....我应该补充一点,如果按钮处于活动状态,我真的只希望发布值。但我可以从js – Rockman 2012-08-01 00:53:38

+0

得到这个问题,那么,即使按钮没有执行表单提交,你想要提交按钮值?我能想到的唯一解决方案是在隐藏输入字段中镜像按钮的值。你可以将它作为表单提交事件的一部分。这不符合'优雅'的定义: - \,但它会起作用。 – 2012-08-01 01:23:52

回答

0

你可以使用AJAX来服务你的目的。在视图中,你只需要一个带有文本框的按钮,输入一些输入并点击按钮。在Jquery中,onclick方法被调用并且该值作为ajax传递,您的计算可以继续进行,结果存储在db中(如果需要)。

您的视图代码应该是这样的

<input type="button" id="submitt"> 
<div id="myDiv"> </div> 

jQuery代码应该是这样的

var content = ''; 
$(document).ready(function() { 
$('#submitt').click(function(){ 


// do some calculations and store it in a variable nm 
     $.ajax({url:"demo/"+nm, success:function(result){   
      myFunction(result); 
      $("#myDiv").html(content); // To output the result   
     }}); 
     return false; 
}); 
}); 

    function myFunction(result) 
{ 
      content = ''; 
      for (var i = 0; i < result.length; i++) { 
       content += result[i].name; 
       content += '<br/>'; 
      } 
} 

在路由文件

match 'demo/:nm' => 'demo#newsy' 

终于在控制器文件

def newsy 
    @name = request["nm"] 
    new_emp = Client.new 
    new_emp.name = @name 
    new_emp.save 
    @myys = Client.all 
    render :json => @myys 
end 
0

恕我直言,没有什么不专业的隐藏输入。如果你不想隐藏复选框,可以使用type="hidden"

工作demo (jsfiddle)

<button type="button" data-name="myName" class="btn" data-toggle="btn-input" data-target="#myButtonState" value="myValue">Click me</button> 
<input type="hidden" id="myButtonState" /> 
$('[data-toggle="btn-input"]').each(function() { 
    var $this = $(this); 
    var $input = $($this.data('target')); 
    var name = $this.data('name'); 
    var active = false;     // Maybe check button state instead 
    $this.on('click',function() { 
     active = !active; 

     if(active) $input.attr('name', name).val($this.val()); 
     else  $input.removeAttr('name'); 

     $this.button('toggle'); 
    }); 
}); 

removeAttr模仿复选框状态(不管是提交与否)。

+0

我很肯定这是不适用的方法。我认为它会对我有用。 – Rockman 2012-08-01 12:52:50