Develop Reference

in multi step form radio button validation

I am trying to use validations in my multi step form, when I am using validations, it works fine with input fields in last step but the problem is that, in first and last step I am using radio options and I am trying to use validation there so that without selecting any option one cannot move to next step.
var currentTab=0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x=document.getElementsByClassName("tab");
x[n].style.display="block";
//... and fix the Previous/Next buttons:
if(n==0) {
document.getElementById("prevBtn").style.display="none";
}
else {
document.getElementById("prevBtn").style.display="inline";
}
if(n==(x.length-1)) {
document.getElementById("nextBtn").innerHTML="Submit";
}
else {
document.getElementById("nextBtn").innerHTML="Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x=document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if(n==1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display="none";
// Increase or decrease the current tab by 1:
currentTab=currentTab+n;
// if you have reached the end of the form...
if(currentTab>=x.length) {
// ... the form gets submitted:
document.getElementById("bookingForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, z, i, n, valid=true;
x=document.getElementsByClassName("tab");
y=x[currentTab].querySelectorAll('input');
// A loop that checks every input field in the current tab:
for(i=0; i<y.length; i++) {
// If a field is empty...
if(y[i].value=="") {
// add an "invalid" class to the field:
y[i].className+=" invalid";
// and set the current valid status to false
valid=false;
}
}
// If the valid status is true, mark the step as finished and valid:
if(valid) {
document.getElementsByClassName("step")[currentTab].className+=" finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x=document.getElementsByClassName("step");
for(i=0; i<x.length; i++) {
x[i].className=x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className+=" active";
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<form id="bookingForm" autocomplete="off" name="form">
<!-- One "tab" for each step in the form: -->
<div class="tab">
<h3>Add Pet Details</h3>
<label class="ml-4 mt-2">What type of pet?</label>
<div class="row m-2">
<div class="col-md-3 mb-3 radio-toolbar">
<input type="radio" id="cat" class="form-control" value="Cat" name="type">
<label for="cat" class="form-label">Cat</label>
</div>
<div class="col-md-3 mb-3 radio-toolbar">
<input type="radio" id="dog" class="form-control" value="Dog" name="type">
<label for="dog" class="form-label">Dog</label>
</div>
</div>
<div class="row m-2">
<div class="col-md-6 mb-3">
<label class="mt-2 mb-3" for="breed">Breed of your pet?</label>
<input type="text" class="form-control" id="breed" placeholder="Please enter your pet's breed...">
</div>
</div>
<label class="ml-4 mt-2">Gender of your pet?</label>
<div class="row m-2">
<div class="col-md-3 mb-3 radio-toolbar">
<input type="radio" class="form-control" value="Male" id="male" name="gender">
<label for="male" class="form-label">Male</label>
</div>
<div class="col-md-3 mb-3 radio-toolbar">
<input type="radio" id="female" class="form-control" value="Female" name="gender">
<label for="female" class="form-label">Female</label>
</div>
</div>
<label class="ml-4 mt-2">Size of your pet?</label>
<div class="row m-2">
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="small" name="size" class="form-control" value="Small">
<label for="small" class="form-label">Small</label>
</div>
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="medium" name="size" class="form-control" value="Medium">
<label for="medium" class="form-label">Medium</label>
</div>
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="large" name="size" class="form-control" value="Large">
<label for="large" class="form-label">Large</label>
</div>
</div>
<label class="ml-4 mt-2">How Aggressive is your pet?</label>
<div class="row m-2">
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="low" name="aggression" class="form-control" value="Low">
<label for="low" class="form-label">Low</label>
</div>
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="normal" name="aggression" class="form-control" value="Normal">
<label for="normal" class="form-label">Normal</label>
</div>
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="high" name="aggression" class="form-control" value="High">
<label for="high" class="form-label">High</label>
</div>
</div>
</div>
<div class="tab">
<h3>Please Enter your Personal Details.</h3>
<div class="row m-2">
<div class="col-md-6">
<label class="mt-2 mb-3" for="fname">Your Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Please enter your full name...">
</div>
<div class="col-md-6">
<label class="mt-2 mb-3" for="email">Your Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Please enter your email id...">
</div>
</div>
<div class="row m-2">
<div class="col-md-12">
<label class="mt-2 mb-3" for="location">Search Your Society/Locality</label>
<input type="text" class="form-control" id="location" placeholder="Please search your location here...">
</div>
</div>
<div class="row m-2">
<div class="col-md-6">
<label class="mt-2 mb-3" for="address">House/Flat No.</label>
<input type="text" class="form-control" id="address" placeholder="Please enter your address...">
</div>
<div class="col-md-6">
<label class="mt-2 mb-3" for="city">city</label>
<input type="text" class="form-control" id="city" placeholder="Please enter your City Name...">
</div>
</div>
<div class="row m-2">
<div class="col-md-6">
<label class="mt-2 mb-3" for="state">State</label>
<input type="text" class="form-control" id="state" placeholder="Please enter your State Name...">
</div>
<div class="col-md-6">
<label class="mt-2 mb-3" for="contact">Your Contact Number</label>
<input type="text" class="form-control" id="contact" placeholder=" Please enter your valid contact number...">
</div>
</div>
<div class="row m-2">
<div class="col-md-12">
<label class="mt-2 mb-3" for="msg">Additional Note for Groomer(optional)</label>
<textarea class="form-control" id="msg" rows="3"></textarea>
</div>
</div>
</div>
<div class="tab">
<div class="row m-2">
<div class="col-md-6">
<label class="mt-2 mb-3" for="date">Select Date</label>
<input type="date" name="bday" min="1000-01-01" max="3000-12-31"
class="form-control" placeholder="dd-mm-yyyy">
</div>
</div>
<div class="row m-2">
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-1" name="time" class="form-control" value="09:00 to 11:00 AM">
<label for="time-1" class="form-label">09:00 to 11:00 AM</label>
</div>
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-2" name="time" class="form-control" value="11:00 to 01:00 PM">
<label for="time-2" class="form-label">11:00 to 01:00 PM</label>
</div>
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-3" name="time" class="form-control" value="01:00 to 03:00 PM">
<label for="time-3" class="form-label">01:00 to 03:00 PM</label>
</div>
</div>
<div class="row m-2">
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-4" name="time" class="form-control" value="03:00 to 05:00 PM">
<label for="time-4" class="form-label">03:00 to 05:00 PM</label>
</div>
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-5" name="time" class="form-control" value="05:00 to 07:00 PM">
<label for="time-5" class="form-label">05:00 to 07:00 PM</label>
</div>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</div>
</div>

Could you use required on the radio tag? Like this:
<input type="radio" id="cat" class="form-control" value="Cat" name="type" required>

How to call my function in Bootstrap Checkout example?

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation')
// Loop over them and prevent submission
Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
}, false)
}())
// Where do I have to call myfunction?
function myFunction (){
alert('All Values are valid');
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h2>Checkout form</h2>
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge badge-secondary badge-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">-$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>$20</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">Redeem</button>
</div>
</div>
</form>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback" style="width: 100%;">
Your username is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you#example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="mb-3">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country">Country</label>
<select class="custom-select d-block w-100" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label>
<select class="custom-select d-block w-100" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="same-address">
<label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="save-info">
<label class="custom-control-label" for="save-info">Save this information for next time</label>
</div>
<hr class="mb-4">
<h4 class="mb-3">Payment</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
<label class="custom-control-label" for="credit">Credit card</label>
</div>
<div class="custom-control custom-radio">
<input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="debit">Debit card</label>
</div>
<div class="custom-control custom-radio">
<input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2017-2019 Company Name</p>
<ul class="list-inline">
<li class="list-inline-item">Privacy</li>
<li class="list-inline-item">Terms</li>
<li class="list-inline-item">Support</li>
</ul>
</footer>
</div>
Hello!
I try to call my function in the Bootstrap example "Checkout" example when all necessary input fields are ok.
But I don't understand where I have to call myfunction in the bootstrap example javascript code.
Myfunction should be called when all nessesary fields are ok and the form should be send.
See the code snippet below.
Thanks for your help!

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);

Jquery not firing onchange with bootstrap 4

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");
});

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