用户输入如何以 bootstrap 3 形式提交？

Question

我正在使用 bootstrap 3，其中包括 jquery 1.11.2.min.js。我正在使用两个文本字段更新搜索网页：关键字和城市、州、zip。我有一个用于搜索结果的脚本，该脚本需要提取输入到这两个搜索文本字段中的用户输入以查找所需的搜索结果。

视觉解释： 我的带有占位符和搜索按钮的搜索栏：

带有我的用户输入的搜索栏（在波士顿搜索工程工作）： 在 HTML 中，没有为我在波士顿搜索中的工程工作创建的唯一值（value="Engineer" 或 value="Boston"）：

如果没有 value="Engineer" 和 value="Boston"，我无法告诉我的脚本显示波士顿工程工作的搜索结果。我在哪里可以找到/创建它以拉入我的搜索脚本？

它是否位于 bootstrap.js 文件中的任何位置？我无法确定此表单在何处/如何提取用户输入值（无需为每个输入使用 value=""）。

非常感谢您的帮助 - 我的表格如下。

<div id="somebanner" class="somebanner-bgsearch-red hero1 hidden-xs">
  <div class="container-fluid">
    <div class="top-section">
        <div class="container">
          <form class="form-inline no-margin center-block" action="http://www.somesite.com/unknown" method="POST" role="form">
            <div class="row">
              <center>
              <fieldset>

                <!-- Search input-->
                <div class="form-group center-block">
                  <div class="col-sm-4">
                    <input id="keyword" name="keyword" type="search" placeholder="Keyword" class="form-control input-lg">

                  </div>
                </div>

                <!-- Search input-->
                <div class="form-group center-block">
                  <div class="col-sm-4">
                    <input id="location" name="location" type="search" placeholder="City, State, or Zip Code" class="form-control input-lg">

                  </div>
                </div>

                <input type="hidden" name="unknown" value="unknown">

                <!-- Button -->
                <div class="form-group center-block">
                  <div class="col-sm-2">
                    <button type="submit" id="btn-search" name="btn-search" class="btn btn-primary btn-lg btn-tusaj">Search</button>
                  </div>
                </div>
                </center>
              </fieldset>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

这里是 bootstrap.js 代码的链接：http://getbootstrap.com/dist/js/bootstrap.js

这里是 jquery 代码的链接： https://code.jquery.com/jquery-1.11.2.js

Answer 1

您正在尝试使用 Bootstrap 来修改 HTML，但 Bootstrap 是用于响应式设计的 CSS 框架。它无法进行这样的 HTML 修改。你需要使用 jQuery:

$(document).ready(function(){
  $("#btn-search").click(function(e){
    e.preventDefault();
    var x = $("#keyword").val();
    var y = $("#location").val();
    $("#keyword").attr("value", x);
    $("#location").attr("value", y);
  });
});

这应该做的工作。如果您还有其他问题，请在 cmets 中告诉我。