index.html

{% extends "base.html" %}
{% block content %}
    <div class="container">


             <div class="modal-body">
               <form id="signupForm" role="form">
                 <input type="hidden" id="theme" name="theme" value="{{theme}}"/>
                 <div class="form-group">
                   <label for="query">Query</label>
                   <input type="text" class="form-control" id="query" name="query" placeholder="Enter query">
                 </div>
               <button id="show_result" type="button" href="/result" class="btn btn-primary">Search</button>
             </div>
             <div class="modal-footer">
             </div>
    </div> <!-- /container -->

    <script src="{{ url_for('static', filename="jquery/jquery.js") }}"></script>
    <script src="{{ url_for('static', filename="bootstrap/js/bootstrap.min.js") }}"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $("#show_result").click(function() {
        $.post( "/show_result", $("#query").serialize())
      })
    })
    </script>
{% endblock %}