JavaScript - Bootstrap option buttons validation in form - javascript

I need help with the validation.
That's my code:
HTML:
<label for="option">כיתה נוכחית:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="class" value="12" > י"ב
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="11" > י"א
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="10"> י'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="9" id="9" onkeyup="validateClass()"> ט'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="8" > ח'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
</label>
And the result:
Question: I wanna check if the user clicked on one of the buttons.
I tried to do:
if (calss10 === null)
I want to do this with: onekeyup=" "


This will solve your problem.
You need to create a function that runs when the user submit the form (onsubmit)
this is a form example:
P.S you need to add an id to every radio button id="class"
<form onsubmit="return Validate()">
<label for="option">כיתה נוכחית:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="class" value="12" > י"ב
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="11" > י"א
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="10"> י'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="9" id="9" onkeyup="validateClass()"> ט'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="8" > ח'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
</label>
</form>
function Validate() {
if (!Validate_Class())
return false;
}
function Validate_Class() {
if (!document.getElementById("class").checked) {
alert("אתה חייב לבחור כיתה!");
return false;
}
}


Wouldn't this get the job done?
var myClickedElement;
$('input[name="class"]').click(function(e) {
myClickedElement = $(this);
});

Related

JS/CSS/Bootstrap - styling selected button from button group

I have a basic button group like so:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" id="1" name="responses" value="1">
Poor
</label>
<label class="btn btn-secondary">
<input type="radio" id="2" name="responses" value="2">
Average
</label>
<label class="btn btn-secondary">
<input type="radio" id="3" name="responses" value="3">
Good
</label>
<label class="btn btn-secondary">
<input type="radio" id="4" name="responses" value="4">
Very good
</label>
<label class="btn btn-secondary">
<input type="radio" id="5" name="responses" value="5">
Excellent
</label>
</div>
And I want to be able to change the background color of the checked option.
I cannot figure out how to select this in CSS. I am aiming for either a JS or CSS solution.

the idea is to capture the input event on input element and apply a styling class to it's parent label, like so:
document.querySelectorAll('input').forEach(i => {
i.addEventListener('input', e => {
document.querySelectorAll('label').forEach(l => {
l.classList.remove('checked');
});
e.target.parentNode.classList.add('checked');
});
});
label.checked {
background-color: red !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" id="1" name="responses" value="1">
Poor
</label>
<label class="btn btn-secondary">
<input type="radio" id="2" name="responses" value="2">
Average
</label>
<label class="btn btn-secondary">
<input type="radio" id="3" name="responses" value="3">
Good
</label>
<label class="btn btn-secondary">
<input type="radio" id="4" name="responses" value="4">
Very good
</label>
<label class="btn btn-secondary">
<input type="radio" id="5" name="responses" value="5">
Excellent
</label>
</div>

How can I get current Value of Selected button from the following?

We have three buttons(English, Hindi & Urdu). How I can get the value of Selected button in JavaScript function?
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> English
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Hindi
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Urdu
</label>
</div>

Firstly set value to your radio buttons then get buttons and bind event listener.
and you can get value of button from event target as following:
let btns= document.getElementsByName("options");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",function(e) {
console.log(e.target.value);
});
}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked value="English">English
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"value="Hindi">Hindi
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" value="Urdu">Urdu
</label>
</div>

Try This:
https://jsfiddle.net/f7ed1o0n/
$('input[name="options"]').change(function(){
alert($(this).val());
$(this).parents('.btn-group').find('input[type="radio"]').attr('disabled',
'disabled');
});

Validation for two fields on a form

I was wondering if anyone could please need help me validate my form.
The two fields that need validation are house number and postcode
I need to make the house number only two numbers
and the postcode only 5 characters.
I've used a pattern attribute and was wondering if I can display the message on more than one field.
<div class="col-md-6 text-center">
<form name="submit-to-google-sheet">
<label>Address</label>
<br>
<input name="address" type="text" placeholder="House Number" pattern="[0-9]{2}">
<br>
<br>
<input name="address2" type="text" placeholder="Street Name">
<br>
<br>
<input name="city" type="text" placeholder="City/Town">
<br>
<br>
<input name="postcode" type="text" placeholder="Postcode" pattern="[0-9]{5}">
<br>
<br>
<label>Plant Type</label>
<br>
<select name="plant">
<option value="tree">TREE</option>
<option value="shrub">SHRUB</option>
</select>
<br>
<br>
<label>Description</label>
<br>
<textarea input name="description">
</textarea>
<br>
<br>
<label>Rating</label>
<br>
<div class="rating">
<input id="star1" type="radio" name="rating" value="1">
<label for="star1" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star2" type="radio" name="rating" value="2">
<label for="star2" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star3" type="radio" name="rating" value="3">
<label for="star3" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star4" type="radio" name="rating" value="4">
<label for="star4" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star5" type="radio" name="rating" value="5">
<label for="star5" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
</div>
<br>
<br>
<button type="submit">SUBMIT</button>
</form>

Simply you can can do it using a html attribute maxlength = "2"
For Example
<div class="col-md-6 text-center">
<form name="submit-to-google-sheet">
<label>Address</label>
<br>
<input name="address" type="text" placeholder="House Number" pattern="[0-9]{2}" maxlength="2">
<br>
<br>
<input name="address2" type="text" placeholder="Street Name">
<br>
<br>
<input name="city" type="text" placeholder="City/Town">
<br>
<br>
<input name="postcode" type="text" placeholder="Postcode" pattern="[0-9]{5}" maxlength="5">
<br>
<br>
<label>Plant Type</label>
<br>
<select name="plant">
<option value="tree">TREE</option>
<option value="shrub">SHRUB</option>
</select>
<br>
<br>
<label>Description</label>
<br>
<textarea input name="description">
</textarea>
<br>
<br>
<label>Rating</label>
<br>
<div class="rating">
<input id="star1" type="radio" name="rating" value="1">
<label for="star1" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star2" type="radio" name="rating" value="2">
<label for="star2" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star3" type="radio" name="rating" value="3">
<label for="star3" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star4" type="radio" name="rating" value="4">
<label for="star4" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star5" type="radio" name="rating" value="5">
<label for="star5" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
</div>
<br>
<br>
<button type="submit">SUBMIT</button>
</form>

How to get label value from input

I have matching input and label elements:
console.log('LABEL:', $('label[for="8"]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad_numbers">
<input type="radio" name="ad_pos" value="6" />6<br>
<input type="radio" name="ad_pos" value="7" />7<br>
<input type="radio" name="ad_pos" value="8" checked/>8<br>
<input type="radio" name="ad_pos" value="9" />9<br>
<input type="radio" name="ad_pos" value="10" />10<br>
<input type="radio" name="ad_pos" value="11" />11<br>
<input type="radio" name="ad_pos" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6" id="6">$50</label>
<label for="7" id="7">$45</label>
<label for="8" id="8">$40</label>
<label for="9" id="9">$35</label>
<label for="10" id="10">$30</label>
<label for="11" id="11">$25</label>
<label for="12" id="12">$20</label>
</div>
Say input 8 is checked, what would the jquery selector look like to target the accompanying label element?

You don't connect input and label based on value, but using for on the label matching id on the input:
const ad_pos_radios = document.querySelectorAll('[name=ad_pos]')
const ad_pos_labels = document.querySelectorAll('ad_numbers.ad_prices label')
for (const ad of Array.from(ad_pos_radios)) {
ad.addEventListener('change', () => {
console.log(document.querySelector(':checked').labels[0].textContent);
})
}
<div class="ad_numbers">
<input type="radio" name="ad_pos" id="6" value="6" />6<br>
<input type="radio" name="ad_pos" id="7" value="7" />7<br>
<input type="radio" name="ad_pos" id="8" value="8" checked/>8<br>
<input type="radio" name="ad_pos" id="9" value="9" />9<br>
<input type="radio" name="ad_pos" id="10" value="10" />10<br>
<input type="radio" name="ad_pos" id="11" value="11" />11<br>
<input type="radio" name="ad_pos" id="12" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6">$50</label>
<label for="7">$45</label>
<label for="8">$40</label>
<label for="9">$35</label>
<label for="10">$30</label>
<label for="11">$25</label>
<label for="12">$20</label>
</div>

If you can not modify the HTML code properly, as mentioned by #connexo.
You can use this selector:
".ad_numbers input[type=radio][checked]"
Something like this:
$(function() {
var checked = $(".ad_numbers input[type=radio][checked]")[0];
console.log($("#" + checked.value).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
down vote favorite I have matching input and label elements:
<div class="ad_numbers">
<input type="radio" name="ad_pos" value="6" />6<br>
<input type="radio" name="ad_pos" value="7" />7<br>
<input type="radio" name="ad_pos" value="8" checked/>8<br>
<input type="radio" name="ad_pos" value="9" />9<br>
<input type="radio" name="ad_pos" value="10" />10<br>
<input type="radio" name="ad_pos" value="11" />11<br>
<input type="radio" name="ad_pos" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6" id="6">$50</label>
<label for="7" id="7">$45</label>
<label for="8" id="8">$40</label>
<label for="9" id="9">$35</label>
<label for="10" id="10">$30</label>
<label for="11" id="11">$25</label>
<label for="12" id="12">$20</label>
</div>
Update:
Based on #connexo suggestion.
The proper selector is:
".ad_numbers input[type=radio]:checked"
$(function() {
var checked = $(".ad_numbers input[type=radio]:checked")[0];
console.log($("#" + checked.value).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
down vote favorite I have matching input and label elements:
<div class="ad_numbers">
<input type="radio" name="ad_pos" value="6" />6<br>
<input type="radio" name="ad_pos" value="7" />7<br>
<input type="radio" name="ad_pos" value="8" checked/>8<br>
<input type="radio" name="ad_pos" value="9" />9<br>
<input type="radio" name="ad_pos" value="10" />10<br>
<input type="radio" name="ad_pos" value="11" />11<br>
<input type="radio" name="ad_pos" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6" id="6">$50</label>
<label for="7" id="7">$45</label>
<label for="8" id="8">$40</label>
<label for="9" id="9">$35</label>
<label for="10" id="10">$30</label>
<label for="11" id="11">$25</label>
<label for="12" id="12">$20</label>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$("input[type=radio][name=ad_pos]").on("change", function() {
var selected = $("input[type=radio][name=ad_pos]:checked").val();
console.log(selected);
if (selected) {
var label = $('.ad_numbers.ad_prices label[for="' + selected + '"]').text();
console.log(label);
}
});
});
</script>
<div class="ad_numbers">
<input type="radio" name="ad_pos" value="6" checked />6<br>
<input type="radio" name="ad_pos" value="7" />7<br>
<input type="radio" name="ad_pos" value="8" />8<br>
<input type="radio" name="ad_pos" value="9" />9<br>
<input type="radio" name="ad_pos" value="10" />10<br>
<input type="radio" name="ad_pos" value="11" />11<br>
<input type="radio" name="ad_pos" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6" id="6">$50</label>
<label for="7" id="7">$45</label>
<label for="8" id="8">$40</label>
<label for="9" id="9">$35</label>
<label for="10" id="10">$30</label>
<label for="11" id="11">$25</label>
<label for="12" id="12">$20</label>
</div>

Same ng-model for input radio and number

In my html form I have two different types of input with same $scope variable as model.
I have 3 radio buttons and a number input field
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="16" name="options" id="option1" > 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="32" name="options" id="option2" > 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="64" name="options" id="option3" > 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
But if I select one of the radio button inputs, it doesn't set the value.
Having two different inputs for the same scope variable causes conflicts?

Use ng-value instead of value
Like this
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="16" name="options" id="option1"> 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="32" name="options" id="option2"> 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="64" name="options" id="option3"> 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
DEMO

Categories