Question

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

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

这是否有优雅的解决方案？

使用Twitter Bootstrap，jquery，Ruby on Rails。

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

Answer 1

您可以使用ajax来达到目的。在视图中，您只需一个带文本框的按钮，输入一些输入并单击按钮。调用IN 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

Answer 2

恕我直言，隐藏输入并没有什么不专业。如果您不想隐藏复选框，可以使用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模仿复选框状态（无论是否提交）。

<button type =“button”>用作提交</button>的表单值

2 个答案: