I have a form with ul as a dropdown menu:
<div class="dropdown">
<button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Type
Doctor
Patient
How do I send what I select in it to a PHP $_POST variable?
I tried this post didn't work. Then, I got this form from this bootsrap templates signup form but I don't realy know javascript.
Here is the full form code:
<form action="account.php" class="popup-form" method="post">
<input type="text" name="fname" class="form-control form-white" placeholder="Full Name">
<input type="text" name="email" class="form-control form-white" placeholder="Email Address">
<input type="text" name="username" class="form-control form-white" placeholder="User Name">
<input type="password" name="passwrd" class="form-control form-white" placeholder="Password">
<div class="dropdown">
<button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Type
</button>
<ul class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
<li class="animated lightSpeedIn"><a class="cl" href="#">Doctor</a></li>
<li class="animated lightSpeedIn"><a class="cl" href="#">Patient</a></li>
</ul>
</div>
<div class="checkbox-holder text-left">
<div class="checkbox">
<input type="checkbox" value="None" id="squaredOne" name="check" />
<label for="squaredOne"><span>I Agree to the <strong>Terms & Conditions</strong></span></label>
</div>
</div>
<input type="submit" class="btn btn-submit"></input>
</form>
Try this :
<div class="dropdown">
<button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Type
</button>
<ul class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
<li class="animated lightSpeedIn"><a class="cl" href="#">Doctor</a></li>
<li class="animated lightSpeedIn"><a class="cl" href="#">Patient</a></li>
</ul>
</div>
JS Code :
$(".cl").click(function () {
var val = $(this).html();
$.post("test.php",{v:val},function (data){
alert(data);
});
});
test.php
<?php
if(isset($_POST["v"]) && $_POST["v"] != "") {
echo $_POST["v"];
exit;
}
?>
I'm assuming that your HTML and PHP files are in same folder.And you've included jQuery library in your HTML.
<ul> and <li> are not form tags that send value, you need to use <select> instead.
<select name="type">
<option value="doctor">Doctor</option>
<option value="patient">Patient</option>
</select>
In <ul> <li> tags you cannot select a value. If you are using any pre-defined jquery library then you can pass by post data. Else change the ul li tags to "radio buttons or checkboxes or select" according to your requirement.
Using the below code i fixed the problem
<form action="account.php" class="popup-form" method="post">
<input type="text" name="fname" class="form-control form-white" placeholder="Full Name">
<input type="text" name="email" class="form-control form-white" placeholder="Email Address">
<input type="text" name="username" class="form-control form-white" placeholder="User Name">
<input type="password" name="passwrd" class="form-control form-white" placeholder="Password">
<input class="span2" id="a_type" name="a_type" type="hidden">
<div class="dropdown">
<button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Type
</button>
<ul class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
<li onclick="$('#a_type').val('Doctor'); $('#searchForm').submit()" class="animated lightSpeedIn"><a class="cl" href="#">Doctor</a></li>
<li onclick="$('#a_type').val('Patient'); $('#searchForm').submit()" class="animated lightSpeedIn"><a class="cl" href="#">Patient</a></li>
</ul>
</div>
<div class="checkbox-holder text-left">
<div class="checkbox">
<input type="checkbox" value="None" id="squaredOne" name="check" />
<label for="squaredOne"><span>I Agree to the <strong>Terms & Conditions</strong></span></label>
</div>
</div>
<input type="submit" class="btn btn-submit"></input>
</form>
In the li tag add an attribute. Example:
<li class="animated lightSpeedIn" name_pressed="Doctor">Doctor</li>
and I assume you have an event for clicking the the li. If not, you can add a class. When you click that li with the respective class take the attribute. In this exemple you will take the "Doctor" from name_pressed attribute and with an if redirect on the page you want.
Like this:
<li class="animated lightSpeedIn clickable_li" name_pressed="Doctor">Doctor</li>
and the javascript:
$(".clickable_li").click(function (e) {
var name = $(this).attr('name_pressed');
if (name == 'Doctor') {
//make something
}
});
Or you can add onClick event. Check this
Related
I use bootstrap with angular, and I disabled bootstrap's validation, angular still doesn't work. It seems that I already set everything.
My code likes below, every input's validation didn't.
<form novalidate name="new_people" ng-if="is_editting_newpeople" class="form-horizontal" role="form" ng-submit="save_new_people()">
<div class="input-group">
<div class="input-group-addon">True Name</div>
<input class="form-control" name="realname" type="text" ng-model="editting_people.realname" autofocus required>
</div>
<div class="input-group">
<div class="input-group-addon">Nickname</div>
<input type="text" name="nickname" class="form-control" id="nickname" ng-model="editting_people.nickname" required>
</div>
<div class="input-group">
<div class="input-group-addon">Mobilenumber</div>
<input type="text" class="form-control" id="mobile" name="mobilenumber" ng-model="editting_people.mobilenumber" required ng-minlength=11>
</div>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">{{ editting_people.idclass.name }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="id_class in IDCLASSES">
<a ng-click="set_id_class(id_class)">{{ id_class.name }}</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" ng-model="editting_people.idnumber" required name="idnumber">
</div>
<!-- /input-group -->
<br>
<input class="btn btn-primary" type="submit" value="Submit" />
<input class="btn btn-default" value="取消" type="button" ng-click="cancel_new_people()" />
</form>
What do you mean by input doesn't work?
Post your code of related controller please, because it is not clear what validation are you doing. If you have novalidate you should organize validation in your angular controller or HTML, e.g.:
<div ng-show="editting_people.realname.length<4">
Any error message here.
</div>
I am having issues creating a tabbed dropdown menu in bootstrap that contains forms for "register" and "sign in" but every time I click the Tabs, they close. I don't understand why. I have tried the popular e.stoppropogate(), but it does not appear to work for me. Any help would be appreciated.
Here is my HTML:
<div class="container-fluid ">
<div class = "container">
<a class="navbar-brand" href="#"><img src="img/logo.svg" height = "75px" type="image/svg+xml"/></a>
<form>
<div id="myDropDown " class="dropdown pull-right">
<a id="dLabel" role="button" data-target="javascript:;" href="/page.html">Sign In/Register <span class="caret"></span></a>
<ul id="myTabs" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="nav nav-pills ">
<li class="active"><a href="#login" data-toggle="tab" >Sign In</a></li>
<li><a href="#register" data-toggle="tab" >Register</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane " id="register">
<!--register section-->
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<span>Name:</span>
<label class="sr-only" for="exampleInputEmail2">Name</label>
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="Name" required>
</div>
<span>Email:</span>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<span>Password:</span>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
</div>
<span>Confirm Password:</span>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Confirm Passowrd</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Confirm Password" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Register</button>
</div>
</form>
<!--end register form-->
</div>
</div>
<!--tab pane register-->
<!--begin login form-->
<div class="tab-pane active" id="login">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Sign in</button>
</div>
</form>
<!--end login form-->
</div>
</div>
<!--tab pane login-->
</div>
<!--tab content-->
</ul>
<!-- myTabs ul-->
<ul class = "pull-right"><span class=" glyphicon glyphicon-shopping-cart"></span></ul>
</div>
<!--myDropdown-->
</form>
</div><!--container-->
</div><!--container fluid-->
This is my javascript:
<script>
$('.dropdown-menu a[data-toggle="tab"]').click(function (e) {
e.stopPropagation()
$(this).tab('show')
})
</script>
Actually you are missing one attribute
Just add data-toggle="dropdown" attribute with id="dLabel" as shown in example below..
It will work..
enjoy :)
<a id="dLabel" role="button" data-toggle="dropdown" href="/page.html">Sign In/Register <span class="caret"></span></a>
The website that I'm making, using Laravel and Bootstrap, has a search bar along with a dropdown list, that will narrow the search down to a specific category. Here's the following code for the search bar:
<div class="container">
<form id="search_form" method="get" action="{{ route('search') }}">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span name="category" id="search_concept">Title</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Title</li>
<li>Author</li>
<li>School</li>
<li>Course Code</li>
</ul>
</div>
<!--<input type="hidden" name="_token" value="{{ Session::token() }}">-->
<input class="form-control" name="term" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text" id="filter">
<span id="search_submit" type="submit" class="btn input-group-addon glyphicon glyphicon-search" style="width:1%;"></span>
</div>
</div>
</div>
</form>
</div>
When I type "hello world" into the search bar and submit the form, I get redirected to this URL: http://localhost:8000/search?term=hello+world
I want to also pick up the selected value of the dropdown list, so when I select 'title' as my category in the dropdown list and submit the form, I would get redirected to:
http://localhost:8000/search?category=title&term=hello+world
How do I approach this?
You can modify it like this and use jQuery/js
<div class="container">
<form id="search_form" method="get" action="{{ route('search') }}">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span name="category" id="search_concept">Title</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-category="title" class="search_category" href="#title">Title</a></li>
<li><a data-category="author" class="search_category" href="#author">Author</a></li>
<li><a data-category="school" class="search_category" href="#school">School</a></li>
<li><a data-category="course_code" class="search_category" href="#course_code">Course Code</a></li>
</ul>
</div>
<!--<input type="hidden" name="_token" value="{{ Session::token() }}">-->
<input type="hidden" name="category" id="category"/>
<input class="form-control" name="term" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text" id="filter">
<span id="search_submit" type="submit" class="btn input-group-addon glyphicon glyphicon-search" style="width:1%;"></span>
</div>
</div>
</div>
</form>
</div>
jQuery:
$(".search_category").click(function(e){
$("#category").val($(this).attr("data-category"));
});
I'd like to intercept a choice made from a dropdown menu. This menu is made with https://github.com/CWSpear/bootstrap-hover-dropdown but that certainly doesn't change the basics.
My HTML code is:
<div class="row">
<div class="col-md-5">
<div class="form-group text">
<label class=" control-label" for="comment">Comment :</label>
<div class="input-group">
<input type="text" name="comment" class="form-control " placeholder="Free comment" id="" value="" />
<span class="input-group-btn">
<button class="btn btn-success add_language dropdown-toggle"
id="add_language-1"
title="Add a language"
data-toggle="dropdown"
data-hover="dropdown"> <i class="fa fa-plus"></i><span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dropdown-menu">
<li><a tabindex="1">English</a></li>
<li><a tabindex="2">Spanish</a></li>
<li><a tabindex="3">German</a></li>
</ul>
</span>
</div>
</div>
</div>
</div>
And here is what I figure out to intercept the selection, but that doesn't work and to be more precise, I'm in fact interested by the tabindex's value:
$( document ).ready(function($) {
$('.dropdown-toggle').dropdownHover();
$('.dropdown-menu').on('click', function(event){
event.preventDefault();
var value = $('#dropdown-menu').selected();
alert(value);
});
}
In fact the onclick is even not called.
What is my mistake here?
Here is the corresponding jsFiddle
If you're ok with a select element, you can mark up your menu like this:
<select class="dropdown-menu" multiple>
<option value="1">English</option>
<option value="2">Spanish</option>
<option value="3">German</option>
</select>
then pull out the value using jQuery's val() method.
$(document).ready(function() {
$('.dropdown-menu').on('click', function(event){
event.preventDefault();
console.log($('.dropdown-menu').val());
});
});
I have 2 divs, the first one has a form with input fields, the second is just a help section for password strength and such. Here are my forms:
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" class="form-signin" id="reg_form" role="form" name="registration_form">
Registration Key:<input class="form-control" type='text' name='reg_key' id='reg_key' required /><span id="loadergif"></span><br>
Username:<input class="form-control" type='text' name='username' id='username' /><br>
Email: <input class="form-control" type="email" name="email" id="email" /><br>
Password:<input data-toggle="tooltip" data-placement="right" data-trigger="click" class="form-control input-group" type="password" name="password" id="password"/><br>
Confirm password: <input class="form-control" type="password" name="confirmpwd" id="confirmpwd" /><br>
<input type="button" value="Register" class="btn btn-success" onclick="return regformhash(this.form,this.form.username,this.form.email,this.form.password,this.form.confirmpwd);" /> <br>
<p>Already registered? Sign In</p>
</form>
and the help section:
<ul class="list-group">
<li class="list-group-item" id="reg">Registration key can be found in the email that we sent you.</li>
<li class="list-group-item" id="user">Usernames may contain only digits, upper and lower case letters and underscores</li>
<li class="list-group-item" id="emailli">Emails must have a valid email format (e.g. test#test.com)</li>
<li class="list-group-item" id="passfield">Passwords must be at least 6 characters long</li>
<li class="list-group-item" id="passfield1">Passwords must contain:
<ul>
<li class="list-group-item" id="passfield2">At least one upper case letter (A..Z)</li>
<li class="list-group-item" id="passfield3">At least one lower case letter (a..z)</li>
<li class="list-group-item" id="passfield4">At least one number (0..9)</li>
</ul>
</li>
<li class="list-group-item" id="confirmpass">Your password and confirmation must match exactly</li>
</ul>
I have tried to use $('#reg_key').focus($('#reg').addClass('highlight'));, but all it does is just highlight each field no matter what. I would like for it to happen on focus then go to the next when a user focuses on the next field and remove the highlight from the previous one..
Update:
Here is what i applied:
$('#reg_key').focus(function(){
$('#reg').addClass('highlight');
});
$('#username').focus(function(){
$('#user').addClass('highlight');
$('#reg').removeClass('highlight');
});
$('#email').focus(function(){
$('#emailli').addClass('highlight');
$('#user').removeClass('highlight');
});
$('#password').focus(function(){
$('#passfield').addClass('highlight');
$('#passfield1').addClass('highlight');
$('#passfield2').addClass('highlight');
$('#passfield3').addClass('highlight');
$('#passfield4').addClass('highlight');
$('#emailli').removeClass('highlight');
});
$('#confirmpwd').focus(function(){
$('#confirmpass').addClass('highlight');
$('#passfield').removeClass('highlight');
$('#passfield1').removeClass('highlight');
$('#passfield2').removeClass('highlight');
$('#passfield3').removeClass('highlight');
$('#passfield4').removeClass('highlight');
});
but the #password and #confimpwd does not work...
Modified your HTML a bit. See if this works for you:
http://jsfiddle.net/lotusgodkk/GCu2D/91/
JS:
$(document).on('focus','form input',function(){
$('.highlight').removeClass('highlight');
var id = $(this).attr('id');
$('.list-group li.'+id).addClass('highlight');
});
HTML:
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" class="form-signin" id="reg_form" role="form" name="registration_form">Registration Key:
<input class="form-control" type='text' name='reg_key' id='reg_key' required="true" /><span id="loadergif"></span>
<br>Username:
<input class="form-control" type='text' name='username' id='username' />
<br>Email:
<input class="form-control" type="email" name="email" id="email" />
<br>Password:
<input data-toggle="tooltip" data-placement="right" data-trigger="click" class="form-control input-group" type="password" name="password" id="password" />
<br>Confirm password:
<input class="form-control" type="password" name="confirmpwd" id="confirmpwd" />
<br>
<input type="button" value="Register" class="btn btn-success" onclick="return regformhash(this.form,this.form.username,this.form.email,this.form.password,this.form.confirmpwd);" />
<br>
<p>Already registered? Sign In
</p>
</form>
<ul class="list-group">
<li class="list-group-item reg_key">Registration key can be found in the email that we sent you.</li>
<li class="list-group-item username">Usernames may contain only digits, upper and lower case letters and underscores</li>
<li class="list-group-item email">Emails must have a valid email format (e.g. test#test.com)</li>
<li class="list-group-item password">Passwords must be at least 6 characters long</li>
<li class="list-group-item confirmpwd">Passwords must contain:
<ul>
<li class="list-group-item passfield2">At least one upper case letter (A..Z)</li>
<li class="list-group-item passfield3">At least one lower case letter (a..z)</li>
<li class="list-group-item passfield4">At least one number (0..9)</li>
</ul>
</li>
<li class="list-group-item confirmpass">Your password and confirmation must match exactly</li>
</ul>
Instead of using Id, used classes to associate input and the message fields.
The way that you have coded this will cause your .addClass statement to execute immediately. You need to wrap that statement in an anonymous function to delay it until the element has been focused:
$('#reg_key').focus(function(){
$('#reg').addClass('highlight')
});
You can do this, to add the highlight class to current help field and remove it for the previous one:
$('#currentinputelementID').focus(function(){
$('#currenthelpfieldID').addClass('highlight');
$('#previoushelpfieldID').removeClass('highlight');
});
I've created an alternative solution using the :focus pseudo-selector, here's the demo: http://jsfiddle.net/sandro_paganotti/Qxxtb/
HTML
<form>
<input type="text" id="name" placeholder="name"/><br/>
<input type="password" id="password"/>
<div>
<p data-for="name">this is the help for name</p>
<p data-for="password">this is the help for password</p>
</div>
</form>
CSS
#name:focus ~ div > p[data-for="name"],
#password:focus ~ div > p[data-for="password"]{
background-color: yellow;
}