We Keep Coding

How do I add two getElement and a submit button to make one If Statment?

Sumary: I am looking for away to add two seperate getElementbyId and a submit button to an If Statment in order to make it run.
HTML Example:
<form>
<div>
<fieldset id="group1">
<input type="radio" name="type" id="h" value="1111" onclick="func2();" />0 Human</br>
<input type="radio" name="type" id="r" value="2222" onclick="func2();" />1 Robot</br>
<input type="radio" name="type" id="a" value="3333" onclick="func2();" />2 Animal</br>
</fieldset>
</div>
<div>
<fieldset id="group2">
<input type="radio" name="type" id="c" value="1111" onclick="func2();" />4 Jerry</br>
<input type="radio" name="type" id="b" value="2222" onclick="func2();" />5 Xr10Zbot</br>
<input type="radio" name="type" id="z" value="3333" onclick="func2();" />6 Girrafe</br>
</fieldset>
<p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" onclick="func()2;" /></p </div>
</form>
JavaScript Example:
<script>
function func2()
{
if(document.getElementById("h").checked)
// I want for the if statment to require you to also have to check c and click submit to run
{
var val = document.getElementById("h").value;
alert(val);
}
else if(document.getElementById("r").checked)
{
var val = document.getElementById("r").value;
alert(val);
}
else if(document.getElementById("a").checked)
{
var val = document.getElementById("a").value;
alert(val);
}
}
</script>
What I need the if statment to run:
Make it to wher you have to click two radio buttons and submit to run the alert
if(document.getElementById("h").checked) + (document.getElementById("c").checked) + (document.getElementById("f"))

I don't fully understand what you want to do. I hope my solution will help you.
Issue 1
There is a typo in the submit button.
❌NG onclick="func()2;"
✅OK onclick="func2();"
Issue 2
Radio buttons with the same name attribute belong to one group. Therefore, only one of the six buttons can be turned on. One of the buttons in #group1 and one of #group2 are not turned on at the same time. Change name.
For example,
<fieldset id="group2">
<input name="type2">
<input name="type2">
<input name="type2">
</fieldset>
Issue 3
I think it is a bit difficult to use func2() for all buttons including the submit button. I recommend making another function for it.
My solution
This JS doesn't work properly here on the embed snippet. Please copy, paste and run it on an actual editor such as Visual Studio Code.
// Get DOMs
var elementC = document.getElementById('c');
var submitButon = document.getElementById('f');
// Get #group1 radio buttons at once
var group1Buttons = document.querySelectorAll('#group1 [type="radio"]');
// These are needed in If statements
// var elementH = document.getElementById('h');
// var elementR = document.getElementById('r');
// var elementA = document.getElementById('a');
function func2(e) {
e.stopPropagation();
// You may use this If statement
// if (elementH.checked) {
// alert(elementH.value);
// } else if (elementR.checked) {
// alert(elementR.value);
// } else if (elementA.checked) {
// alert(elementA.value);
// }
// I prefer this one because it's shorter.
alert(this.value);
}
function func3(e) {
e.stopPropagation();
if (!elementC.checked) {
e.preventDefault(); // Stop submitting
alert(`You need to check ${elementC.getAttribute('data-text')}!!`);
}
}
// When one of the radio buttons is clicked, executes func2()
group1Buttons.forEach(radio => radio.addEventListener('click', func2, false));
// When the submit button is clicked, executes func3()
submitButon.addEventListener('click', func3, false);
<form>
<div>
<!-- Removed onClick="func2()" -->
<!-- Added required to one of radio buttons -->
<fieldset id="group1">
<input type="radio" name="type" id="h" value="1111" required />0 Human</br>
<input type="radio" name="type" id="r" value="2222" />1 Robot</br>
<input type="radio" name="type" id="a" value="3333" />2 Animal</br>
</fieldset>
</div>
<div>
<!-- Removed onClick="func2()" -->
<!-- Added required to one of radio buttons -->
<!-- Change name: type => type2 -->
<!-- Added data-text attribute -->
<fieldset id="group2">
<input type="radio" name="type2" data-text="4 Jerry" id="c" value="1111" required />4 Jerry</br>
<input type="radio" name="type2" id="b" value="2222" />5 Xr10Zbot</br>
<input type="radio" name="type2" id="z" value="3333" />6 Girrafe</br>
</fieldset>
<!-- Removed onClick="func2()" -->
<p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" /></p>
</div>
</form>

check one radio button with dynamic values

<input type="radio" on-click="checkDefaultLanguage" id="checkbox" >
[[names(name)]]
this is my custom input field for radio and has dynamic values in it. I am trying to select one radio at a time and deselect from the others. but I cannot find any information for this. The one I have found are either with name attribute or having static input fields.
my JS
private checkDefaultLanguage() {
const checkboxes = <HTMLInputElement>this.querySelector('#checkbox');
checkboxes.addEventListener('click', () => {
if (checkboxes.checked) {
//what is should I do inside of it to make sure only one is selected at a time.
}
});
}

Just use name on the input, all input will get assigned to 1 group
<form>
<fieldset>
<legend>Select a maintenance drone</legend>
<div>
<input type="radio" id="huey" name="drone" checked />
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="dewey" name="drone" />
<label for="dewey">Dewey</label>
</div>
<div>
<input type="radio" id="louie" name="drone" />
<label for="louie">Louie</label>
</div>
</fieldset>
</form>

tbh i dont fully understand what you are trying to do but you could pass the button you just clicked to the function
<input type="radio" on-click="checkDefaultLanguage(this)" id="checkbox" >
In your function you could just uncheck every box no matter if it's checked or not.
After this for-loop just check the one you passed to the function.

Make check-boxes becoming one group of radio button

I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
<script>
$(document).ready(function () {
if ($('#dcenter-listradio').prop("checked", true)) {
$('#dcenter-allradio').prop("checked", false);
}
if ($('#dcenter-allradio').prop("checked", true)) {
$('#dcenter-listradio').prop("checked", false);
}
});
</script>

If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.
$(document).ready(function() {
var selector = ".groupTogether";
// or if you can't give same class, you could use "#unrelatedRadio, input[name='related']"
$(selector).change(function()
{
if(this.checked)
{
$(selector).not(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input>
<input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input>
<input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input>
Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']")

let radios = document.querySelectorAll("input");
for (let i of radios){
i.name="same"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>

Input submit is undisabled after first group checkbox checked

I had a form with many input groups, and all are hidden except the first group which is active. The submit button is actually next group and is it should be in any group disabled. My problem is that after the first group inputs has been checked the submit button (nextbutton) stays active which is not ok. Can anyone help?
<html>
<p>Button should be enabled if at least one checkbox is checked</p>
<div class="grp1">
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
</div>
<h1>group 2 is hidden and will be display after group 1 input is checked and
button should be enabled if at least one check_box is checked</h1>
<div class="grp2 " style="display:none;">
<div>
<input type="check_box" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
</div>
<p>the submit button only appears if a group has a class=hasSubmit. and disabled only if a checkbox checked</p>
<p>the problem is, after grp1 is checked and next to grp2 the submit button is undisabled</p>
<input class="nextButton" type="submit" value="Do thing" disabled>
</div>
</html>
This is the code
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});

Here is what I understood from your question:-
By default only one group is visible and the button is disabled.
When any checkbox of group 1 is checked the button should be enabled.
On clicking the button group 2 becomes visible and the button is
again disabled.
If all the checkbox of any visible group is un-checked the button
should again be disabled.
Based on this what you need to do is to disable the button when it is clicked after enabling the next section.
$('input:checkbox').change(function () {
var doEnableButton = true;
$('div.hasSubmit:visible').each(function () {
if ($(this).find('input:checked').length === 0) {
doEnableButton = false;
return false; //break
}
});
if (doEnableButton) {
$('.nextButton').prop('disabled', false);
} else {
$('.nextButton').prop('disabled', true);
}
});
$('.nextButton').click(function (e) {
e.preventDefault();
if ($('.hasSubmit:hidden').length > 0) {
$('.hasSubmit:hidden:first').show();
$('.nextButton').prop('disabled', true);
} else {
//Submit the page
alert('Page submitted');
}
});
For demonstration purpose I've moved the heading (h1) inside the div.hasSubmit. Also I've added three sections (that is 3 div.hasSubmit) in the following jsFiddle: here

First, correct your html layout and put your submit button inside of each group wrapper, which in your case is the element with class name hasSubmit.
Then find it on checkbox click event by traversing its parent container like so:
var checkboxes = $("input[type='checkbox']");
checkboxes.on("click", function () {
// read it when checkbox click event is fired, instead of on page load
var submitButt = $(this)
.closest(".hasSubmit")
.find("input[type='submit']");
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
FIDDLE

How create the condition in the radio button? (in jQuery Ajax)

I want to create the conditions in the radio button.
so I'm making a survey app with jquery ajax. every question has the option (radio button) and the button next to to the next question. without changing link
I want to create the conditions in the radio button. If select YES then it will go to the next question. If you select NO then the next question will pass 2
can help me please?

have you tried doing an attribute on your radio button like arnum that will track the n^th number of radio button.
<div arnum="3">
<input type="radio" skipval="3" value="yes">
<input type="radio" skipval="1" value="no">
</div>
<div arnum="4">
<input type="radio" value="something">
<input type="radio" value="else">
</div>
then:
$('div[arnum] input[type=radio][skipval]').on('click',function(){
var skipval = parseInt($(this).attr('skipval'));
var arnum = parseInt($(this).parent().attr('arnum'));
arnum++;
for(;arnum<arnum+skipval;arnum++){
$('div[arnum='+arnum+']').attr('disable','disable');
}
$('div[arnum='+arnum+']').focus();
});
this code on click skips to the next question using skipval and disables everything in between.

y this:
<input type="radio" name="test" value="1" />yes<br />
<input type="radio" name="test" value="2" />no
<div id="question2" style="display:none">
<br />Question 2<br />
</div>
<script>
$('input[name=test]').change(function () {
if ($(this).val() == 1) {
$('#question2').show();
} else {
$('#question2').hide();
}
})
</script>