javascript - Bootstrap 3 表单中用户输入是如何提交的？

Question

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

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

带有用户输入的搜索栏(搜索波士顿的工程工作): 在 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);
  });
});

这应该可以完成工作。如果您还有其他问题，请在评论中告诉我。