Jquery not firing onchange with bootstrap 4

Jquery not firing onchange with bootstrap 4 - javascript

I have code which works:
<div id="type" class="btn-group" data-toggle="buttons">
<label class="btn btn-outline-primary" id="type0">
<input id="type0" name="op" type="radio" value="0" />Wholesale</label>
<label class="btn btn-outline-primary" id="type1">
<input id="type1" name="op" type="radio" value="1" />Retail</label>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script>
jQuery(function ($) {
$(document).on('change', 'input:radio[id^="type"]', function (event) {
alert("click fired");
});
});
</script>
This can be seen at http://118.127.41.41/~emmarkho1/calculator/test.html
I have integrated this code into my calculator I'm building but it refuses to fire on change.
Full source can be seen # http://118.127.41.41/~emmarkho1/calculator/
Any assistance would be greatly appreciated.

check the below one hope it helps.
$(document).ready(function() {
$('input[type=radio][name=op]').change(function() {
<!-- event.preventDefault(); -->
alert("click fired");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-xl-8">
<form name="corflute" id="corflute" action="" method="post">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Customer Type</label>
<div class="col-sm-9">
<div id="type" class="btn-group" data-toggle="buttons">
<label class="btn btn-outline-primary" id="type0">
<input id="type0" name="op" type="radio" value="0" />Wholesale</label>
<label class="btn btn-outline-primary" id="type1">
<input id="type1" name="op" type="radio" value="1" />Retail</label>
</div>
<!-- <div class="btn-group" data-toggle="buttons">
<label class="btn btn-outline-primary id="type1" ">
<input type="radio" value="0" name="type" id="type1" autocomplete="off" >Wholesale
</label>
<label class="btn btn-outline-primary id="type2" active">
<input type="radio" value="1" name="type" id="type2" autocomplete="off" checked >Retail
</label>
</div> -->
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label label-top">Size<br><span class="label-info">metres</span></label>
<div class="col-sm-3">
<label class="center">Width</label>
<input class="form-control" type="text" onChange='this.form.submit();' name="width" id="width" value="">
</div>
<div class="col-sm-3">
<label class="center">Height</label>
<input class="form-control" type="text" onchange='myfuction();' name="height" id="height" value="">
</div>
<div class="col-sm-3">
<label class="center">Quantity</label>
<input class="form-control" type="text" name="quantity" id="quantity" value="1">
</div>
</div>
<div class="form-group row">
<label class="col-sm-6 col-form-label top">Signs per sheet<br><span class="label-info">sheet size 2440mm x 1220mm</span></label>
<div class="col-sm-3">
<input class="form-control" type="text" name="sps" id="sps" value="1">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Artwork</label>
<div class="col-sm-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" value="0" name="artwork" id="art1" autocomplete="off">Basic
</label>
<label class="btn btn-outline-primary ">
<input type="radio" value="1" name="artwork" id="art2" autocomplete="off">Standard
</label>
<label class="btn btn-outline-primary ">
<input type="radio" value="2" name="artwork" id="art3" autocomplete="off">Complex
</label>
</div>
</div>
</div>
<div class="form-group row">
<button type="submit" name="corflute" class="right btn btn-warning">Calculate</button>
</div>
</form>
<div class="divider"></div>
</div>
<div class="col-xl-4">
<div class="col-md-12 right-sidebar">
<div class="side-blocks">
<form name="CorfluteSettings" id="CorfluteSettings" action="" method="post">
<input type="submit" name="Settings" style="visibility: hidden;" />
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Substrate Cost<br><span class="label-info">Per Square Metre</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="subcost" id="subcost" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="5.5">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Mark-up<br><span class="label-info">Default 250%</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="submu" id="submu" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="250">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Substrate rate<br><span class="label-info">Per Square Metre</spane></label>
<div class="col-xs-4">
<input disabled class="form-control" type="text" name="subrate" id="subrate" value="19.25">
</div>
</div>
</div>
<div class="side-blocks">
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Print Media Cost<br><span class="label-info">Per Square Metre</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="pmc" id="pmc" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="4.5">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Solvent Ink Cost<br><span class="label-info">Per Square Metre</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="sic" id="sic" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="5">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Mark up<br><span class="label-info">default 250%</spane></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="printmu" id="subrate" value="250">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Print Rate<br><span class="label-info">Per Square Metre</spane></label>
<div class="col-xs-4">
<input disabled class="form-control" type="text" name="printrate" id="printrate" value="33.25">
</div>
</div>
</div>
<div class="side-blocks last">
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Mount Time<br><span class="label-info">Per Panel(mins)</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="mt" id="bt" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="15">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Track Time<br><span class="label-info">Per Cut(mins)</span></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="tt" id="tt" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="2">
</div>
</div>
<div class="form-group row">
<label class="col-xs-8 col-form-label top">Hourly Rate<br><span class="label-info">Dollars Per hour</spane></label>
<div class="col-xs-4">
<input class="form-control" type="text" name="hr" id="hr" onchange="javascript:document.forms['CorfluteSettings'].submit()" value="110">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

On your page you are using inputs with different ids - art1, art2 etc.
So you should update the code to:
jQuery(function ($) {
$(document).on('change', 'input:radio[id^="art"]', function (event) {
alert("click fired");
});
});
or in your particular case shorter:
$('input:radio[id^="art"]').change(function(){
alert("click fired");
});

Related

Unable to get Javascript myFunction() to run var requiredFields = document.getElementById before going to next command

function myFunction() {
var requiredFields = document.getElementById('specialTxtarea');
window.alert('Thank for your Reservation');
window.location = 'index.html';
}
<form>
<div class="form-group row">
<label for="checkin" class="col-2 col-form-label">Check-In</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
<input id="checkin" name="checkin" type="text" class="form-control" required="required" wfd-id="13">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="checkout" class="col-2 col-form-label">Check-Out</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
<input id="checkout" name="checkout" type="text" class="form-control" required="required" wfd-id="12">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="text" class="col-2 col-form-label">Name</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-user"></i>
</div>
</div>
<input id="text" name="text" type="text" required="required" class="form-control" wfd-id="11">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="email_id" class="col-2 col-form-label">Email</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-envelope-o"></i>
</div>
</div>
<input id="email" name="email" type="email" required="required" class="form-control" wfd-id="10">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-2 col-form-label">Phone #</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
<input id="phone" name="phone" placeholder="11 numeric" type="tel" required pattern="\d{11}" label="11 digits" class="form-control" wfd-id="9">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-2">Room Type</label>
<div class="col-10">
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_0" type="checkbox" class="custom-control-input" value="" checked wfd-id="8">
<label for="roomtype_0" class="custom-control-label">Deluxe Room</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_1" type="checkbox" class="custom-control-input" value="" wfd-id="7">
<label for="roomtype_1" class="custom-control-label">Junior Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_2" type="checkbox" class="custom-control-input" value="" wfd-id="6">
<label for="roomtype_2" class="custom-control-label">Family Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_3" type="checkbox" class="custom-control-input" value="" wfd-id="5">
<label for="roomtype_3" class="custom-control-label">Cameron Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_4" type="checkbox" class="custom-control-input" value="" wfd-id="4">
<label for="roomtype_4" class="custom-control-label">Foster Suite</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-2">Room Preference</label>
<div class="col-10">
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_0" type="radio" class="custom-control-input" value="No Preference" required="required" wfd-id="3">
<label for="preference_0" class="custom-control-label">No Preference</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_1" type="radio" class="custom-control-input" value="Non Smoking" required="required" wfd-id="2">
<label for="preference_1" class="custom-control-label">Non Smoking</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_2" type="radio" class="custom-control-input" value="Smoking" required="required" wfd-id="1">
<label for="preference_2" class="custom-control-label">Smoking</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="adults" class="col-2 col-form-label">Adults</label>
<div class="col-10">
<select id="adults" name="adults" class="custom-select" required="required" wfd-id="16">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="children" class="col-2 col-form-label">Children</label>
<div class="col-10">
<select id="children" name="children" class="custom-select" wfd-id="15">
<option value="None">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="textarea" class="col-2 col-form-label">Special Requirement</label>
<div class="col-10">
<textarea id="specialTxtarea" name="specialTxtarea" cols="40" rows="5" class="form-control" wfd-id="17"></textarea>
</div>
</div>
<div class="form-group row">
<div class="offset-2 col-10">
<button name="alpsubmit" type="submit" class="btn btn-primary btn-block" wfd-id="18" onclick="myFunction()">Submit</button>
</div>
</div>
</form>
This is for my assignment. For this reservation form, I am not required to use PHP to validate. What I am required is to have the form validate the field and upon submit, a response using window alert to pop out.
My lecturer has actually worked through with me and managed to get my codes to work. But somehow.. after I got home. I am unable to get the form to validate prior to submit and go back to home page
I was expecting that the form created will check through all field and be prompt prior to submit button pressed and go through window.alert with a Thank you response and bring back to index.html

I removed the on click on submit and added action="javascript:myFunction();" for the form and it will work here's the code for it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="myForm" action="javascript:myFunction();">
<div class="form-group row">
<label for="checkin" class="col-2 col-form-label">Check-In</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
<input id="checkin" name="checkin" type="text" class="form-control" required="required" wfd-id="13">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="checkout" class="col-2 col-form-label">Check-Out</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
<input id="checkout" name="checkout" type="text" class="form-control" required="required" wfd-id="12">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="text" class="col-2 col-form-label">Name</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-user"></i>
</div>
</div>
<input id="text" name="text" type="text" required="required" class="form-control" wfd-id="11">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="email_id" class="col-2 col-form-label">Email</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-envelope-o"></i>
</div>
</div>
<input id="email" name="email" type="email" required="required" class="form-control" wfd-id="10">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-2 col-form-label">Phone #</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
<input id="phone" name="phone" placeholder="11 numeric" type="tel" required pattern="\d{11}" label="11 digits" class="form-control" wfd-id="9">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-2">Room Type</label>
<div class="col-10">
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_0" type="checkbox" class="custom-control-input" value="" checked wfd-id="8">
<label for="roomtype_0" class="custom-control-label">Deluxe Room</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_1" type="checkbox" class="custom-control-input" value="" wfd-id="7">
<label for="roomtype_1" class="custom-control-label">Junior Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_2" type="checkbox" class="custom-control-input" value="" wfd-id="6">
<label for="roomtype_2" class="custom-control-label">Family Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_3" type="checkbox" class="custom-control-input" value="" wfd-id="5">
<label for="roomtype_3" class="custom-control-label">Cameron Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_4" type="checkbox" class="custom-control-input" value="" wfd-id="4">
<label for="roomtype_4" class="custom-control-label">Foster Suite</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-2">Room Preference</label>
<div class="col-10">
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_0" type="radio" class="custom-control-input" value="No Preference" required="required" wfd-id="3">
<label for="preference_0" class="custom-control-label">No Preference</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_1" type="radio" class="custom-control-input" value="Non Smoking" required="required" wfd-id="2">
<label for="preference_1" class="custom-control-label">Non Smoking</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_2" type="radio" class="custom-control-input" value="Smoking" required="required" wfd-id="1">
<label for="preference_2" class="custom-control-label">Smoking</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="adults" class="col-2 col-form-label">Adults</label>
<div class="col-10">
<select id="adults" name="adults" class="custom-select" required="required" wfd-id="16">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="children" class="col-2 col-form-label">Children</label>
<div class="col-10">
<select id="children" name="children" class="custom-select" wfd-id="15">
<option value="None">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="textarea" class="col-2 col-form-label">Special Requirement</label>
<div class="col-10">
<textarea id="specialTxtarea" name="specialTxtarea" cols="40" rows="5" class="form-control" wfd-id="17"></textarea>
</div>
</div>
<div class="form-group row">
<div class="offset-2 col-10">
<button name="alpsubmit" type="submit" class="btn btn-primary btn-block" wfd-id="18">Submit</button>
</div>
</div>
</form>
</div>
<script>
function myFunction() {
var requiredFields = document.getElementById('specialTxtarea');
window.alert('Thank for your Reservation');
//window.location = 'index.html';
}
</script>
</body>
</html>

Print html form input value or specific div content in JS with CSS

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 ?

Change the Bootstrap Form with Bootstrap Dropdown and Jquery

I want to change which form to show using dropdown and jquery but doesn't seem to work. I did try a simple code using just a couple of divs and a paragraph and it worked or so I thought, because it's no longer work when I put my forms into it.
By the way, here's my code:
//this is the form
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
Here is the jquery:
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'{
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
I also tried any different ways but I can't yet find out what I'm missing.
Would you be so kind to help me?

Your else if condition is not close with ) and add jquery, check it
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'){
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<h2>qnap</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<h2>asustor</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>

On click anchor tag scroll to div is not working?

On click of "a" tag page should scroll to div that has class called "cmntBox" I have done through jquery but it returning nothing actually when I click Write a review button it should scroll down to div.
HTML code
<i class="fa fa-pencil"></i> Write a review
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 nopad cmntBox">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<div class="tab-pane active" id="tab-review">
<form class="form-horizontal">
<div id="review"></div>
<h3>Write a review</h3>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">Your Name</label>
<input type="text" name="name" value="" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">Your Review</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block"><span class="text-danger">Note:</span> HTML is not translated!</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">Rating</label>
Bad
<input type="radio" name="rating" value="1" />
<input type="radio" name="rating" value="2" />
<input type="radio" name="rating" value="3" />
<input type="radio" name="rating" value="4" />
<input type="radio" name="rating" value="5" />
Good</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-captcha">Enter the code in the box below</label>
<input type="text" name="captcha" value="" id="input-captcha" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12"> <img src="index.php?route=tool/captcha" alt="" id="captcha" /> </div>
</div>
<div class="buttons">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="Loading..." class="btn btn-primary">Continue</button>
</div>
</div>
</form>
</div>
</div>
Jquery code,
$(".cmntBox").click(function() {
$('html, body').animate({
scrollBottom: $(".cmntBox").offset().bottom
}, 2000);
});

Replace with this code
scrollTop:$(".cmntBox").offset().top}, 2000);

How to set width to Input text field in bootstrap under class

In the below layout, the last text field(UserName) alone not in correct size. I tried many ways, but nothing works. pls share any idea. my code is
<div id="wrapper">
<div class="row">
<div class="col-lg-6 vcenter ">
<div class="panel panel-success">
<div class="panel-heading text-center">
<h4>Login Help</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="row col-lg-12 radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username
</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email
</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile
</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="radio row col-lg-12" style="margin-top:5%;">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password
</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email
</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile
</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
</div>
<div class="col-lg-12 row">
<div class="col-lg-6">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

If all you're concerned with is the size of the last input then change this:
You have col-lg-12 row with a col-lg-6 inside of it, remove the col-lg-6 and change the col-lg-12 row to col-lg-6 row.
That being said I've included two alternative layouts that use bootstrap default classes and standard layouts for forms that may help as you're mixing col-*-* with rows in the same div and that isn't how the grid is structured.
See working examples with your original code (*fixed) and two samples.
<div class="col-lg-6 row">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<div class="row">
<div class="col-lg-6 vcenter ">
<div class="panel panel-success">
<div class="panel-heading text-center">
<h4>Login Help (Original)</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="row col-lg-12 radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="radio row col-lg-12" style="margin-top:5%;">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
</div>
<div class="col-lg-6 row">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6 vcenter">
<div class="row">
<div class="panel panel-warning">
<div class="panel-heading text-center">
<h4>Standard Form</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
<label>
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Email Address</label>
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
<label>
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Email Address</label>
<input class="form-control" placeholder="E-mail" name="email" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Username</label>
<input class="form-control" placeholder="Username" name="uname" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6 vcenter">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>INLINE FORM</h4>
</div>
<div class="panel-body">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked/>Forgot Username</label>
<label class="radio-inline">
<input type="radio" name="userMailMob" id="mail1" value="option1" checked/>Email</label>
<label class="radio-inline">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Email Address</label>
<div class="col-sm-8">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="userPwd" id="userpwd2" value="option2" />Forgot Password</label>
<label class="radio-inline">
<input type="radio" name="pwdMailMob" id="mail2" value="option1" />Email</label>
<label class="radio-inline">
<input type="radio" name="pwdMailMob" id="mob2" value="option1" />Mobile</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Email Address</label>
<div class="col-sm-8">
<input class="form-control" placeholder="E-mail" name="email" type="email" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Username</label>
<div class="col-sm-8">
<input class="form-control" placeholder="Username" name="uname" type="text" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>

Set the heights of input elements using classes like .input-lg and .input-sm.
Set the widths of elements using grid column classes like .col-lg-* and .col-sm-*.
bootstrap

Develop Reference

JavaScript is the programming language of the Web.

Jquery not firing onchange with bootstrap 4 - javascript

Related

Unable to get Javascript myFunction() to run var requiredFields = document.getElementById before going to next command

Print html form input value or specific div content in JS with CSS

Change the Bootstrap Form with Bootstrap Dropdown and Jquery

On click anchor tag scroll to div is not working?

How to set width to Input text field in bootstrap under class

Categories

Resources