I have using bootstrap v3.3.7 on for my php project. I have included all minified files. But my tooltip is not working.
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="content1">
<div style="padding-left:120px; padding-right:120px">
<form class="form-horizontal" role="form" method="post"
id="formID" enctype="multipart/form-data">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Name of business</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required]" placeholder="Enter name of your business" name="tbname" value="<?=$b_name?>" >
</div>
</div>
<br>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="right" title="specify your nearby location">
<option value="">-- Select Area --</option>
<?php
$q = mysqli_query($con, "select * from tbl_areas");
while($result = mysqli_fetch_assoc($q))
{
echo "<option value='$result[areaid]'>$result[area]</option>";
}
?>
</select>
</div>
</div>
<div class="col-sm-7"> <input type="submit" name="btnad" id="btnad" value="Register" class="btn btn-info"/></div>
</form>
</div>
</div>
</div>
<div class="col-md-3">
<div class="right">
<?php include 'include\front_right.php'?>
</div>
</div>
</div><!--row end-->
</div>
I have used here tooltip for only 'select' tag. but still not working.
Please give me solution for this.
Please chekc this demo how it is working
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Have you included jquery?
Here is a working example:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="bottom" title="specify your nearby location">
<option value="">-- Select Area --</option>
<option value="1">Area 1</option>
<option value="2">Area 2</option>
</select>
</div>
</div>
</div>
Related
I am using an intl-tel-input plugin to get the country code dropdown along with the country flag. I have another input field that has a country name as a dropdown. what I want is when the user selects any country from the country dropdown, then country code automatically gets selected in the country code dropdown. I used several methods but nothing works for me, I didn't find suitable documentation of this plugin too. this is my code.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-countryCode="DZ" value="213">Algeria</option>
<option data-countryCode="AD" value="376">Andorra</option>
<option data-countryCode="AO" value="244">Angola</option>
<option data-countryCode="AI" value="1264">Anguilla</option>
<option data-countryCode="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<!-- Use as a jQuery plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#country").change(function()
{
let value="+"+$(this).val();
$('#txtPhone').val(value);
})
var code = "+977"; // Assigning value from model.
$('#txtPhone').val(code);
$('#txtPhone').intlTelInput({
});
});
</script>
</body>
</html>
To do what you require, call the setCountry option of intlTelInput and provide the country-code data attribute value from the selected option:
$(function() {
$("#country").change(function() {
let countryCode = $(this).find('option:selected').data('country-code');
let value = "+" + $(this).val();
$('#txtPhone').val(value).intlTelInput("setCountry", countryCode);
});
var code = "+977";
$('#txtPhone').val(code).intlTelInput();
});
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-country-code="DZ" value="213">Algeria</option>
<option data-country-code="AD" value="376">Andorra</option>
<option data-country-code="AO" value="244">Angola</option>
<option data-country-code="AI" value="1264">Anguilla</option>
<option data-country-code="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
I have created a dynamic inline form with bootstrap 4 and javascript. I would like to fit all my fields in one row when viewed in a desktop/laptop browser. In the mobile view, I want to stack all my fields one below the other and they should be of equal width.
I tried the bootstrap grid column layout and also attempted to fix a width for each field but it does not seem to be working. Please help.
The HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="input-group">
<div class="form-group p-2">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<button class="btn btn-success" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
The javascript code is provided below:
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="input-group"><div class="form-group p-2"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div><button class="btn btn-danger" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
I am unable to fit all the fields in one row in desktop view. I want my inline form to be mobile-responsive as well. Please advise.
See I have changed few things in your code . What I did was just added col-sm for div classes. You can find more about bootstrap grid system via this link. Bootstrap Grid System . Please go through the code because I have removed some codes from your original code. I think you expect this.To see the result please expan the snippet and then with Inspect Element in you browser and then navigate to mobile view . Thanks
Desktop view
Mobile view
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2 col-sm-3"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2 col-sm-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2 col-sm-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2 col-sm-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="form-group p-2 col-sm-1"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div> <div class="form-group p-2 col-sm-1"><button class="btn btn-danger btn-lg btn-block" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear col-sm-1"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2 col-sm-3">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2 col-sm-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2 col-sm-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2 col-sm-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<button class="btn btn-success btn-lg btn-block" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
I want to pass the selected value of my combo box to the the input value which has a id of "val".
I tried passing the value using jquery
$(document).ready(function() {
$('#btn').click(function(e) {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
alert($('#val').val(selected));
});
});
});
But it's not working. Please help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
<script type=text/javascript>
$(document).ready(function() {
$('#btn').click(function(e) {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
alert($('#val').val(selected));
});
});
});
</script>
</body>
</html>
.change is not neccessary. On the Button click you can directly access the selected value of your dropdown. Please check the below code.
$(document).ready(function() {
$('#btn').click(function(e) {
alert($('#combobox option:selected').val());
});
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
</body>
</html>
you need to remove the click event in #btn
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
$('#val').val(selected)
alert($('#val').val());
});
https://jsfiddle.net/
Please try this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
<script type=text/javascript>
$(document).ready(function() {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
$('#val').val(selected)
alert($('#val').val());
});
});
</script>
</body>
</html>
You have nested your event handlers. Change within click. That is always a sign that the code is wrong. You will be adding a new change handler on every click, which is not what you want.
It is not 100% clear what you are trying to do, but you can start like this:
$(function() {
$('#combobox').change(function() {
var selected = $(this).val();
$('#val').val(selected);
alert($('#val').val());
});
});
Note: val() on a select will return the selected value, so you do not need to use option:selected and its text.
opts is an array ["1","2"]. The select options are not selected. The dropdown is a bootstrap multiselection plugin. What am I missing here?
var data = {};
data.action = "get-form-data";
data["account-id"] = localStorage.getItem("account-id");
ajax('post', 'php/enablers.php', data, formDataSuccess);
function formDataSuccess(data) {
data = JSON.parse(data);
$("#min-rating").val(data.MinRating);
debugger;
var opts = data.AcceptedMedia.split(",");
$.each(opts, function(inx,val){
$('#accepted-media option[value=' + val + ']').attr('selected', true);
})
$("#special-instructions").val(data.SpecialInstructions);
}
HTML
<html lang="en">
<head>
<title>Writer's Tryst - Enablers Form</title>
<link type="text/css" href="css/enablers.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css">
<link rel="stylesheet" href="css/jquery.rateyo.min.css">
<style>
select {
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="container center_div">
<img id="img-enablers" src="#" alt="images" />
<form id = "form-enablers" class="form-horizontal well">
<h1>Enablers</h1>
<p>
<label for="form-type" class="fixed50">Form:</label>
<select id="form-type" name="form-type[]" class="btn btn-outline" multiple="multiple" required>
</select>
</p>
<p>
<label for="genres" class="fixed50">Genres:</label>
<select id="genres" name="genres[]" multiple="multiple" required>
</select><br/>
</p>
<p>For an explanation of the genres shown here, see <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_genres">List of genres</a><br/></p>
<p>
<label for="accepted-media" class="fixed50">Accepted Media:</label>
<select id="accepted-media" name="accepted-media[]" multiple="multiple" required>
<option value='1'>Mail</option>
<option value='2'>PDF File</option>
</select><br/>
</p>
<label for="min-rating" class="fixed50">Minimum Rating:</label>
<div id="min-rating"></div>
<p> <label for="special-instructions" class="fixed50">Special Instructions:</label>
<textarea id ="special-instructions" name="special-instructions"></textarea>
</p>
<p class="thumbnail">For a limited time, enablers can use this site for <span style="color: #f00; font-weight:bold">FREE</span>. We reserve the right to change this policy without notice.</p>
<p id="recaptcha-elements"></p>
<div class="form-group">
<button type="submit" id="enablers-search" class="btn btn-success btn-lg btn-block glyphicon glyphicon-search"> Search</button>
</div>
<input id="userid" name="userid" type="hidden" />
</form>
</div>
<form id="writers-list">
<p id="manuscript-request">To request a manuscript, click the checkbox beneath the thumbs-up icon.</p>
<div id="table-list"></div>
<div id="main" class="content"></div>
</form>
<script src="js/bootstrap-multiselect.js"></script>
<script src="js/jquery.rateyo.js"></script>
<script src="js/enablers.js"></script>
<script src="js/recaptcha.js"></script>
</body>
</html>
Since val() of <select multiple> is array... it is simpler to just set the <select> value instead of looping the options
$('#accepted-media').val(opts)
DEMO
Why does some parts of the first drop-down menu get hidden by another drop-down menu below in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<!-- Note there is no responsive meta tag here -->
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>MarkerDB</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css>
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-inline" action="/between/" method="get">
<div class="input-group">
<span class="input-group-addon">TestA</span>
<select name="tests" class="selectpicker form-control" data-live-search="true" title="Plese select a test ...">
<option selected value="1">Test1</option>
<option selected value="2">Test2</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Search!</button>
</span>
</div>
</form>
<hr>
<form class="form-horizontal" action="/compare/" method="get" role="form">
<div class="input-group">
<span class="input-group-addon">TestB:</span>
<select name='cultnames' class="selectpicker show-menu-arrow form-control" multiple data-max-options="2" data-live-search="true">
<option value="Test3">Test3</option>
<option value="Test4">Test4</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Search!</button>
</span>
</div>
</form>
<hr>
<HR>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script>
$('.selectpicker').selectpicker();
</script>
</body>
</html>
If you put z-index:0 on the input-group in the 2nd form it works ok.
...
<form class="form-horizontal" action="/compare/" method="get" role="form">
<div class="input-group" style="z-index:0;">
...
http://jsfiddle.net/kme2j8ma/