Radiobutton on selection do a function - javascript

I have two radio buttons. If the user chose one of them i would like my code to execute one particular function. I need to get the value from the radio button selection and push it to my function on the server-side as "valueButton". Guess i need a function on the client-side, but how should that look?
The buttons (client-side):
<div>
<input type="radio" name="origin" id="radio-origin-1" value="ID1">
<label for="radio-origin-auto">Grupp 1</label>
</div>
<div>
<input type="radio" name="origin" id="radio-origin-2" value="ID2">
<label for="radio-origin-en">Grupp 2</label>
</div>
The functions (server-side):
function dataSelect(valueButton){
if (valueButton == "ID1") {
ID1(); }
else if (valueButton == "ID2") {
ID2(); }
}
function ID1(){
MailApp.sendEmail("test.acc#outlook.com", "subjects", GetDataFromSpreadsheet());}
function ID2(){
MailApp.sendEmail("test.acc2#outlook.com", "subjects", GetDataFromSpreadsheet());}

HTML Code
<div>
<input type="radio" name="origin" id="radio-origin-1" value="ID1" onChange="dataSelect(this.value);">
<label for="radio-origin-auto">Grupp 1</label>
</div>
<div>
<input type="radio" name="origin" id="radio-origin-2" value="ID2" onChange="dataSelect(this.value);">
<label for="radio-origin-en">Grupp 2</label>
</div>

Related

Trying to disable button if text hasn’t being input and one of three check box hasn’t been checked in JavaScript

I am trying to disable a button that requires both an input of text being typed and one of three checkboxes being checked. The text is a user name and the checkbox is a difficulty of either easy, medium, or hard. Currently, my function only works if one of the requirements is met. So if the text has been inputted the button is enabled and the same with the checkboxes.
startButton.addEventListener('click', startQuiz);
function disableButton() {
if (document.getElementById("username").value === "") {
document.getElementById("start-btn").disabled = true;
}
if (document.getElementsByName("difficulty").checked) {
document.getElementById("start-btn").disabled = true;
}
else {
document.getElementById("start-btn").disabled = false;
}
}
<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" onkeyup="disableButton()" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" onclick="disableButton()">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" onclick="disableButton()">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" onclick="disableButton()">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn" disabled>Start</button>
every time the value changed, check both input
let diffChecked = false;
let startButton = document.querySelector('#start-btn');
let username = document.querySelector('#username');
let difficulty = document.querySelectorAll('[name="difficulty"]');
username.addEventListener('input', function() {
validateInput();
})
difficulty.forEach(function(item) {
item.addEventListener('click', function() {
diffChecked = true;
validateInput();
})
})
function validateInput() {
if (username.value && diffChecked) {
startButton.disabled = false;
} else {
startButton.disabled = true
}
}
<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn" disabled>Start</button>
Instead of a div you must use the Semantic HTML form, that will do the job for you without even writing javascript code.
<form id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" required>
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" required>
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" required>
<label for="hard-diff">Hard</label>
</div>
<button type="submit">Enviar</button>
</form>
Inside a form tag, the submit button only works with all required inputs does not have an undefined value.
And you may call your function startQuiz as an action, if you want.
The action attribute specifies where to send the form-data when a form is submitted.
<form id="difficulty" class="center" action="startQuiz()">

Display alert message pop up the to the user when user checked or unchecked the checkbox using angular

Scenario 1: User has initially checked the value for "Automated" and updates the value to unchecked state
Display alert message pops up to the user if at least one of the following accordions is in the "Completed" state.
HTML
<div class="col-md-12 col-sm-12 filter-opn">
<form #checkboxfilt="ngForm" (ngSubmit)="onapplyfilter(checkboxfilt)">
<div >
<div>
<input type="checkbox" name="Success" value="1" ngModel selected ><br>
<label for="Success"> Success</label><br>
</div>
<div>
<input type="checkbox" name="Pending" value="2" ngModel ><br>
<label for="Pending"> Pending</label><br>
</div>
<div>
<input type="checkbox" name="Canceled" value="3" ngModel ><br>
<label for="Canceled"> Canceled</label><br>
</div>
<input type="submit" value="Apply">
<br>
</div>
</form>
</div>
TS
onapplyfilter(checkbox:NgForm){
if((checkbox.value.Success ==''|| checkbox.value.Success==false)
&&(checkbox.value.Pending ==''|| checkbox.value.Pending==false)
&&(checkbox.value.Canceled ==''|| checkbox.value.Canceled==false))
{
alert('CheckBox is Empty');
}
}
}

JavaScript -- is this radio button checked?

I'm trying to get the data on the user's selection from a radio form. Here is what I have tried.
<form id="office">
<label id="ques1"> question 1</label>
<div class="q1 wrong q1a1"><input type="radio" name="question1" value="q1a1" /> Answer1 <br/></div>
<div class="q1 wrong q1a2"><input type="radio" name="question1" value="q1a2" /> Answer2 <br/></div>
<div class="q1 wrong q1a3"><input type="radio" name="question1" value="q1a3" /> Answer3 <br/></div>
<div class="q1 right q1a4"><input type="radio" name="question1" value="q1a4" /> Answer4 <br/></div>
<br/>
<input type="submit" name="submitAnswers" value="Submit Your Answers" onclick="checkFunction()" />
</form>
<script>
var answersQ01 = document.getElementsById(q1a1).value;
function checkFunction()
{
if (answersQ01.checked) {/*here i would like to know if it's checked or not*/}
};
Which doesn't seem to be working. Any ideas on how to approach this?
I would rather, if possible, have my answers in HTML and JavaScript since I don't know PHP or jQuery.
Thanks a lot!
P.S
I've put each input in a div, so that I can give them separate designs in CSS.
Try this code, I will improve it if it doesn't work for you. (code snippets don't let you use the form tag).
window.onload = function() {
document.getElementById('submit').onclick = function() {
if (document.getElementById('q1a1').checked == true) {
console.log('checked');
} else {
console.log('not checked');
}
};
};
<!--<form id="office">-->
<label id="ques1">question 1</label>
<div class="q1 wrong q1a1">
<input type="radio" name="question1" id="q1a1" value="q1a1" />Answer1
<br/>
</div>
<div class="q1 wrong q1a2">
<input type="radio" name="question1" value="q1a2" />Answer2
<br/>
</div>
<div class="q1 wrong q1a3">
<input type="radio" name="question1" value="q1a3" />Answer3
<br/>
</div>
<div class="q1 right q1a4">
<input type="radio" name="question1" value="q1a4" />Answer4
<br/>
</div>
<br/>
<input type="submit" id="submit" name="submitAnswers" value="Submit Your Answers" />
<!--</form>-->
You can use document.querySelector to get the checked radio button.Here is the snippet for you
function checkFunction(){
var checkedValue='';
var getCheckedButton= document.querySelector('input[name="question1"]:checked');
if(getCheckedButton !==null){
checkedValue = getCheckedButton.value;
}
console.log(checkedValue);
}
Here is DEMO

jQuery - Uncheck other checkboxes if a specific checkbox is selected by user

I would like to uncheck all the checkboxes that are presently selected if a specific checkbox is selected by the user.
Example:
<div>
<label for="foo">
<input type="checkbox" name="meh" id="foo" checked> foo
</label>
</div>
<div>
<label for="bar">
<input type="checkbox" name="meh" id="bar" checked> bar
</label>
</div>
<div>
<label for="foobar">
<input type="checkbox" name="meh" id="foobar"> foobar
</label>
</div>
<div>
<label for="barfoo">
<input type="checkbox" name="meh" id="barfoo" checked> barfoo
</label>
</div>
<div>
<label for="omgwtfbbq">
<input type="checkbox" name="meh" id="omgwtfbbq"> omgwtfbbq
</label>
</div>
If the user selects "omgwtfbbq" checkbox, I would like all the other boxes that might be checked to be unchecked and have the "omgwtfbbq" be the only one checked.
for the label instead of id I think you need for
<div>
<label for="foo">
<input type="checkbox" name="foo" id="foo" checked /> foo
</label>
</div>
<div>
<label for="bar">
<input type="checkbox" name="bar" id="bar" checked /> bar
</label>
</div>
<div>
<label for="foobar">
<input type="checkbox" name="foobar" id="foobar" /> foobar
</label>
</div>
<div>
<label for="barfoo">
<input type="checkbox" name="barfoo" id="barfoo" checked /> barfoo
</label>
</div>
<div>
<label for="omgwtfbbq">
<input type="checkbox" name="omgwtfbbq" id="omgwtfbbq" /> omgwtfbbq
</label>
</div>
then
var $others = $('input[type="checkbox"][name="meh"]').not('#omgwtfbbq')
$('#omgwtfbbq').change(function () {
if (this.checked) {
$others.prop('checked', false)
}
});
$others.change(function () {
if (this.checked) {
$('#omgwtfbbq').prop('checked', false)
}
})
Demo: Fiddle
Note: I'll add a common class to all the input elements which has to be affected by omgwtfbbq and change var $others = $('#foo, #bar, #foobar, #barfoo') to var $others = $('.myclassoninput')
Live demo (click).
$('#omgwtfbbq').click(function() {
$('input:checkbox').not(this).attr('checked', false);
});
Also note that you're re-using id's. Id's should only be used once in a document.
If you choose not to give each checkbox a sequential IDs so that you can use an array, here's a solution:
Place all your controls in a div, with an ID "checkgroup".
Then the JavaScript function goes:
function checkone(d){
if (!d.checked) return; //if it's unchecked, then do nothing
var group=document.getElementById('checkgroup');
var os=group.getElementsByTagName('input');
for (var i=0;i<os.length;i++){
if (os[i].checked&&os[i]!=d) os[i].checked=false;
}
}
Now you can call this function in each checkbox
<div id="checkgroup">
<input id="abcd" onclick="checkone(this);">
<input id="xyz" onclick="checkone(this);">
...
</div>
Note how you don't even need to bother with the name, because the object passes in itself.

How can I make this javascript form validation DRYer?

The user has to select one radio from each of three input "categories". If he "submits" without doing so, he gets a warning:
http://jsfiddle.net/bqyvS/
Markup like this:
<form>
<div id="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
if (!$('#color input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a color!");
}
else if(!$('#shape input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a shape!");
}
else if(!$('#size input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a size!");
}
});
This is a simplified version of a larger piece of code. How can I rewrite the conditional more efficiently so that I'm not verbosely checking each input name? (There should only be one "warning" displayed per "submit", even if multiple input name categories aren't checked.) Editing the markup would be okay.
Thanks!
When applying behavior to similar groups, you should start thinking about classes instead of ids, in this solution, you don't need a separate data-name but I believe it's better to have data separate from html id, but you could use this.id if you prefer
<form>
<div id="color" class="selection-group" data-name="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape" class="selection-group" data-name="square">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size" class="selection-group" data-name="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
$('.selection-group').each(function() {
if(!$(this).find('input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a "+ $(this).data('name') +"!");
return false;
}
});
});
function validationCheck() {
var isValid = true,
errorText = "";
$("form div").each( //get the divs that hold the radios and loop
//$("#color, #shape, #size").each( //could do it by ids of the divs also
function(){
var div = jQuery(this), //div reference
isChecked = div.find('input[type="radio"]:checked').length>0; //see if we have anything selected
if (!isChecked) { //if no selections, show error message
isValid = false; //set validation to false
errorText = "Oops! Please choose a " + div.prop("id") + "!"; //build error message
return false; //exit each loop
}
}
);
$('#warning').text(errorText); //set error message
return isValid;
}
$('#link').on('click', function(){
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
$('#warning').text("Oops! Please choose a " + this.id + "!");
});
});
jsFiddle
You may want to consider generating a warning message in the case a user does not select any inputs or only 1 input.
In this example, a user will recieve a message similar to Oops! Please choose a color, and shape!
$('#link').on('click', function(){
var msgs = [];
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
msgs.push(this.id);
});
if(msgs.length > 0)
$('#warning').text("Oops! Please choose a " + msgs.join(", and "));
});
jsFiddle

Categories