Develop Reference

Finish every non-empty last "items" of every "blocks" with a point instead of a comma

I've a code where the user generate some text by checking some radios. I would like to finish every "blocks" of "items" by a point instead of a comma.
So I've made this snippet for an exemple of my code :
document.addEventListener("change", comma);
function points(item){
item.innerHTML = item.innerHTML.replace(",", ".");
}
function commas(item){
item.innerHTML = item.innerHTML.replace(".", ",");
}
function comma(){
document.querySelectorAll('.blocks .items').forEach(commas);
document.querySelectorAll('.blocks .items:not(:empty):last-child').forEach(points);
}
function person(x){
let name = document.getElementById("name"+x+"").value;
let hobby = document.querySelector("input[name=hobby"+x+"]:checked").value;
let color = document.querySelector("input[name=color"+x+"]:checked").value;
if(name !== ""){
document.getElementById("nameOf"+x+"").innerHTML = name + ", ";
document.getElementById("hobbyOf"+x+"").innerHTML = hobby;
document.getElementById("colorOf"+x+"").innerHTML = color;
} else{
document.getElementById("nameOf"+x+"").innerHTML = name;
document.getElementById("hobbyOf"+x+"").innerHTML = hobby;
document.getElementById("colorOf"+x+"").innerHTML = color;
}
}
.containerEdit{
border : solid black 1px;
border-radius : 4px;
padding: 10px;
margin: 10px 0;
}
<div calss="block"><b>First person</b>
<div class="item">Name :
<input id="nameP1" onchange="person('P1')"/>
</div>
<div class="item">Hobby :
<input type="radio" name="hobbyP1" id="basketballP1" onchange="person('P1')" value="basketball, ">
<label for="basketballP1">basketball</label>
<input type="radio" name="hobbyP1" id="footballP1" onchange="person('P1')" value="football, ">
<label for="footballP1">football</label>
<input type="radio" name="hobbyP1" id="handballP1" onchange="person('P1')" value="basketball, ">
<label for="handballP1">handball</label>
<input type="radio" name="hobbyP1" id="noHobbyP1" onchange="person('P1')" value="" checked="checked">
<label for="noneP1">none</label>
</div>
<div class="item">Favorit color
<input type="radio" name="colorP1" id="blueP1" onchange="person('P1')" value="blue, ">
<label for="blueP1">blue</label>
<input type="radio" name="colorP1" id="greenP1" onchange="person('P1')" value="green, ">
<label for="greenP1">green</label>
<input type="radio" name="colorP1" id="redP1" onchange="person('P1')" value="red, ">
<label for="redP1">red</label>
<input type="radio" name="colorP1" id="noColorP1" onchange="person('P1')" value="" checked="checked">
<label for="noneP1">none</label>
</div>
<br/>
</div>
<div calss="block"><b>Second person</b>
<div class="item">Name :
<input id="nameP2" onchange="person('P2')"/>
</div>
<div class="item">Hobby :
<input type="radio" name="hobbyP2" id="basketballP2" onchange="person('P2')" value="basketball, ">
<label for="basketballP2">basketball</label>
<input type="radio" name="hobbyP2" id="footballP2" onchange="person('P2')" value="football, ">
<label for="footballP2">football</label>
<input type="radio" name="hobbyP2" id="handballP2" onchange="person('P2')" value="basketball, ">
<label for="handballP2">handball</label>
<input type="radio" name="hobbyP2" id="noHobbyP2" onchange="person('P2')" value="" checked="checked">
<label for="noneP2">none</label>
</div>
<div class="item">Favorit color
<input type="radio" name="colorP2" id="blueP2" onchange="person('P2')" value="blue, ">
<label for="blueP2">blue</label>
<input type="radio" name="colorP2" id="greenP2" onchange="person('P2')" value="green, ">
<label for="greenP2">green</label>
<input type="radio" name="colorP2" id="redP2" onchange="person('P2')" value="red, ">
<label for="redP2">red</label>
<input type="radio" name="colorP2" id="noColorP2" onchange="person('P2')" value="" checked="checked">
<label for="noneP2">none</label>
</div>
<br/>
</div>
<div calss="block"><b>Third person</b>
<div class="item">Name :
<input id="nameP3" onchange="person('P3')"/>
</div>
<div class="item">Hobby :
<input type="radio" name="hobbyP3" id="basketballP3" onchange="person('P3')" value="basketball, ">
<label for="basketballP3">basketball</label>
<input type="radio" name="hobbyP3" id="footballP3" onchange="person('P3')" value="football, ">
<label for="footballP3">football</label>
<input type="radio" name="hobbyP3" id="handballP3" onchange="person('P3')" value="basketball, ">
<label for="handballP3">handball</label>
<input type="radio" name="hobbyP3" id="noHobbyP3" onchange="person('P3')" value="" checked="checked">
<label for="noneP3">none</label>
</div>
<div class="item">Favorit color
<input type="radio" name="colorP3" id="blueP3" onchange="person('P3')" value="blue, ">
<label for="blueP3">blue</label>
<input type="radio" name="colorP3" id="greenP3" onchange="person('P3')" value="green, ">
<label for="greenP3">green</label>
<input type="radio" name="colorP3" id="redP3" onchange="person('P3')" value="red, ">
<label for="redP3">red</label>
<input type="radio" name="colorP3" id="noColorP3" onchange="person('P3')" value="" checked="checked">
<label for="noneP3">none</label>
</div>
<br/>
</div>
<div class="containerEdit" contenteditable="true">
<b>Descitpion of the persons (you can edit this text) :</b>
<div class="blocks" id="block1">
<span class="items" id="nameOfP1"></span>
<span class="items" id="hobbyOfP1"></span>
<span class="items" id="colorOfP1"></span>
</div>
<div class="blocks" id="block2">
<span class="items" id="nameOfP2"></span>
<span class="items" id="hobbyOfP2"></span>
<span class="items" id="colorOfP2"></span>
</div>
<div class="blocks" id="block3">
<span class="items" id="nameOfP3"></span>
<span class="items" id="hobbyOfP3"></span>
<span class="items" id="colorOfP3"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The problem is that my function changes the last "item" of each "block" even if the last child is empty :/
I'd like to change every last NONE EMPTY "item" of each "block" :) Any ideas of how I could achieve it ?
Thanks for the time you take to help me :)

Personally I would add none in the empty places. Is this what you want?
function person(x) {
let items = [];
let name = document.getElementById("name" + x).value;
items.push(name);
items.push(document.querySelector("input[name=hobby" + x + "]:checked").value);
items.push(document.querySelector("input[name=color" + x + "]:checked").value);
if (name !== "") {
const results = items.filter((element) => {
return element !== "";
});
document.getElementById("block" + x.slice(1, 2)).innerHTML = results.join(", ") + ".";
}
}
.containerEdit{
border : solid black 1px;
border-radius : 4px;
padding: 10px;
margin: 10px 0;
}
<div calss="block">
<b>First person</b>
<div class="item">
Name :
<input id="nameP1" class="pers" onchange="person('P1')" />
</div>
<div class="item">
Hobby :
<input type="radio" name="hobbyP1" id="basketballP1" onchange="person('P1')" value="basketball" />
<label for="basketballP1">basketball</label>
<input type="radio" name="hobbyP1" id="footballP1" onchange="person('P1')" value="football" />
<label for="footballP1">football</label>
<input type="radio" name="hobbyP1" id="handballP1" onchange="person('P1')" value="basketball" />
<label for="handballP1">handball</label>
<input type="radio" name="hobbyP1" id="noHobbyP1" onchange="person('P1')" value="" checked="checked" />
<label for="noneP1">none</label>
</div>
<div class="item">
Favorit color
<input type="radio" name="colorP1" id="blueP1" onchange="person('P1')" value="blue" />
<label for="blueP1">blue</label>
<input type="radio" name="colorP1" id="greenP1" onchange="person('P1')" value="green" />
<label for="greenP1">green</label>
<input type="radio" name="colorP1" id="redP1" onchange="person('P1')" value="red" />
<label for="redP1">red</label>
<input type="radio" name="colorP1" id="noColorP1" onchange="person('P1')" value="" checked="checked" />
<label for="noneP1">none</label>
</div>
<br />
</div>
<div calss="block">
<b>Second person</b>
<div class="item">
Name :
<input id="nameP2" class="pers" onchange="person('P2')" />
</div>
<div class="item">
Hobby :
<input type="radio" name="hobbyP2" id="basketballP2" onchange="person('P2')" value="basketball" />
<label for="basketballP2">basketball</label>
<input type="radio" name="hobbyP2" id="footballP2" onchange="person('P2')" value="football" />
<label for="footballP2">football</label>
<input type="radio" name="hobbyP2" id="handballP2" onchange="person('P2')" value="basketball" />
<label for="handballP2">handball</label>
<input type="radio" name="hobbyP2" id="noHobbyP2" onchange="person('P2')" value="" checked="checked" />
<label for="noneP2">none</label>
</div>
<div class="item">
Favorit color
<input type="radio" name="colorP2" id="blueP2" onchange="person('P2')" value="blue" />
<label for="blueP2">blue</label>
<input type="radio" name="colorP2" id="greenP2" onchange="person('P2')" value="green" />
<label for="greenP2">green</label>
<input type="radio" name="colorP2" id="redP2" onchange="person('P2')" value="red" />
<label for="redP2">red</label>
<input type="radio" name="colorP2" id="noColorP2" onchange="person('P2')" value="" checked="checked" />
<label for="noneP2">none</label>
</div>
<br />
</div>
<div calss="block">
<b>Third person</b>
<div class="item">
Name :
<input id="nameP3" class="pers" onchange="person('P3')" />
</div>
<div class="item">
Hobby :
<input type="radio" name="hobbyP3" id="basketballP3" onchange="person('P3')" value="basketball" />
<label for="basketballP3">basketball</label>
<input type="radio" name="hobbyP3" id="footballP3" onchange="person('P3')" value="football" />
<label for="footballP3">football</label>
<input type="radio" name="hobbyP3" id="handballP3" onchange="person('P3')" value="basketball" />
<label for="handballP3">handball</label>
<input type="radio" name="hobbyP3" id="noHobbyP3" onchange="person('P3')" value="" checked="checked" />
<label for="noneP3">none</label>
</div>
<div class="item">
Favorit color
<input type="radio" name="colorP3" id="blueP3" onchange="person('P3')" value="blue" />
<label for="blueP3">blue</label>
<input type="radio" name="colorP3" id="greenP3" onchange="person('P3')" value="green" />
<label for="greenP3">green</label>
<input type="radio" name="colorP3" id="redP3" onchange="person('P3')" value="red" />
<label for="redP3">red</label>
<input type="radio" name="colorP3" id="noColorP3" onchange="person('P3')" value="" checked="checked" />
<label for="noneP3">none</label>
</div>
<br />
</div>
<div class="containerEdit" contenteditable="true">
<b>Descitpion of the persons (you can edit this text) :</b>
<div class="blocks" id="block1">
</div>
<div class="blocks" id="block2">
</div>
<div class="blocks" id="block3">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to center this element

<div id="1" style="display:block">
<div class="radio">
<label><input type="radio" name="o1"> <input type="text" class="form-control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
At the moment, it appears to the left of the screen. Please have a look. Thank you.

Try adding some CSS code
#mydiv{
text-align:center
}
<div id="mydiv">
<div class="radio">
<label><input type="radio" name="o1"><input type="text" class="form-control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>

First of all, if you want to center the div with id='1', it needs a parent element
HTML
<div id='parent'>
<div id="myDiv" style="display:block">
<div class="radio">
<label>
<input type="radio" name="o1">
<input type="text" class="form-control" id="opt1">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o2">
<input type="text" class="form-control" id="opt2">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3">
<input type="text" class="form-control" id="opt3">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o4">
<input type="text" class="form-control" id="opt4">
</label>
</div>
</div>
</div>
CSS
#parent {
display: flex;
justify-content: center;
}
jsfiddle https://jsfiddle.net/g8oLjnus/
learn more about flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

if you use one of the following you can use it to centre it 50% will put the start of text or input box. px means you have to aline manually. insert this into or the css file under #mydiv. to do this change your id to mydiv or something else.
left:50px;
left:50%

I've changed the id to myid; and added a parent div
<div class="parent">
<div id="myid" style="display:block">
<div class="radio">
<label><input type="radio" name="o1"> <input type="text" class="form- control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
</div>
The .parent class must be:
.parent{position: relative;}
And the #myid must be
#myid{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Hope is works :)

Make Text Bolder By selecting radio button

I m new to jquery,I am supposed to do the simple task.If i click on the radio button means the text along with that radio button has to be bolded.please help me with this one.My HTML Markup is here
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label>
<input type="radio" name="optradio">IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label>
<input type="radio" name="optradio">
</label>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
And my jquery code is here
$(document).ready(function(e) {
$(".radio label input").click(function() {
$('.radio').each(function(event) {
if ($(this).hasClass('active')) {
$(this).css("font-family", "helveticabold");
$('.radio').removeClass('active');
if ($(this).next().hasClass('radio'))
$(this).next().addClass('active');
else
$('.radio:last-child').addClass('active');
return false;
}
});
});
});
I know it needs small changes in code please help me out guys

You don't need to use each as only one radio can be selected.
This will do:
Javascript:
$('.radio').on('click', function() {
$('.bold').removeClass('bold');
$(this).addClass('bold');
});
CSS:
.bold {
font-weight: 800;
}
Demo: https://jsfiddle.net/tusharj/3zzaLre0/

You can use $(this) selector for that
$(document).ready(function(e) {
$("input[type='radio']").click(function() {
$("input[type='radio']").parent().css('font-weight','');
$(this).parent().css('font-weight','bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label><input type="radio" name="optradio"><span>IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label><input type="radio" name="optradio"></label><span>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>

How to make Input text inline with Radio Button in Button

i am new to bootstrap building a web page .my code segment of HTML page is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
<label for="hello" class="inline">Upper Limit</label>
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
</form>
a screen shot of page generated by this code is
as you can see percentage radio button and Upperlimit label and text input are not inline to each other .i want to make them inline.can any one please help how to accomplish this ??
Update
i tried the suggestion in the comment this time my html segment is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline" id="label1">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
</label>
<label for="hello" class="inline" id="label2">Upper Limit
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline" id="label3" >
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
<div class="control-group">
<div> Promo-code usage count *
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios2" id="optionsRadios5" value="option1" checked></input>
Unlimited
<label for="hello1" class="inline">Limited
<input id="hello" type="radio" class="radio inline">
</label>
<input id="hello" type="text" class="inline">
</div>
</div>
</form>
and main.css is
#hello,#optionsRadios4#optionRadios6#label1#label2#label3 {
display: inline-block; float: left;
}
and i am getting the screen shot and it is not the expected any other suggestions ??

Does this JSBin look like what you want?

Checking checked in group radio buttons - validate

I have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
http://jsfiddle.net/jz84u/2/
How can i check if minimum one group is checked in this example? If no then should be alert('error').
I would like use jQuery.
$(".group").each(function(){
})
but how can i check this? For my example should be return error - any input is checked, but if i have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4" checked="checked">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
for this example is ok - input in second group is checked.
How can i validate this?

Will this fit your needs?
var n = $(".group input:checked").length;
if(n>0){do something}

Try like below it will work...
Add a button
<input type="button" value="check" id="btnCheck">
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
write a jquery like below
$("#btnCheck").click(function() {
if($(".group input:radio:checked").val())
alert("checked");
else
alert("Nothing checked");
});
Fiddle : http://jsfiddle.net/jz84u/6/