Develop Reference

Why jQuery steps not changing the section

I was trying to make a multi-step form using jQuery steps. I have tried taking some code from the actual documentation but don't know why their web page isn't showing the code snippets. I tried taking the code from one tutorial blog but it is not working as I have expected. The section is not changing I am new to jQuery and never used steps I am not getting where I am going wrong.
Code :
<form id="example-form" action="#" class="tab-wizard wizard-circle wizard clearfix">
<h6>Account</h6>
<section>
<br/>
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<div class="form-group">
<label for="userName-2">User name </label>
<input id="userName-2" name="userName" type="text" value="Les" class="form-control ">
</div>
<div class="form-group">
<label for="password-2">Password</label>
<input id="password-2" name="password" value ="password" type="text" class=" form-control">
</div>
<div class="form-group">
<label for="confirm-2">Confirm Password</label>
<input id="confirm-2" name="confirm" type="text" value="password" class=" form-control">
</div>
</div>
</div>
</section>
<h6>Profile</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="address-2">Address</label>
<input id="address-2" name="address" type="text" class="form-control">
</div>
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
</div>
</div>
</section>
<h6>Warning</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="form-group">
<label>This is the question that is being asked to the user?</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >
Option three. This is just a demo.
</label>
</div>
</div></div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
</div>
</section>
<h6>Finish</h6>
<section>
<input id="acceptTerms-2" name="acceptTerms" type="checkbox" class=""> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
</section>
</form>
Js code:
var form = $("#example-form");
form.steps({
headerTag: "h6",
bodyTag: "section",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#'
});
Apologies for the long code here, I tried making codesandbox of the example but I can't able to find the CDN for steps.css and also the CDN for steps.js was not working there.

JavaScript Form Values

My name is Alexandru! I am trying to learn javascript. I am using MDB and Bootstrap, and while using one of MDB's form examples I encountered a problem. My JavaScript won't show the exact answers from the form, but the following answer. Thank you in advance!
Thank you!
Answer:
[object NodeList]
[object NodeList]
[object NodeList]
[object NodeList]
[object NodeList]
[object NodeList]
function results() {
var fistName = document.getElementsByName('firstName');
var lastName = document.getElementsByName('lastName');
var birth_date = document.getElementsByName('birth_date');
var email = document.getElementsByName('email');
var telehpone = document.getElementsByName('telehpone');
var message = document.getElementsByName('message');
document.write("<h1>Thank you!</h1>");
document.write("<h3>Answer:</h3>")
document.write(fistName + "<br/>");
document.write(lastName + "<br/>");
document.write(birth_date + "<br/>");
document.write(email + "<br/>");
document.write(telehpone + "<br/>");
document.write(message + "<br/>");
}
<section class="intro">
<div class="mask d-flex align-items-center h-100 gradient-custom">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2">Formular de Contact</h3>
<form onsubmit="return results()">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" name="Name" id="firstName" class="form-control" />
<label class="form-label" for="firstName">First Name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" name="lastName" id="lastName" class="form-control" />
<label class="form-label" for="Prenume">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline datepicker">
<input type="text" name="birth_date" class="form-control" id="birthdayDate" />
<label for="birthdayDate" class="form-label">Birth Date</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">Gender: </h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="femaleGender" value="option1" />
<label class="form-check-label" for="femaleGender">F</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="maleGender" value="option2" />
<label class="form-check-label" for="maleGender">M</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="otherGender" value="option3" />
<label class="form-check-label" for="otherGender">N</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="email" name="email" id="emailAddress" class="form-control" />
<label class="form-label" for="emailAddress">Email</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="tel" name="telehpone" id="phoneNumber" class="form-control" />
<label class="form-label" for="phoneNumber">Telephone Number</label>
</div>
</div>
</div>
<div class="form-outline">
<textarea class="form-control" name="message" id="textAreaExample" rows="4"></textarea>
<label class="form-label" for="textAreaExample">Message</label>
</div>
<div class="mt-4">
<input id="button-submit" name="submit_button" class="btn btn-warning btn-lg" type="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

You should be using .value and also selecting only one from the list (say using [0])! Also, return false, else it will refresh. See below:
function results() {
var fistName = document.getElementsByName("Name")[0].value;
var lastName = document.getElementsByName("lastName")[0].value;
var birth_date = document.getElementsByName("birth_date")[0].value;
var email = document.getElementsByName("email")[0].value;
var telehpone = document.getElementsByName("telehpone")[0].value;
var message = document.getElementsByName("message")[0].value;
document.write("<h1>Thank you!</h1>");
document.write("<h3>Answer:</h3>");
document.write(fistName + "<br/>");
document.write(lastName + "<br/>");
document.write(birth_date + "<br/>");
document.write(email + "<br/>");
document.write(telehpone + "<br/>");
document.write(message + "<br/>");
return false;
}
<section class="intro">
<div class="mask d-flex align-items-center h-100 gradient-custom">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2">Formular de Contact</h3>
<form onsubmit="return results()">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" name="Name" id="firstName" class="form-control" />
<label class="form-label" for="firstName">First Name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" name="lastName" id="lastName" class="form-control" />
<label class="form-label" for="Prenume">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline datepicker">
<input type="text" name="birth_date" class="form-control" id="birthdayDate" />
<label for="birthdayDate" class="form-label">Birth Date</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">Gender:</h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="femaleGender" value="option1" />
<label class="form-check-label" for="femaleGender">F</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="maleGender" value="option2" />
<label class="form-check-label" for="maleGender">M</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="otherGender" value="option3" />
<label class="form-check-label" for="otherGender">N</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="email" name="email" id="emailAddress" class="form-control" />
<label class="form-label" for="emailAddress">Email</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="tel" name="telehpone" id="phoneNumber" class="form-control" />
<label class="form-label" for="phoneNumber">Telephone Number</label>
</div>
</div>
</div>
<div class="form-outline">
<textarea class="form-control" name="message" id="textAreaExample" rows="4"></textarea>
<label class="form-label" for="textAreaExample">Message</label>
</div>
<div class="mt-4">
<input id="button-submit" name="submit_button" class="btn btn-warning btn-lg" type="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

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 ?

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