We Keep Coding

Submit the form without loading div

I am struggling to enter the form if the the div is not loaded, What I am trying is if the option "Grade B or Less" is selected then form should be able to submit and if "Grade A" is selected then next div to be loaded and then form to be submitted,
Here is my php form
<div class="box box-primary">
<?php if (isset($_POST['status'])) { ?>
<div id="file_updated_box">
<div class="alert alert-info alert-dismissible file_updated">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<h4><i class="icon fa fa-check"></i><?php echo $_POST['status']; ?></h4>
</div>
</div>
<?php } ?>
<div class="box-header with-border">
<h3 class="box-title">Enter IMEI</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form method="post" action="sonim_harvesting.php">
<div class="box-body">
<div class="row">
<div class="form-group col-md-6">
<label for="imeinum">Job IMEI</label>
<input class="form-control" autofocus autocomplete="off" id="imeinum" name="imeinum" value="<?php if (isset($_POST['imeinum'])) {
echo $_POST['imeinum'];
} ?>" name="imeinum" placeholder="Enter IMEI" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label">Device Power ON:</label>
<div>
<div class="radio">
<label>
<input name="device_power" value="YES" type="radio" class="radio" required>
YES
</label>
</div>
<div class="radio">
<label>
<input name="device_power" value="NO" required type="radio" class="radio">
NO
</label>
</div>
</div>
</div>
<div class="form-group grade">
<label class="control-label">Device Grade:</label>
<div>
<div class="radio">
<label>
<input name="device_grade" id="GradeA" value="A" type="radio" class="radio" required>
Grade A
</label>
</div>
<div class="radio">
<label>
<input name="device_grade" value="B or Less" required type="radio" class="radio">
Grade B or Less
</label>
</div>
</div>
</div>
<div class="form-group function" style="display:none">
<label class="control-label">Is Display Functional? :</label>
<div>
<div class="radio">
<label>
<input name="function" value="YES" type="radio" class="radio" required>
YES
</label>
</div>
<div class="radio">
<label>
<input name="function" value="NO" required type="radio" class="radio">
NO
</label>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<input type="submit" class="btn btn-primary" name="jbSubmit" value="Submit" />
</div>
</form>
</div>
and here is my js code
$(document).ready(function() {
$('.grade').hide()
$('.function').hide()
$('input[type="radio"]').click(function() {
$('.grade').show();
});
$('.grade').click(function() {
if ($('#GradeA').is(":checked")) {
$('.function').show()
} else {
}
})
});
I am able to do it with Grade A but If Grade B is selected I am not able to submit the form, Please advice

This is because your radio input with name="function" has the required attribute set. Despite not being visible, the form is still expecting this field to be completed.
The simplest solution here would be to either remove the required attribute or consider setting one of the options as checked by default.

Click on radio button after all with same name

I have a page with many radio with same name
Problem I have it's when I click on one, that affect other.
kidSection can be added via ajax
$("#kidsSection").on('click', '.kidsTutorYes', function(e) {
$(this).parent().parent().nextAll('.kidTutor, #kidsSectionAdd').eq(0).removeClass('visually-hidden');
});
$("#kidsSection").on('click', '.kidsTutorNo', function(e) {
$(this).parent().parent().nextAll('.kidTutor, #kidsSectionAdd').eq(0).addClass('visually-hidden');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container" id="main" role="main">
<div>
<br>
<form class="row g-3" id="kidsForm">
<div id="kidsSection">
<div class="kidSection" id="kidSection">
<h5>Information de l'enfant</h5>
<div class="form-group col-md-6">
<label class="form-label" for="firstname">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label" for="lastname">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
<h6>Est-t'il mineur ou à charge?</h6>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input autocomplete="off" value="yes" name="kidsTutors1" type="radio" class="kidsTutorYes"> Oui
</label>
<label class="btn btn-secondary">
<input autocomplete="off" value="no" checked="" name="kidsTutors" type="radio" class="kidsTutorNo1"> Non
</label>
</div>
<br>
<div class="kidTutor">
<h5>Tuteur</h5>
<div class="form-group col-md-6">
<label class="form-label">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
</div>
</div>
<br>
<div class="kidSection" id="kidSection">
<h5>Information de l'enfant</h5>
<div class="form-group col-md-6">
<label class="form-label" for="firstname">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label" for="lastname">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
<h6>Est-t'il mineur ou à charge?</h6>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input autocomplete="off" value="yes" name="kidsTutors2" type="radio" class="kidsTutorYes"> Oui
</label>
<label class="btn btn-secondary">
<input autocomplete="off" value="no" checked="" name="kidsTutors2" type="radio" class="kidsTutorNo"> Non
</label>
</div>
<br>
<div class="kidTutor visually-hidden">
<h5>Tuteur</h5>
<div class="form-group col-md-6">
<label class="form-label">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
</div>
</div>
</div>
<div class="" id="kidsSectionAdd">
Ajouter un autre enfant
</div>
</form>
<br>
<div class="col-12 text-center">
Précédent
Suivant
</div>
<br>
</div>
</main>

Laravel 8 Javascript function not working with form tag

The code below works fine without the use of the FORM tag.
But after I add the FORM tag, the code does not work anymore.
My code:
function ismcstop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcstop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcstop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>

Just rename ismcstop() function name like below
function ismcsfortop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>

Change the name of the label to something else other than ismcstop. I think it is overridden the function.
<label for="ismcstopLabel">Machine Stop?</label>
OR
Change the function name ismcstop() to ismcstopFunc()

How to document.querySelectorAll() only checked items

I have a quick wizard that captures customer selection with both checkboxes and radio buttons (only a single instance on each wizard page so only radio or checkboxes)
I'm trying to capture only the selected radio and checkboxes
form.addEventListener("submit", (e) => {
e.preventDefault();
const inputs = [];
form.querySelectorAll("input").forEach((input) => {
const { name, value, status } = input;
inputs.push({ name, value });
});
console.log(inputs);
form.reset();
});
here is the HTML with the 3 step wizard
<section>
<div class="container">
<form>
<div class="step step-1 active">
<h2>How to serve?</h2>
<div class="form-group">
<input type="radio" id="forhere" name="where" value="forhere"
checked>
<label for="forhere">For Here</label>
</div>
<div class="form-group">
<input type="radio" id="togo" name="where" value="togo">
<label for="togo">To Go</label>
</div>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-2">
<h2>Size?</h2>
<div class="form-group">
<input type="radio" id="small" name="size" value="small"
checked>
<label for="small">Small</label>
</div>
<div class="form-group">
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Medium + 0.49c</label>
</div>
<div class="form-group">
<input type="radio" id="large" name="size" value="large">
<label for="large">Large + 0.99c</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-3">
<p>Anything Else:</p>
<div class="form-group">
<input type="checkbox" id="extrahot" name="extrahot" checked>
<label for="extrahot">Extra Hot</label>
</div>
<div class="form-group">
<input type="checkbox" id="doubleshot" name="doubleshot">
<label for="doubleshot">Double Shot + $0.49c</label>
</div>
<div class="form-group">
<input type="checkbox" id="whipped" name="whipped">
<label for="whipped">Whipped Cream</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="submit" class="submit-btn">Add To Order</button>
</div>
</form>
</div>
</section>
I'm not set on this as I'm going to be adding this as a popup that I currently use only with a single selection option but need the checkboxes
Thank you

Return just the checked items.
form.querySelectorAll("input:checked")

const elements = form.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked');

Submit form data from selected radio button option only

I am working on a form where a user selects an option from radio buttons.
Then depending on option, a view of text fields appears. The user then inputs the required data and submits the form.
The options have different options and such data submitted should be different.
My challenge is how to submit only data from the selected radio button fields.
Anyone kindly help. Thank you
$(function () {
$('input[type="radio"]').on("click",function () {
$(".selections").hide(); // hide them all
if (this.value=="both") $(".selections").show(); // show both
else $("#"+this.value).show(); // show the one with ID=radio value
});
$('.selections input[type="checkbox"]').on("click",function() {
$(this).next().toggle(this.checked); // hide if not checked
});
$('.selections input[type="text"]').each(function() { // initialise
$(this).toggle($(this).prev().is(":checked"));
});
});
.selections { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" name="bill_type" value="percentage">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<!-- flat_rate radio button option -->
<div id="flat_rate" class="selections">
<input type="hidden" name="bill_type" value="flat_rate">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at">
</div>
<!-- variable radio button option -->
<div id="variable" class="selections">
<input type="hidden" name="bill_type" value="variable">
<div class="form-group">
<label for="limit" class="col-md-4 control-label">Limit</label>
<div class="col-md-4">
<input id="limit" placeholder="10" type="number" class="form-control" name="limit" autofocus>
</div>
</div>
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" name="send_at">
<br/>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>

You should try to use Bootstrap Tabs [imho], but if you want to go with radios...
Disabling all inputs will prevent them from being submited:
$("#div :input").attr("disabled", true);
or
$('#div').find('input, textarea, button, select').attr('disabled','disabled');
Code from this post

Firstly you don't need same field repeatedly.Try like this
$(function () {
$('input[name="billing"]').on('change',function(){
$('#bill_type').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" id="bill_type" name="bill_type" value="">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
After submission you can do whatever based on the value of bill_type.