I have a weight data form and i want to make a validation on it where net weight = loaded weight - empty weight, if not the form not submit
<fieldset class="form-group">
<legend class="h5 text-center text-danger">empty weight</legend>
<div class="form-group">
<label for="text">empty weight</label>
<input type="number" class="form-control form-control-lg" id="empty_weight"
name="empty_weight" min="15000" max="35000" step="20" oncopy="return false"
onpaste="return false">
</div>
</fieldset>
<fieldset>
<legend class="h5 text-center text-danger">loaded weight</legend>
<div class="form-group">
<label for="text">loaded weight</label>
<input type="number" class="form-control form-control-lg" id="loaded_weight"
name="loaded_weight" min="35000" max="120000" maxlength="6" step="20"
oncopy="return false" onpaste="return false">
</div>
</fieldset>
<fieldset>
<legend class="h5 text-center text-danger">net weight</legend>
<div class="form-group">
<label for="text">net weight</label>
<input type="number" class="form-control form-control-lg font-weight-bolder" id="net_weight"
name="net_weight" maxlength="5" step="20" oncopy="return false"
onpaste="return false">
</div>
</fieldset>
<div class="modal-footer">
<button type="submit" class="btn btn-success ui-button">تاكيد</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">اغلاق</button>
</div>
</form>
Related
I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?
My angular form refuses to validate on submit. I have multiple other forms set up similarly that work completely fine. It prevents submission if invalid, however, it does not show any error messages at all.
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" ng-submit="signupForm.$valid && uploadPic(picFile)" novalidate>
<div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div>
<div class="form-group">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" required="">
</div>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required="">
<span ng-show="signupForm.firstname.$error.required"></span>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<span ng-show="signupForm.lastname.$error.required"></span>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<span ng-show="signupForm.username.$error.required"></span>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" integer id="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<span ng-show="signupForm.user.gradClass.$error.integer">Not a valid graduation year!</span>
<span ng-show="signupForm.user.gradClass.$error.min || signupForm.size.$error.max"></span>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<span ng-show="signupForm.school.$error.required">Please select a school</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<span ng-show="signupForm.password.$error.required"></span>
</div>
<div class="form-group">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6"placeholder="Password Again" name="password2" required>
<span ng-show="signupForm.password2.$error.required"></span>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-click="submitted = true">
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
Any help is greatly appreciated.
Edit
This is code that is working:
<link href="css/profile.css" rel="stylesheet">
<div class="row" style="padding-top: 1em;padding-bottom: 1em;">
<div class="col-md-8 col col-xs-12">
<div class="buffer">
<div class="profile-picture" style="background-image:url({{ addRoute(currentUser.profile_picture) }}); background-size:cover;">
</div>
<div class="profile-container">
<h2 class="name-highlight">Hi, {{currentUser.firstName}} {{currentUser.lastname}}</h3>
<h4 class="name-highlight">{{ currentUser.school }} class of {{currentUser.grad_class}}</h4>
</div>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your profile</h2>
<form role="form" name="profileForm" ng-submit="profileForm.$valid && updateUser()" novalidate>
<label for="username">Username</label>
<input type="text" value="{{currentUser.username}}" name = "username" ng-model="currentUser.username" placeholder="Username" id="username" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.username.$touched">
<span ng-show="profileForm.username.$error.required" style="color: red;">Please put a username!</span>
</div>
<label for="email">Email</label>
<input type="email" value="{{ currentUser.email }}" name="email" ng-model="currentUser.email" placeholder="Email" id="email" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.email.$touched">
<span ng-show="profileForm.email.$error.required" style="color: red;">Please put an email!</span>
</div>
<label for="bio">Bio</label>
<textarea type="textarea" role="textarea" name="bio" ng-model="currentUser.bio" id="bio" class="item-input-profile form-control" placeholder="Bio"></textarea>
<input type="submit" class="btn btn-green btn-lg" value="Update Profile">
</form>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your password</h2>
<form role="form" name="passwordForm" ng-submit="passwordForm.$valid && updatePasswords()" novalidate>
<label for="oldpassword">Your old password</label>
<input type="password" placeholder="Old Password" ng-model="updatePassword.oldpassword" id="oldpassword" name="oldpassword" ng-minlength= "6" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.oldpassword.$touched">
<span ng-show="passwordForm.oldpassword.$error.required" style="color: red;">Please put in your old password</span>
</div>
<label for="newpassword">Your new password</label>
<input type="password" placeholder="New Password" ng-model="updatePassword.newpassword" id="newpassword" ng-minlength= "6" name="newpassword" equals="{{ currentUser.passwordagain }}"class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.newpassword.$touched">
<span ng-show="passwordForm.newpassword.$error.required" style="color: red;">Please put in your new password</span>
</div>
<label for="passwordagain">Your new password again</label>
<input type="password" placeholder="New Password Again" ng-model="updatePassword.passwordagain" id="passwordagain" ng-minlength= "6" name="passwordagain" equals="{{ currentUser.newpassword }}" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.passwordagain.$touched">
<span ng-show="passwordForm.passwordagain.$error.required" style="color: red;">Please put in your new password again</span>
</div>
<input type="submit" class="btn btn-green btn-lg" value="Change Password">
</form>
</div>
</div>
<div class="col-md-4 col-xs-12">
<h2 class="gray-header text-center" ng-if="!hasPosts">No posts to show</h2>
<div class="post-card profile-post" ng-repeat="post in currentUser.posts.posts">
<div class="item-slider">
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="image in post.images" active="slide.active" index="slide.id">
<img ng-src="{{addRoute(image.path)}}" style="margin:auto;">
</uib-slide>
</uib-carousel>
</div>
<div class="profile-image" style="background-image:url( {{ addRoute(post.profile_picture) }} ); background-size: cover;"></div>
<div class="post-content">
<div class="top-info">
<span><div class="glyphicon glyphicon-user"> </div></span><span class="post-username">{{ post.firstname}} {{ post.lastname }}</span>
<br>
<span><div class="glyphicon glyphicon-tag"> </div></span><span class="post-username">{{ post.category}}</span>
</div>
<div class="wrap">
<h1 class="post-title">{{post.title}} - <span class="price">{{post.price}}</span></h1>
<p class="description">
{{post.content}}
</p>
</div>
<button type="button" class="btn btn-danger btn-lg btn-block" ng-click="deletePost(post.id)">Delete Post</button>
</div>
</div>
</div>
</div>
Updated answer
NOTE: Angular validation works on name attribute
<!DOCTYPE html>
<html lang="en-US" ng-app="">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" novalidate>
<!-- <div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div> -->
<div class="form-group" ng-class="{ 'has-error' : signupForm.email.$invalid && !signupForm.email.$pristine }">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" name="email" required>
<div ng-show="signupForm.email.$touched">
<span ng-show="signupForm.email.$error.required" style="color: red;">email id not proper</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.firstname.$invalid && !signupForm.firstname.$pristine }">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required>
<div ng-show="signupForm.firstname.$touched">
<span ng-show="signupForm.firstname.$error.required" style="color: red;" ng-cloak>Please enter first name</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.lastname.$invalid && !signupForm.lastname.$pristine }">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<div ng-show="signupForm.lastname.$touched">
<span ng-show="signupForm.lastname.$error.required" style="color: red;">last name required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.username.$invalid && !signupForm.username.$pristine }">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<div ng-show="signupForm.username.$touched">
<span ng-show="signupForm.username.$error.required" style="color: red;">username required</span>
</div>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" id="gradclass" name="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.gradclass.$error.required" style="color: red;">Graduaton date required</span>
<span ng-show="signupForm.gradclass.$error.number" style="color: red;">Not valid number!</span>
<span ng-show="!signupForm.gradclass.$valid" style="color: red;">Graduation year between 2016 to 2024</span>
</div>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.school.$error.required" style="color: red;">please select a school</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password.$invalid && !signupForm.password.$pristine }">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<div ng-show="signupForm.password.$touched">
<span ng-show="signupForm.password.$error.required" style="color: red;">password required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password2.$invalid && !signupForm.password2.$pristine }">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6" placeholder="Password Again" name="password2" required>
<div ng-show="signupForm.password2.$touched">
<span ng-show="signupForm.password2.$error.required" style="color: red;">confirmation required</span>
</div>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-disabled="signupForm.$invalid" ng-click="submitted = true">
<!-- <button class="btn btn-green btn-lg" ng-disabled="signupForm.$invalid" ng-click="Sign up()">Sign up</button>-->
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
</body>
</html>
Angular validations work on the name attribute so try adding name instead of id to the input elements inside your form
I am trying to remove the ajax requested model when I user either hits close or cancel. I have tried the following.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
full code
<div id="registerModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Sign Up</h1>
</div>
<div class="modal-body">
<form name="register" id="register" action="login" method="post" class="col-md-12 center-block">
<div class="row">
<div class="col-md-6">
<h4 class="text-center">Business Info</h4>
<div class="form-group">
<input type="text" name="businessname" class="form-control input-lg login" placeholder="Business Name">
</div>
<div class="form-group">
<input type="text" name="abnacn" class="form-control input-lg login" placeholder="ABN or ACN" >
</div>
<div class="form-group">
<input type="phone" name="phonenumber" class="form-control input-lg login" placeholder="Main Phone Number" >
</div>
<div class="form-group">
<input type="email" name="busiussemail" class="form-control input-lg login" placeholder="Main Email Address" >
</div>
<div class="form-group">
<input type="checkbox" name="TOS" >
<br>By registering and ticking this box for My Staff, you are agreeing to our TOS and Privacy Policy.
</div>
<!--<div class="form-group">
<select name="buildingtype" class="form-control select-lg">
<option value="0">--- none ---</option>
<option value="1">Unit</option>
<option value="2">Floor</option>
</select>
</div>
<div class="form-group">
<input type="unitnumber" name="number" class="form-control input-lg login" placeholder="Unit / Floow Number">
<input type="streetno" name="number" class="form-control input-lg login" placeholder="street number">
</div>
<div class="form-group">
<input type="text" name="streetname" class="form-control input-lg login" placeholder="Street Name">
</div>
<div class="form-group">
<input type="number" name="postcode" class="form-control input-lg login" onkeyup="getLocation()" placeholder="postcode">
</div>
<div class="form-group">
<input type="text" name="postcode" class="form-control input-lg login" placeholder="state" readonly>
</div>
<div class="form-group">
<input type="text" name="postcode" class="form-control input-lg login" placeholder="Country" readonly>
</div>-->
</div>
<div class="col-md-6">
<h4 class="text-center">User login set up</h4>
<div class="form-group">
<input type="text" name="emailadress" class="form-control input-lg login" placeholder="Admin staff Email Address">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control input-lg login" placeholder="Password">
</div>
<div class="form-group">
<input type="text" name="passwordtwo" class="form-control input-lg login" placeholder="Password Repeat">
</div>
<div class="form-group">
<input type="text" name="firstname" class="form-control input-lg login" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" name="sirname" class="form-control input-lg login" placeholder="Last Name">
</div>
<div class="form-group">
</div>
</div>
<button typpe="submit" onclick="signupmore();" class="btn btn-success col-md-12 btn-lg btn-block">Register</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You're manually adding the class 'show' to the modal.
If you remove that, then open the modal in JS you can close it.
http://www.bootply.com/EMWW2UWBtr
$('#registerModal').modal('show');
<div id="registerModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
I'm using angular UI buttons to make users select search criteria when user select buttons Patient or id it will show searchByText div if select date it will hide searchByText and show SearchBydateRange. my problem my is the angular show and hide is not working. and I use this codepen as example
http://codepen.io/SusanneLundblad/pen/iBhoJ
<div class="panel-body">
<form role="form">
<div class="col-md-7">
<div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
<label class="sr-only" for="search">Enter Search</label>
<input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." data-ng-model="searchText">
</div>
<div id="SearchBydateRange" class="form-group form-group-search col-md-4" data-ng-show=" searchOption == 'date' ">
<label class=" sr-only" for="search">
Enter Search
</label>
<input type="text" class="form-control col-md-2" id="search" placeholder="From Date" data-ng-model="fromDate">
<input type="text" class="form-control col-md-2" id="search" placeholder="To Date" data-ng-model="toDate">
</div>
</div>
<div class="col-md-4 text-center">
<div class="btn-group btn-group-sm" data-ng-hide="userIsManager">
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'patient'">Patient</label>
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'id'">ID</label>
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'Date'" va>Date</label>
</div>
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-sm btn-info btn-search full-width" data-ng-click="doSearch()">Search</button>
</div>
</form>
</div>
Change the button part to this: (label or radio does not matter, but the important part is ng-click)
<div class="col-md-4 text-center">
<div class="btn-group btn-group-sm" data-ng-hide="userIsManager">
<input type="radio" ng-model="searchOption" value="patient" ng-click="searchOption = 'patient'">Patient</label>
<input type="radio" ng-model="searchOption" value="id" ng-click="searchOption = 'id'">ID</label>
<input type="radio" ng-model="searchOption" value="Date" ng-click="searchOption = 'date'">Date</label>
</div>
</div>
Then for your search div's:
<div class="col-md-7">
<div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
<label class="sr-only" for="search">Enter Search</label>
<input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." ng-model="searchText">
</div>
<div id="SearchBydateRange" class="form-group form-group-search col-md-4" ng-show=" searchOption == 'date' ">
<label class=" sr-only" for="search">
Enter Search
</label>
<input type="date" class="form-control col-md-2" id="search" placeholder="From Date" ng-model="fromDate">
<input type="date" class="form-control col-md-2" id="search" placeholder="To Date" ng-model="toDate">
</div>
</div>
I have a form which has three input fields.Its working fine in jsfiddle but if I run in any browser then part of the input text field is coming out.However if i decrease the browser size then works fine.As i am using bootstrap so all the field must work same in all screen size whether its mobile or tab or computer.Please tell me how to make it function properly in all screen sizes.
This is the screen shot showing mobile text field coming out of the div
This is screenshot showing proper function of text fields in small size
this is code for the input fields
<div class="tab-pane" id="tab2">
<form class="well span9" action="insertNew" method="post">
<table border="1" id="mytable"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>
<div class="row">
<div class="span3">
<label>Name</label>
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required>
</div>
<div class="span3">
<label>Email Address</label>
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required>
</div>
<div class="span3">
<label>Mobile</label>
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required >
</div>
</div>
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form>
<div class="well span9"> <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
</div>
</div>
try something like this,FIDDLE
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" >Name</label>
<div class="controls">
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required />
</div>
</div>
<div class="control-group">
<label class="control-label" >Email Address</label>
<div class="controls">
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required />
</div>
</div>
<div class="control-group">
<label class="control-label" >Mobile</label>
<div class="controls">
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required />
</div>
</div>
<div class="control-group">
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
<input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
</div>
</form>