如何以bootstrap 3形式提交用户输入？ [英] How is user input submitted in bootstrap 3 form?

问题描述

我使用bootstrap 3，其中包括jquery 1.11.2.min.js.我正在更新一个带有两个文本框的搜索网页：关键字和城市，州，邮编。我有一个搜索结果的脚本，需要将用户输入的内容输入到这两个搜索文本框中，以找到所需的搜索结果。

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

$ p

b
在HTML中，没有唯一值（value =Engineer或价值=波士顿）创建我的工程工作在波士顿搜索：

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

它位于bootstrap.js文件的任何位置？我无法弄清楚此表单在何处/如何拉取用户输入值（而不必为每个输入使用value =）。

您的帮助是非常感谢 - 我的表单在下面。

 < div id =somebannerclass =somebanner-bgsearch-red hero1 hidden -xs> 
< div class =container-fluid> 
< div class =top-section> 
< div class =container> 
< form class =form-inline no-margin center-blockaction =http://www.somesite.com/unknownmethod =POSTrole =form> 
< div class =row> 
< center> 
< fieldset> 
 
 <！ - 搜寻输入 - > 
< div class =form-group center-block> 
< div class =col-sm-4> 
< input id =keywordname =keywordtype =searchplaceholder =Keywordclass =form-control input-lg> 
 
< / div> 
< / div> 
 
 <！ - 搜寻输入 - > 
< div class =form-group center-block> 
< div class =col-sm-4> 
< input id =locationname =locationtype =searchplaceholder =City，State，or Zip Codeclass =form-control input-lg> 
 
< / div> 
< / div> 
 
< input type =hiddenname =unknownvalue =unknown> 
 
<！ -  Button  - > 
< div class =form-group center-block> 
< div class =col-sm-2> 
< button type =submitid =btn-searchname =btn-searchclass =btn btn-primary btn-lg btn-tusaj>搜寻< / button> 
< / div> 
< / div> 
< / center> 
< / fieldset> 
< / div> 
< / form> 
< / div> 
< / div> 
< / div> 
< / div> 
  

以下是bootstrap.js代码的链接：

<您试图使用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）; 
}）; 
}）; 
  

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

I'm using bootstrap 3, which includes jquery 1.11.2.min.js. I'm updating a search webpage with two textfields: keyword and city,state,zip. I have a script for the search results that needs to pull the user input that's typed into these two search textfields for finding the desired search results.

Visual explanation: My search bar with placeholders and search button:

My search bar with my user input (searching for an engineering job in Boston): In the HTML, there is no unique value (value="Engineer" or value="Boston") created for my engineering job in Boston search:

Without value="Engineer" and value="Boston" I cannot tell my script to display search results of engineering jobs in Boston. Where do I find/create this to pull into my search script?

Is this located in the bootstrap.js file anywhere? I'm having trouble figuring out where/how this form is pulling the user input value (without having to use value="" for each input).

Your help is much appreciated - my form is below.

<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>

Here's the link to the bootstrap.js code: http://getbootstrap.com/dist/js/bootstrap.js

Herer's the link to the jquery code: https://code.jquery.com/jquery-1.11.2.js

解决方案

You're trying to use Bootstrap for modifying HTML, but Bootstrap is a CSS framework used for responsive design. It's incapable of doing such HTML modification. You need to use 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);
  });
});

That should do the work. If you have further questions, let me know in the comments.

这篇关于如何以bootstrap 3形式提交用户输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！