I have two html and two different controller files and my requirement is i should display one common submit button for both the forms and it should be disabled until the mandatory fields are entered in both the forms.Here is the attached plunker https://plnkr.co/edit/RAzfWZYuCi0kXPL6PDoT?p=preview
<body ng-controller="myCtrl" class="container">
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#menu2">Student Details</a></li>
<li><a data-toggle="tab" href="contactdetails.html">Contact Info</a>
</li>
</ul>
<div class="tab-content">
<div id="menu2" class="tab-pane active">
<div class="form-group">
<label for="name">Student Name:</label>
<input type="name" class="form-control" id="name" ng-
model="students.name" required>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="age" class="form-control" id="age" ng-
model="students.age">
</div>
</div>
</div>
Related
My fiddle is here: http://jsfiddle.net/L4hkrwa6/14/
The HTML code is here:
<ul class="nav nav-pills nav-justified">
<li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>
<div class="tab-content">
<form action="test">
<div id="Show1" class="tab-pane fade in active">
<input type="text" name="OnlyMe"/>
</div>
</form>
<form action="differentTest">
<div id="Show2" class="tab-pane fade">
<input type="text" name="MeAnd23Submit"/>
</div>
<div id="Show3" class="tab-pane fade">
<input type="text" name="MeAnd23Submit2"/>
</div>
<input type="text" name="23"/>
<input type="submit" value="submit"/>
</form>
</div>
When I click on Show1 (and when the page is loaded initially) I want to only see the Input 'OnlyMe'.
When I click on Show2 I want to only see the Inputs 'MeAnd23Submit', '23' and the submit button.
When I click on Show3 I want to only see the Inputs 'MeAnd23Submit2', '23' and the submit button.
I tried several combinations but nothing seems to work, I would appreciate any help...
Thanks in advance!
Update:
This is just a small example with the necessary items to understand the problem. In the "real case" I have many more input fields and I would like to not copy the fields in multiple tab-panes.
Have you tried this: forked fiddle
<ul class="nav nav-pills nav-justified">
<li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>
<div class="tab-content">
<div id="Show1" class="tab-pane fade in active">
<form action="test">
<input type="text" name="OnlyMe"/>
</form>
</div>
<div id="Show2" class="tab-pane fade">
<form action="differentTest">
<input type="text" name="MeAnd23Submit"/>
<input type="text" name="23"/>
<input type="submit" value="submit"/>
</form>
</div>
<div id="Show3" class="tab-pane fade">
<form action="differentTest">
<input type="text" name="MeAnd23Submit2"/>
<input type="text" name="23"/>
<input type="submit" value="submit"/>
</form>
</div>
</div>
I am trying to make a form with bootstrap 3 and all the labels are centered. It works fine if I just have
<body>
<div style="width:80%; padding:20%">
<form>
form stuff
</form>
</div>
</body>
but if it is inside a tab it aligns all the text in the center of the input/select bar like so
This is what I want it to look like
Sorry about the large amount of code. I can't recreate the issue without it for some reason. The select bar is like the rest with less code.
<!DOCTYPE html>
<html>
<head>
<title>TD Notes</title>
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel = "stylesheet">
<link rel="stylesheet" href="./styles.css">
<script src='./node_modules/jquery/dist/jquery.min.js'></script>
<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>
</head>
<body style="background-color: white; height: 100%; width: 100%; text-align: center">
<script src="jscolor.js"></script>
<div id="navBar" class="container" style="background-color: black; height: 30px; width: 100%" >
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a data-toggle="tab" href="#Body">Body</a></li>
<li><a data-toggle="tab" href="#AAC">AAC</a></li>
<li><a data-toggle="tab" href="#TPMS">TPMS</a></li>
<li><a data-toggle="tab" href="#BCM">BCM</a></li>
<li><a data-toggle="tab" href="#GBCM">GBCM</a></li>
<li><a data-toggle="tab" href="#MSM">MSM</a></li>
<li><a data-toggle="tab" href="#RX">RX</a></li>
<li><a data-toggle="tab" href="#THC">THC</a></li>
<li><a data-toggle="tab" href="#TX">TX</a></li>
<li><a data-toggle="tab" href="#UID">UID</a></li>
<li><a data-toggle="tab" href="#UPE">UPE</a></li>
<li><a data-toggle="tab" href="#NewProb">New Problem</a></li>
</ul>
</div>
<div id="content" style="width: 80%; padding-left: 20%">
<div class="tab-content" style="width: 100%; height: 100%">
<div class="tab-pane fade in active" id="Body" style="width=100%"></div>
<div class="tab-pane fade" id="AAC"></div>
<div class="tab-pane fade" id="TPMS"></div>
<div class="tab-pane fade" id="BCM"></div>
<div class="tab-pane fade" id="GBCM"></div>
<div class="tab-pane fade" id="MSM"></div>
<div class="tab-pane fade" id="RX"></div>
<div class="tab-pane fade" id="TX"></div>
<div class="tab-pane fade" id="THC"></div>
<div class="tab-pane fade" id="UID"></div>
<div class="tab-pane fade" id="UPE"></div>
<div class="tab-pane fade" id="NewProb">
<form>
<fieldset class="form-group">
<label for="lineType" class="control-label">Line Type</label>
<select class="form-control" id="lineType">
<option>Body</option>
<option>AAC</option>
<option>TPMS</option>
<option>BCM</option>
<option>GBCM</option>
<option>MSM</option>
<option>RX</option>
<option>TX</option>
<option>THC</option>
<option>UID</option>
<option>UPE</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="testerType" class="control-label">Tester Type</label>
<input class="form-control" id="testerType">
</fieldset>
<fieldset class="form-group">
<label for="productType" class="control-label">Product Type</label>
<input class="form-control" id="productType">
</fieldset>
<fieldset class="form-group">
<label for="partNumber" class="control-label">Part Number</label>
<input class="form-control" id="partNumber">
</fieldset>
<fieldset class="form-group">
<label for="stepNumber" class="control-label">Step Number</label>
<input class="form-control" id="stepNumber">
</fieldset>
<fieldset class="form-group">
<label for="stepName" class="control-label">Step Name</label>
<input class="form-control" id="stepName">
</fieldset>
<fieldset class="form-group">
<label for="Other" class="control-label">Other (Automation, OPUI, Scanners, etc.)</label>
<textarea class="form-control" id="other"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="problem" class="control-label">Problem</label>
<textarea class="form-control" id="problem"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="counterMeasure" class="control-label">Countermeasure</label>
<textarea class="form-control" id="countermeasure"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="engineer" class="control-label">Engineer</label>
<input class="form-control" id="engineer">
</fieldset>
<fieldset class="form-group">
<label for="date" class="control-label">Date</label>
<input class="form-control" id="date">
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
</body>
</html>
I am using Bootstrap to create a website and I added functionality for a drop-down to sign up for a newsletter.
How can I make that drop-down into a standalone drop-down separate from the navbar?
I added <button> tags around the entire html code but the sign-up button then separates from the drop-down. Ideally, it would be at the bottom of the drop-drown.
<button class="dropdown btn">
Newsletter Sign Up <b class="caret"></b>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<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="newsletter-signup-name">Name</label>
<input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="sr-only" for="newsletter-signup-email">Email</label>
<input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" 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 Up</button>
</div>
</form>
</div>
</div>
</li>
<li class="divider"></li>
</ul>
</button>
Not sure why you want to encapsulate the entire form into the button. Use a button instead of an anchor if you need the button.
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown">Newsletter Sign Up <b class="caret"></b>
</button>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<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="newsletter-signup-name">Name</label>
<input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="sr-only" for="newsletter-signup-email">Email</label>
<input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" 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 Up</button>
</div>
</form>
</div>
</div>
</li>
<li class="divider"></li>
</ul>
</div>
http://jsfiddle.net/moogs/sktewe4s/
Just use a div instead of a button. I think that buttons are not allowed to contain other form elements.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="dropdown">
Newsletter Sign Up <b class="caret"></b>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<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="newsletter-signup-name">Name</label>
<input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="sr-only" for="newsletter-signup-email">Email</label>
<input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" 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 Up</button>
</div>
</form>
</div>
</div>
</li>
<li class="divider"></li>
</ul>
</div>
<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post">
<div class="form-group">
<label class="control-label col-sm-2 lb" for="email">Email : </label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Subject : </label>
<div class="col-sm-6">
<select class="form-control col-sm-6 lb" id="subj" name="subject" required>
<option>General queries</option>
<option>Group and corporate bookings</option>
<option>Suggestion and complaints</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 lb" for="pwd">Message : </label>
<div class="col-sm-6">
<div class="checkbox">
<textarea class="form-control" id="message" name="message" required></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
This is my form. It works fine. the thing is i am using bootstrap and i want everything in the perfect center responsive to the screen size. Please help me with this. Thanks!
I don't know, whether i m saying correct or not.
If we use css like,
text-align:center;
It will be affected align center both vertically and horizontally.
So there is no css for particular vertical align center.
you need to change dropdown text and other
<div class="panel panel-warning mypanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Subject</label>
<div class="col-sm-10">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
Topics
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Data Communication/Networking
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</div>
I made a tab view using bootstrap for a angular template. but when i click on the tab it goes to the angular link router instead of going to the tab content.it may be because i have them as links but at the moment i really don't have any idea of how im going to solve this
<ul class="nav nav-tabs">
<li class="active">Where you heading <i class="fa"></i></li>
<li>Description<i class="fa"></i></li>
</ul>
<form id="rideForm" method="post" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane active" id="info-tab">
<div class="form-group">
<label class="col-sm-2 control-label">From:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="fullName" />
</div>
<label class="col-sm-2 control-label">To:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Time:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="jobTitle" />
</div>
</div>
<div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
<a href="#address-tab" data-toggle="tab"><button type="next" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-right"></span> Next </button></a>
</div>
</div>
<div class="tab-pane" id="address-tab">
<div class="form-group">
<label class="col-sm-3 control-label">Description</label>
<div class="col-sm-5">
<textarea rows="4" cols="50"></textarea>
</div>
</div>
<div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-plane"></span> Ride</button>
<a href="#info-tab" data-toggle="tab"><button type="next" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Previous </button></a>
</div>
</div>
</div>
<div style="margin: 15px">
</div>
</form>
please help!
Stop banging your head against the wall and just use http://angular-ui.github.io/bootstrap/
A quick work around to this issue is to add:
target="_blank"
to your links. Angular, behind the scenes, does stuff to your links which is why you're having that problem.
This is a temp. solution to the issue.