How is user input submitted in bootstrap 3 form?

Question

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

Answer 1

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.