jquery - 用作提交时的表单值

Question

我试图找出在type=button表单提交上显示按钮的“最佳”方法。这些不是提交按钮，但它们确实会触发一些用于计算的 js，但我还需要发布它们的名称和值。

我想我也可以有一个同名的复选框，jquery 更新这个选中的状态，但这似乎不专业，我还必须隐藏复选框。

有没有一个优雅的解决方案？

使用 Twitter Bootstrap、jquery、Ruby on Rails。

这种方法的主要目标是有几个大按钮作为复选框，以便在平板电脑等上轻松使用。

Answer 1

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

工作演示（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无论是否提交）。

Answer 2

您可以使用 ajax 来达到您的目的。在视图中，您只有一个带有文本框的按钮，输入一些输入并单击该按钮。IN Jquery onclick 方法被调用，值作为 ajax 传递，您的计算可以进行，结果存储在数据库中（如果需要）。

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

<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