Bootstrap Popover closes itself - javascript

I'm currently working on a edit view. So I decided use a popover with a form on it. I'm using bootstrap v.3.0.0. The popover appear perfectly, however it closes automatically after about 6 - 8 seconds after. Follows the code:
<a class="driveEdit" href="#">
<i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip"></i>
</a>
<div id="popover-content" class="hide">
<!-- MyForm -->
<form id="tab" method="POST"
action="#routes.UiscsiController.editVirtualDrive()"
data-toggle="validator">
<div class="form-group">
<label for="login">Login</label> <input
type="text" id="login" maxlength="50" name="login"
value=""
class="form-control" required/> <span
class="help-block with-errors"></span>
</div>
<div class="form-group">
<label for="jvm_memo">JVM Memo</label>
<select id="jvm_memo" name="jvm_memo" class="form-control">
<ul class="dropdown-menu" role="menu">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10" selected="true">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</ul>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary"
onclick="this.addEventListener('click', clickStopper, false);">
<i class="fa fa-save"></i>Save
</button>
</div>
<input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" />
</form>
</div>
And here my popover initiator:
<script type="text/javascript">
var hasPopover = false;
$(document).ready(function(){
$(".edit-drive").popover({
html : true,
content: function() {
return $("#popover-content").html();
}
});
</script>
Is that a commom behavior or any error on my code?


I've added the placement property set to bottom and also the missing }); from your script and it displays very well. Hope this helps you:
var hasPopover = false;
$(".edit-drive").popover({
html: true,
placement: 'bottom',
content: function() {
return $("#popover-content").html();
}
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<a class="driveEdit" href="#">
<i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip">Click me please!</i>
</a>
<div id="popover-content" class="hide">
<!-- MyForm -->
<form id="tab" method="POST" action="#routes.UiscsiController.editVirtualDrive()" data-toggle="validator">
<div class="form-group">
<label for="login">Login</label>
<input type="text" id="login" maxlength="50" name="login" value="" class="form-control" required/> <span class="help-block with-errors"></span>
</div>
<div class="form-group">
<label for="jvm_memo">JVM Memo</label>
<select id="jvm_memo" name="jvm_memo" class="form-control">
<ul class="dropdown-menu" role="menu">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10" selected="true">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</ul>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary" onclick="this.addEventListener('click', clickStopper, false);">
<i class="fa fa-save"></i>Save
</button>
</div>
<input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" />
</form>
</div>

Related

How to display a HTML page after the form data has been submitted? [duplicate]

This question already has answers here:
After submitting a POST form open a new window showing the result
(5 answers)
Closed 1 year ago.
Currently after submitting the form data all it says is whether the process was successful or not. I want to display a specific html page instead of the default white page it opens. Like a page which says the query was successfully submitted instead of a prompt.
I didn't include the CSS as it was pretty messed up!
<script>
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<script>
function SubForm (){
$.ajax({
url:'https://api.apispreadsheets.com/data/14777/',
type:'post',
data:$("#myForm").serializeArray(),
success: function(){
alert("Form Data Submitted. We will get back to u shortly! :)")
},
error: function(){
alert("There was an error :(")
}
});
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact - Globe Trotter</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheets/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/493f5db5ed.js" crossorigin="anonymous"></script>
<script>
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<script>
function SubForm (){
$.ajax({
url:'https://api.apispreadsheets.com/data/14777/',
type:'post',
data:$("#myForm").serializeArray(),
success: function(){
alert("Form Data Submitted. We will get back to u shortly! :)")
},
error: function(){
alert("There was an error :(")
}
});
}
</script>
</head>
<body>
<!-- Header -->
<header>
Logo
<ul>
<li>Home</li>
<li>Destinations</li>
<li>
<div class="dropdown">
<button class="dropbtn">Places</button>
<!-- <button class="dropbtn">Places</button> -->
<div class="dropdown-content">
Rome
Venice
London
Paris
</div>
</div>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<style>
body {
background-image: url("assets/images/Contact/intro1.jpg");
/*background-color: #cccccc;*/
background-repeat: no-repeat;
}
</style>
<section class="row1">
<div class="grid1">
<!-- <img src="assets/images/Contact/intro.jpg" class="banner" alt="banner"> -->
<section class="about1" id="About information">
<div class="col-2-3-con">
<h2><br>Contact Info<br><br></h2>
<ul class="info1">
<li class="loc">
<i class="fas fa-map-marker-alt fa-2x" style="/*color: white;*/"></i>
<!-- <span class="align">2051 S Santa Fe Ave,<br> Los Angeles,<br> CA 90021, USA</span> -->
<span><h4 style="padding-left: 35px;margin-top: -43px;">2051 S Santa Fe Ave,<br>Los Angeles,<br>CA 90021, USA</h4></span>
</li>
<li class="loc">
<span>
<a class="hvvr" href="https://mail.google.com/mail/u/0/#inbox?compose=CllgCHrglpJhSBnMQnbFbspHTrZTXQcsNzjLJkPdVpctxmrkbLbjDhDJWNDClBZBSLnWjnXsHCL"><i class="fas fa-envelope-square fa-2x" style="/*color: white;*/"></i></a>
</span>
<span>66sayak#gmail.com</span>
</li>
<li class="loc">
<span>
<i class="fas fa-phone-alt fa-2x"></i>
</span>
<span>+91 9903064954</span>
</li>
<li>
<span>
<h1><br><br><br></h1>
<i class="fab fa-facebook-square fa-2x" style="/*color: white;*/"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
<i class="fab fa-linkedin-in fa-2x"></i>
</span>
</li>
</ul>
</div><!--
--><form class="col-1-3-con" action="https://api.apispreadsheets.com/data/14777/" method="post" style="background-color:rgba(0, 0, 0, 0.87);">
<!--<style>
body {
background-color: #000000;
}
</style>-->
<fieldset class="register-group">
<label>
Name
<input type="text" name="name" placeholder="Full name" required>
</label>
<label>
Email
<input type="email" name="email" placeholder="Email address" required>
</label>
<label>
Contact Number
<input type="tel" name="phone-number" placeholder="Mobile Number" required>
</label>
<label>
Number of Persons
<select name="quantity_1" class="des" required>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</label>
<label>
Destination
<select name="text" class="des-1" required>
<option value="Rome" selected>Rome</option>
<option value="London">London</option>
<option value="Paris">Paris</option>
<option value="Venice">Venice</option>
</select>
</label>
<label>
Duration Of Trip (Days)
<select name="quantity_2" class="des" required>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</label>
<label>
Date
<input type="date" name="travel-date" placeholder="Date of travel" required>
</label>
<label>
Comments
<textarea name="comments"></textarea>
</label>
</fieldset>
<input class="btn btn-default" type="submit" name="submit" onclick="SubForm()" value="Send">
</form>
</section>
</div>
</section>
<section class="destination-showcase">
</div>
<div style="background-image: url('assets/images/Contact/end.jpg');" class="bg-6">
<h1>So, where are u going nxt?</h1>
</div>
</section>
<!-- Footer -->
<footer class="primary-footer container group">
<small>© Logo</small>
<style>
footer {
background-image: url("assets/images/Contact/end2.jpg");
background-color: #cccccc;
background-repeat: no-repeat;
}
</style>
<nav class="nav">
<ul>
<li>Home</li><!--
--><li>Destinations</li><!--
--><li>About</li><!--
--><li>Contact</li>
</ul>
</nav>
</footer>
</body>
</html>
**
</div><!--
--><form class="col-1-3-con" action="https://api.apispreadsheets.com/data/14777/" method="post" style="background-color:rgba(0, 0, 0, 0.87);">
<!--<style>
body {
background-color: #000000;
}
</style>-->
<fieldset class="register-group">
<label>
Name
<input type="text" name="name" placeholder="Full name" required>
</label>
<label>
Email
<input type="email" name="email" placeholder="Email address" required>
</label>
<label>
Contact Number
<input type="tel" name="phone-number" placeholder="Mobile Number" required>
</label>
<label>
Number of Persons
<select name="quantity_1" class="des" required>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</label>
<label>
Destination
<select name="text" class="des-1" required>
<option value="Rome" selected>Rome</option>
<option value="London">London</option>
<option value="Paris">Paris</option>
<option value="Venice">Venice</option>
</select>
</label>
<label>
Duration Of Trip (Days)
<select name="quantity_2" class="des" required>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</label>
<label>
Date
<input type="date" name="travel-date" placeholder="Date of travel" required>
</label>
<label>
Comments
<textarea name="comments"></textarea>
</label>
</fieldset>
<input class="btn btn-default" type="submit" name="submit" onclick="SubForm()" value="Send">
</form>
</section>
</div>
</section>
And the Javascript
<script>
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
<script>
function SubForm (){
$.ajax({
url:'https://api.apispreadsheets.com/data/14777/',
type:'post',
data:$("#myForm").serializeArray(),
success: function(){
alert("Form Data Submitted. We will get back to u shortly! :)")
},
error: function(){
alert("There was an error :(")
}
});
}
</script>

you can try this:-
<button onclick="myFunction()">Submit</button>
<script>
function myFunction() {
location.replace("https://www.amazon.in")
}
</script>

how to set submit button Every tabs with functionality in jquery?

I created 4 tabs using bootstrap, every tabs have separate separate forms, and every tabs have submit button also., now how to submit form induvidually.
For example i filled 1st tab form and click submit and goto 2nd tab fill the form click submit and goto 3rd tab fill form click submit like that..
Fiddle here..
FIDDLE HERE
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12" id="contactForm">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-bank-tab" data-toggle="tab" href="#nav-bank" role="tab" aria-controls="nav-bank" aria-selected="true">Bank</a>
<a class="nav-item nav-link" id="nav-cash-tab" data-toggle="tab" href="#nav-cash" role="tab" aria-controls="nav-cash" aria-selected="false">Cash</a>
<a class="nav-item nav-link" id="nav-pnl-tab" data-toggle="tab" href="#nav-pnl" role="tab" aria-controls="nav-pnl" aria-selected="false">P&L</a>
<a class="nav-item nav-link" id="nav-tds-tab" data-toggle="tab" href="#nav-tds" role="tab" aria-controls="nav-tds" aria-selected="false">TDS Creations</a>
</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show tabContent active" id="nav-bank" role="tabpanel" aria-labelledby="nav-bank-tab">
<form role="form" method="post" action="" id="contactForm">
<div class="selectContainer" id="bankTab">
<select multiple="multiple" name="">
<option name="opt1" value="AB">Allahabad Bank</option>
<option name="opt2" value="AN">Andhra Bank</option>
<option name="opt3" value="BI">Bank of India</option>
<option name="opt4" name="opt3" value="BB">Bank of Baroda</option>
<option name="opt5" value="BM">Bank of Maharashtra</option>
<option name="opt6" value="CB">Canara Bank</option>
<option name="opt7" value="CBI">Central Bank of India</option>
<option name="opt8" value="COB">Corporation Bank</option>
<option name="opt9" value="DB">Dena Bank</option>
<option name="opt10" value="IB">Indian Bank</option>
<option name="opt11" value="IOB">Indian Overseas Bank</option>
<option name="opt12" value="OBC">Oriental Bank of Commerce</option>
<option name="opt13" value="PSB">Punjab & Sindh Bank</option>
<option name="opt14" value="PNB">Punjab National Bank</option>
<option name="opt15" value="SB">Syndicate Bank</option>
<option name="opt16" value="UCO">UCO Bank</option>
<option name="opt17" value="UBI">Union Bank of India</option>
<option name="opt18" value="UBOI">United Bank of India</option>
<option name="opt19" value="VB">Vijaya Bank</option>
<option name="opt20" value="SBI">State Bank of India</option>
<option name="opt21" value="IDBI">IDBI Bank</option>
<option name="opt22" value="ICBC">Industrial and Commercial Bank of China</option>
<option name="opt23" value="CSB">China Construction Bank Corporation</option>
<option name="opt24" value="ABC">Agricultural Bank of China</option>
<option name="opt25" value="MUFG">Mitsubishi UFJ Financial Group (Mitsubishi)</option>
<option name="opt26" value="BOC">Bank of China</option>
</select>
</div>
</form>
<!-- First tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<button type="submit" class="btn submit-control tab_sub" name="submit" id="tabFirst">Submit</button>
<button type="reset" class="btn btn-default tab_sub reset-btn" id="resetFirst">Reset</button>
</div>
</div>
</div>
<div class="tab-pane fade tabContent" id="nav-cash" role="tabpanel" aria-labelledby="nav-cash-tab">
<form role="form" method="post" action="" id="scndTab">
<div class="cashContainer" id="cashTab">
<select multiple="multiple" name="">
<option value="AB">Allahabad Bank</option>
<option value="AN">Andhra Bank</option>
<option value="BI">Bank of India</option>
<option value="BB">Bank of Baroda</option>
<option value="BM">Bank of Maharashtra</option>
<option value="CB">Canara Bank</option>
<option value="CBI">Central Bank of India</option>
<option value="COB">Corporation Bank</option>
<option value="DB">Dena Bank</option>
<option value="IB">Indian Bank</option>
<option value="IOB">Indian Overseas Bank</option>
<option value="OBC">Oriental Bank of Commerce</option>
<option value="PSB">Punjab & Sindh Bank</option>
<option value="PNB">Punjab National Bank</option>
<option value="SB">Syndicate Bank</option>
<option value="UCO">UCO Bank</option>
<option value="UBI">Union Bank of India</option>
<option value="UBOI">United Bank of India</option>
<option value="VB">Vijaya Bank</option>
<option value="SBI">State Bank of India</option>
<option value="IDBI">IDBI Bank</option>
<option value="ICBC">Industrial and Commercial Bank of China</option>
<option value="CSB">China Construction Bank Corporation</option>
<option value="ABC">Agricultural Bank of China</option>
<option value="MUFG">Mitsubishi UFJ Financial Group (Mitsubishi)</option>
<option value="BOC">Bank of China</option>
</select>
</div>
</form>
<!-- Second tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<button type="submit" class="btn submit-control tab_sub" id="tabSecond" name="">Submit</button>
<button type="reset" class="btn btn-default tab_sub reset-btn" id="resetSecond">Reset</button>
</div>
</div>
</div>
<div class="tab-pane fade tabContent" id="nav-pnl" role="tabpanel" aria-labelledby="nav-pnl-tab">
<form role="form" method="post" action="" id="thirdtab_form">
<div class="row">
<div class="form-group col-12">
<label class="control-label p-sm-0 thirdTab" style="left: 35%">Please Select P&L* :</label>
<select class="form-control pnl_slet thirdTab" name="pnlTab" id="pnlTab" required>
<option value="">Choose an items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
<option value="3">Joe3</option>
<option value="4">Joe4</option>
<option value="5">Joe5</option>
</select>
</div>
</div>
</form>
<!-- Third tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<input type="submit" class="btn submit-control tab_sub" id="tabThird" value="Submit" name="tabThird">
<button type="reset" class="btn btn-default tab_sub reset-btn" id="resetThird" value="Reset">Reset</button>
</div>
</div>
</div>
<div class="tab-pane fade tabContent" id="nav-tds" role="tabpanel" aria-labelledby="nav-tds-tab">
<form role="form" method="post" action="" id="forthtab_form">
<div class="tdsContainer" id="tdsTab">
<select multiple="multiple" name="">
<option value="AB">Allahabad Bank</option>
<option value="AN">Andhra Bank</option>
<option value="BI">Bank of India</option>
<option value="BB">Bank of Baroda</option>
<option value="BM">Bank of Maharashtra</option>
<option value="CB">Canara Bank</option>
<option value="CBI">Central Bank of India</option>
<option value="COB">Corporation Bank</option>
<option value="DB">Dena Bank</option>
<option value="IB">Indian Bank</option>
<option value="IOB">Indian Overseas Bank</option>
<option value="OBC">Oriental Bank of Commerce</option>
<option value="PSB">Punjab & Sindh Bank</option>
<option value="PNB">Punjab National Bank</option>
<option value="SB">Syndicate Bank</option>
<option value="UCO">UCO Bank</option>
<option value="UBI">Union Bank of India</option>
<option value="UBOI">United Bank of India</option>
<option value="VB">Vijaya Bank</option>
<option value="SBI">State Bank of India</option>
<option value="IDBI">IDBI Bank</option>
<option value="ICBC">Industrial and Commercial Bank of China</option>
<option value="CSB">China Construction Bank Corporation</option>
<option value="ABC">Agricultural Bank of China</option>
<option value="MUFG">Mitsubishi UFJ Financial Group (Mitsubishi)</option>
<option value="BOC">Bank of China</option>
</select>
</div>
</form>
<!-- Second tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<input type="submit" class="btn submit-control tab_sub" id="tabForth" value="Submit">
<button type="reset" class="btn btn-default reset-btn tab_sub" value="Reset" id="resetForth">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
Note: Saperate tabs, Saperate submit buttons (Every tabs have submit buttons)

How can I fix the following jQuery Validate issue in Umbraco?

I am using the Umbraco CMS to load a jQuery file that uses the jQuery Validate plugin. The code seems to work fine on my local machine but not in Umbraco. The form is not being validated, jQuery itself is loaded and working fine as I have tested this with a window.alert(); call. Although, saying this an if statement is not working in the CMS but is working on my local machine.
So this works fine on my local machine, but doesn't in Umbraco:
var wheelchairOptions = $("#wheelchair-options");
wheelchairOptions.hide();
$('#00N25000002TSTd').click(function(){
if($(this).prop("checked") === true){
wheelchairOptions.show();
alert("working");
}
else if($(this).prop("checked") === false){
wheelchairOptions.hide();
}
});
Due to how Umbraco loads in code, it's not a simple copy and paste. This is how the code is laid out in Umbraco:
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8" />
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
<script type="text/javascript">
var verifyCallback = function(response) {
//alert(response);
//$('#re_button').show();
$('#re_button').prop("disabled", false);
};
var onloadCallback = function() {
grecaptcha.render('example3', {
'sitekey' : '6LdmNKkUAAAAANgIH_Z_IJCstpLT4BaLqc76CTKn',
'callback' : verifyCallback,
'theme' : 'light'
});
};
$("#nx-form").validate({
rules: {
name: {
required: true,
lettersonly: true,
minlength: 2,
maxlength: 80,
normalizer: function( value ) {
return $.trim( value );
}
},
email: {
required: true,
email: true,
minlength: 2,
maxlength: 80
},
phone: {
required: true,
phoneUK: true,
minlength: 2,
maxlength: 40
},
subject: {
required: true,
minlength: 2,
maxlength: 40
},
"00N25000002TSEr": {
required: true,
minlength: 2,
maxlength: 255
},
"00N25000002TSFu": {
required: true,
lettersonly: true,
minlength: 2,
maxlength: 255
},
"00N25000002TSGJ": {
required: true,
lettersonly: true,
minlength: 2,
maxlength: 255
},
"00N25000002TSJ3": {
required: true,
time: true
},
"00N25000002TSJD": {
required: true,
dateISO: true
},
"00N25000002TSTd": {
required: true
}
}
});
// Tests to see if name field contains letters only
$.validator.addMethod( "lettersonly", function( value, element ) {
return this.optional( element ) || /^[a-z\s ,.'-]+$/i.test( value ); }, "Letters only please" );
// Tests to see if tel field contains numbers only
$.validator.addMethod( "phoneUK", function( phone_number, element ) {
phone_number = phone_number.replace( /\(|\)|\s+|-/g, "" );
return this.optional( element ) || phone_number.length > 9 &&
phone_number.match( /^(?:(?:(?:00\s?|\+)44\s?)|(?:\(?0))(?:\d{2}\)?\s?\d{4}\s?\d{4}|\d{3}\)?\s?\d{3}\s?\d{3,4}|\d{4}\)?\s?(?:\d{5}|\d{3}\s?\d{3})|\d{5}\)?\s?\d{4,5})$/ );
}, "Please specify a valid phone number" );
// Tests to see if departure fields contain correct time format
$.validator.addMethod( "time", function( value, element ) {
return this.optional( element ) || /^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/.test( value );
}, "Please enter a valid time in the format HH:MM, between 00:00 and 23:59. For e.g. 16:30" );
var wheelchairOptions = $("#wheelchair-options");
wheelchairOptions.hide();
$('#00N25000002TSTd').click(function(){
if($(this).prop("checked") === true){
wheelchairOptions.show();
}
else if($(this).prop("checked") === false){
wheelchairOptions.hide();
}
});
</script>
</head>
<body>
<form action="https://national-express--bgdev.my.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST" id="nx-form" name="nx-form" class="nx-form">
<input type="hidden" name="orgid" value="00D2500000090xE" />
<input type="hidden" name="retURL" value="http://www.google.com" />
<input type="hidden" id="recordType" name="recordType" value="01225000000En7U" />
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="mikebackhouse#brightgen.com"> -->
<!-- ---------------------------------------------------------------------- -->
<div class="col-sm-12 form_spacing" style="font-weight: bold; font-size: 0.85em">* Required field</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="name">Contact Name</label></div>
<div class="col-sm-8">
<input class="form-control nx-form-control" id="name" maxlength="80" name="name" size="20" type="text" />
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="email">Email</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="email" name="email" type="email" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="phone">Phone</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="phone" name="phone" type="tel" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="subject">Subject</label></div>
<div class="col-sm-8"><input id="subject" class="form-control nx-form-control" maxlength="80" name="subject" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSEr">Ticket Number:</label></div>
<div class="col-sm-8"><input id="00N25000002TSEr" class="form-control nx-form-control" maxlength="255" name="00N25000002TSEr" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSFu">Travelling From:</label></div>
<div class="col-sm-8"><input id="00N25000002TSFu" class="form-control nx-form-control" maxlength="255" name="00N25000002TSFu" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSGJ">Travelling To:</label></div>
<div class="col-sm-8"><input id="00N25000002TSGJ" class="form-control nx-form-control" maxlength="255" name="00N25000002TSGJ" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSJ3">Departure Time:</label><span class="timeContainer"></div>
<div class="col-sm-8"><input id="00N25000002TSJ3" class="form-control nx-form-control" name="00N25000002TSJ3" placeholder="HH:MM" size="12" type="text" /></div>
</span>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSJD">Date of Travel:</label><span class="dateInput dateOnlyInput"></div>
<div class="col-sm-8"><input id="00N25000002TSJD" class="form-control nx-form-control" name="00N25000002TSJD" size="12" type="text" placeholder="DD/MM/YY" /></div>
</span>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSTd">Travel with Wheelchair?:</label></div>
<div class="col-sm-8"><input id="00N25000002TSTd" name="00N25000002TSTd" type="checkbox" value="1" /></div>
</span>
</div>
<div id="wheelchair-options">
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSTx">Wheelchair Make</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="00N25000002TSTx" maxlength="255" name="00N25000002TSTx" size="20" type="text"/></div>
</span>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSU7">Wheelchair Model</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="00N25000002TSU7" maxlength="255" name="00N25000002TSU7" size="20" type="text"/></div>
</span>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUM">Age of Child 1:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUM" name="00N25000002TSUM" title="Age of Child 1">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUR">Age of Child 2:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUR" name="00N25000002TSUR" title="Age of Child 2">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUW">Age of Child 3:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUW" name="00N25000002TSUW" title="Age of Child 3">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUb">Age of Child 4:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUb" name="00N25000002TSUb" title="Age of Child 4">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUg">Age of Child 5:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUg" name="00N25000002TSUg" title="Age of Child 5">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TTcp">Customer Entered Summary:</label></div>
<div class="col-sm-8"><textarea class="form-control nx-form-control text_area" id="00N25000002TTcp" name="00N25000002TTcp" rows="3" type="text" wrap="soft"></textarea></div>
</div>
<div class="col-sm-12 form_spacing">
<!--<div class="g-recaptcha" data-sitekey="6LdmNKkUAAAAANgIH_Z_IJCstpLT4BaLqc76CTKn"></div>-->
<div id="example3"></div>
</div>
<div class="col-sm-12 form_spacing">
<button id="re_button" class="primaryButton primaryButton--blue button_custom" type="submit" disabled="disabled" >Submit Query</button>
</div>
</form>
</body>
</html>
I think the issue may be related to HOW jQuery Validate is being loaded in, I have tried moving the jQuery tags to just before the tag but to no avail.
What should happen is on change and then blur the forms input fields should be tested for validation, with an error message underneath the relevant input field.

Show a alert message when pressing button without exiting the modal form

I have a signup modal form and I want the users to get an alert message if there are fields empty when they press the register button.
I can't really figure it out how to do it.
As I said in my previous posts I am new to coding so please be patient with me.
Thank you!
<div class="modal fade" id="signUp" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="text-center"><i class="fa fa-user-plus" aria-hidden="true"></i> Registro</h3>
</div>
<div class="modal-body">
<form action="" name="registerform" id="signup1" method="POST" role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="name"><i class="fa fa-user-circle" aria-hidden="true"></i> Nombres</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Ingresa tu(s) nombre(s)">
<span id="nameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="lname"><i class="fa fa-user-circle" aria-hidden="true"></i> Apellidos</label>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Ingresa tus apellidos">
<span id="lnameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span>
</div>
</div>
</div>
<div class="form-group" id="genero">
<div class="btn-group" data-toggle="buttons">
<label for="masculino" class="btn btn-default active">
<input type="radio" name="genero" id="masculino" autocomplete="off" checked value="M">
Masculino
</label>
<label for="femenino" class="btn btn-default">
<input type="radio" name="genero" id="femenino" autocomplete="off" value="F">
Femenino
</label>
</div>
</div>
<div class="form-group">
<label for="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Correo electronico</label><span id="resultmail"></span>
<input type="email" class="form-control" name="email" id="email" placeholder="Ingresa tu correo electronico" autocomplete="off">
</div>
<div class="form-group">
<label for="user"><i class="fa fa-user" aria-hidden="true"></i> Usuario</label><span id="result"></span>
<input type="text" class="form-control" name="user" id="user" placeholder="Ingresa tu usuario" autocomplete="off">
</div>
<div class="form-group">
<label><i class="fa fa-birthday-cake" aria-hidden="true"></i> Fecha de nacimiento</label>
<div class="row" id="fecha">
<div class="col-xs-4">
<select class="form-control btn-default custom" name="day">
<option hidden>Dia</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control btn-default custom" name="month">
<option hidden>Mes</option>
<option value="01">Enero</option>
<option value="02">Febrero</option>
<option value="03">Marzo</option>
<option value="04">Abril</option>
<option value="05">Mayo</option>
<option value="06">Junio</option>
<option value="07">Julio</option>
<option value="08">Agosto</option>
<option value="09">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control btn-default custom" name="year">
<option hidden>Año</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1954</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="password"><i class="fa fa-eye" aria-hidden="true"></i> Contrasena</label><span id="resultpass"></span>
<input type="password" class="form-control" id="password" name="password" placeholder="Ingresa tu contrasena" autocomplete="off">
</div>
<div class="form-group">
<label for="cpassword"><i class="fa fa-keyboard-o" aria-hidden="true"></i> Confirma tu contrasena</label><span id="resultcpass"></span>
<input type="password" class="form-control" id="cpassword" name="cpassword" placeholder="Vuelve a ingresar tu contrasena" autocomplete="off">
</div>
</div>
<div class="modal-footer">
<input type="submit" id="btnregistrar" name="register" class="btn btn-default" value="Registrar"></input>
<button type="button" id="btncerrar1" id="reset" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</form>
</div>
</div>

Hide Base on select (multiple)

I want to hide and show input just closest select
script
$(function() {
var inputToHide = $('div[id=other]');
$('#showhide]').on('change', function() {
var selected = $('#other option:selected').val();
if (selected === "other") {
$(this).closest('div[id=other]').show();
} else {
$(this).closest('div[id=other]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control" id="showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
Hide this if not "other" selected
<div class="input-group" id="other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
<br>
<br>
<br>
<br>
<br>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control" id="showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
Hide this if not "other" selected
<div class="input-group" id="other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
end html
How to do this?

There were a lot of incoherences when I reviewed your code.
You use the same id multiple times. You should, at all cost, always try to avoid that! read here
Also, I was not sure what you were aiming to do. Was it to show the input when the selected option is other? Your code was a little confusing about that.
So I fixed the problems, and acted as you wanted the input to be shown if the selected option was "Other". (note that inputs are hidden on startup, instead of shown)
The code :
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
<br>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>
html
$(function() {
$('.other').hide();
$('.showhide').change(function() {
var selected = $(this).find("option:selected").val();
if (selected === "other") {
$(this).parent().next(".other").show();
} else {
$(this).parent().next(".other").hide();
}
});
});
js
jsfiddle

First i can see that you have identifiers problem, you should use unique ids in same document, when you solve that you can improve your script to be like following example and it will work.
Hope this helps.
$(function() {
$('body').on('change', '#showhide', function() {
if ($(this).val() == "other")
$('#other').show();
else
$('#other').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control" id="showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
Hide this if not "other" selected
<div class="input-group" id="other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" />
</div>

$(function() {
$('.other').hide();
$('.showhide').on('change', function() {
if ($(this).val() == "other") {
$(this).closest('.section').find('.other').show();
} else {
$(this).closest('.section').find('.other').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="section">
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" placeholder="first input"/>
</div>
</div>
<br/>
<br/>
<br/>
<div class="section">
<div class="input-group">
<span><i class="fa fa-globe"></i></span>
<select name="web" class="form-control showhide">
<option value="" selected="selected">Select ...</option>
<option value="car">car</option>
<option value="train">train</option>
<option value="other">other</option>
</select>
</div>
<div class="input-group other">
<span><i class="fa fa-play"></i></span>
<input type="text" name="other" class="form-control" placeholder="second input" />
</div>
</div>

Categories

Resources