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.
Related
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()
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');
I am trying to make radio buttons where person chose options and different options appear for him/her to chose from. my code is :
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'wanted') {
$('.sec-row').show();
}
else {
$('.sec-row').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="add_property" method="post" action="#">
<div class="card-body">
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="options1" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div> <!-- /.first_row -->
<div class="sec-row form-group ml-3" style="display:none">
<label for="">Wanted For</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options2" id="wf-buy" autocomplete="off"> Buy
</label>
<label class="btn bg-olive">
<input type="radio" name="options2" id="wf-rent" autocomplete="off"> Rent
</label>
</div>
</div>
<div class="third-row form-group">
<label for="">Property Type</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options3" id="homes" autocomplete="off">Homes
</label>
<label class="btn bg-olive">
<input type="radio" name="options3" id="plots" autocomplete="off">Plots
</label>
<label class="btn bg-olive">
<input type="radio" name="options3" id="commercial" autocomplete="off">commercial
</label>
</div>
</div>
</div>
</form>
but the issue is I am not able to get active value when selecting certain radio button if I use data-toggle="buttons" in divs it works but js doesn't work that way. I need to make 2 or more lines of different radio buttons where they appear when some specific button is selected.
Use this code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form role="form" id="add_property" method="post" action="#">
<div class="card-body">
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="options1" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div> <!-- /.first_row -->
<div class="sec-row form-group ml-3" style="display:none">
<label for="">Wanted For</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn bg-olive">
<input type="radio" name="options4" id="wf-buy" autocomplete="off"> Buy
</label>
<label class="btn bg-olive">
<input type="radio" name="options5" id="wf-rent" autocomplete="off"> Rent
</label>
</div>
</div>
<div class="third-row form-group">
<label for="">Property Type</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options6" id="homes" autocomplete="off">Homes
</label>
<label class="btn bg-olive">
<input type="radio" name="options7" id="plots" autocomplete="off">Plots
</label>
<label class="btn bg-olive">
<input type="radio" name="options8" id="commercial" autocomplete="off">commercial
</label>
</div>
</div>
</div>
</form>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var radio_value=$(this).attr('id');
if(radio_value == 'wanted') {
$('.sec-row').show();
}else {
$('.sec-row').hide();
}
});
});
</script>
</html>
Use common name in radio button and pass value attribute too.
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="purpose" value="forSale" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="purpose" value="rent" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="purpose" value="wanted" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div>
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var value = $("input[name='purpose']:checked").val();
if(value == 'wanted') {
$('.sec-row').show();
}
else {
$('.sec-row').hide();
}
});
});
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.
I am new to angular. When I try validate the form ng-hide is not removed from ng-show. Can some one help me to sort out this issue?
Thanks in advance.
`
<div class="panel panel-default">
<div class="panel-body">
<h3>Add Language</h3>
<form name="LanguageAddForm" ng-controller="LanguageAddController" class="form-horizontal" method="post" ng-submit="submitLanguageAddForm()" novalidate >
<div class="panel-body">
<div class="form-group" ng-class="{ 'has-error' : LanguageAddForm.name.$invalid && !LanguageAddForm.name.$pristine }">
<label class="col-md-3 control-label">Language Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="language.name" id="lang-name" ng-model="language.name" required />
<p ng-show="LanguageAddForm.name.$invalid">Please enter a valid Topic</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Status:</label>
<div class="col-md-9">
<div class="radio" ng-init="language.status=1">
<label>
<input type="radio" name="status" id="status" ng-model="language.status" ng-value="1" >Active</label>
<label>
<input type="radio" name="status" id="status" ng-model="language.status" ng-value="0" >
Not Active
</label>
</div>
</div>
</div>
<div class="btn-group pull-right">
<button class="btn btn-primary" type="button" onclick="history.back(-1)" >Cancel</button>
<button class="btn btn-primary" type="submit" ng-disabled="LanguageAddForm.$invalid" >Submit</button>
</div>
</div>
</form>
</div>
</div>
`
You can use validation message in that way.
<input type="text" class="form-control" name="language.name" id="lang-name" ng-model="language.name" ng-pattern="" required/>
<span ng-show="form_name.language.name.$error.pattern">please enter valid value</span>
for more info read this Angular validation doc