如何在bootstrap 3表单中提交用户输入?

时间:2015-07-13 15:30:40

标签: javascript forms twitter-bootstrap twitter-bootstrap-3 initializr

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

视觉说明: 我的搜索栏带有占位符和搜索按钮: enter image description here

我的搜索栏包含我的用户输入(在波士顿搜索工程职位): enter image description here 在HTML中,没有为波士顿搜索中的工程作业创建的唯一值(value =“Engineer”或value =“Boston”): enter image description here

没有值=“工程师”和值=“波士顿”我不能告诉我的脚本在波士顿显示工程工作的搜索结果。我在哪里找到/创建这个以进入我的搜索脚本?

这是位于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

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

enter image description here

1 个答案:

答案 0 :(得分: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);
  });
});

那应该做的工作。如果您还有其他问题,请在评论中告诉我们。