Twitter Bootstrap表格。如何捕获表单中输入的值?

时间:2014-06-13 00:16:27

标签: javascript forms twitter-bootstrap modal-dialog

我是Twitter Bootstrap新手,我不得不深入了解一下。我有一个项目,我有一个嵌入模态的表单。该表单用于将值传递给JS对象。根本没有服务器参与。

表格: http://getbootstrap.com/css/?#forms

模态: http://getbootstrap.com/javascript/#modals

我有几个问题:

  1. 当我按“提交”时,表单中的值被捕获/存储的方式和位置?
  2. 如何将这些值传递回我的JS对象。
  3. 注意: 我一直在加快自定义数据属性的速度。他们在这里扮演角色吗?

    UPDATE 这是我正在使用的表单代码:

    <form class="form-horizontal" role="form">
    
      <div class="form-group">
        <label for="inputFilterMinimum" class="col-sm-2 control-label">Minimun</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputFilterMinimum_TRACK_LABEL" placeholder="Minimum">
        </div>
      </div>
    
      <div class="form-group">
        <label for="inputFilterMaximum" class="col-sm-2 control-label">Maximum</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputFilterMaximum_TRACK_LABEL" placeholder="Maximum">
        </div>
      </div>
    
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Apply</button>
        </div>
      </div>
    
    </form>
    

    所以这个想法是我想把最小值和最大值传递给我按下“应用”按钮时实现的JS对象。

1 个答案:

答案 0 :(得分:1)

您可以在模态关闭时捕获变量,并以任何方式使用它们。这是使用jQuery UI的dialog函数:

$( "#MyDialog" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Save": function() {
                        $('#name').val($('#firstname').val() + " " + $('#lastname').val());
                        $( this ).dialog( "close" );
                    },
                    "Cancel": function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    //do what you want with the values here
                    $('#firstname').val("");
                    $('#lastname').val("");
                }
            });

            $( "#name" ).click(function() { $( "#MyDialog" ).dialog( "open" ); });
        });

JSFiddle Example