We Keep Coding

Multi step form (no next button) with conditional logic

I'm using a multi-step form from this question and answer on StackOverflow
To add to this form;
1.) how can it work with conditional logic, as in, if the user's input radio first question is to choose ppc or organic, if they select organic then only certain "hidden" divs with "organic" class show, and the PPC related divs don't. But the other neutral hidden divs will show later. I think the problem is they are all hidden already so the first script seems to override the second javascript that looks for "if this... else".
2.)A second problem with the multi-step form without buttons above is you cannot tab to a second or third input text field on the last page. It just blanks out.
<script type='text/javascript'>
$(document).ready(function(){
$('#traffic').on('change', function() {
if ( this.value == 'organic' )
{
$(".org").show();
$(".ppc").hide();
}
else
{
$(".org").hide();
$(".ppc").show();
}
});
});
</script>
<script type="text/javascript">
document.querySelector("form").onchange = function(e) {
var currentFormPage = e.target.parentElement.parentElement;
console.log(e.target.name + ": " + e.target.value);
if(currentFormPage.nextElementSibling) {
currentFormPage.classList.add("hidden");
currentFormPage.nextElementSibling.classList.remove("hidden");
}
}
</script>
<form>
<h2>Free Google Ads Audit!</h2>
<div>
<h4>Do you want Organic or PPC traffic right now?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="traffic" id="traffic" value="" checked></label>
<label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="organic">Organic is the best</label>
<label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="ppc">PPC is better</label>
</div>
<div class="hidden ppc">
<h4>What's your monthly ads budget?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="whats_your_monthly_ads_budget" value="" checked></label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+</label>
</div>
<div class="hidden ppc">
<h4>Have you ever had an Adwords account?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="adwords" value="" checked></label>
<label class="radio-choice"><input type="radio" name="food" id="adwords" value="2-3 years">Yes</label>
<label class="radio-choice"><input type="radio" name="food" id="adwords" value="5 years">No</label>
</div>
<div class="hidden org">
<h4>How much experience do you have?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="experience" value="" checked></label>
<label class="radio-choice"><input type="radio" name="exp" id="experience" value="2-3 years">2-3 years</label>
<label class="radio-choice"><input type="radio" name="exp" id="experience" value="5 years">5 years</label>
</div>
<div class="hidden">
<h4>What are your Goal(s)?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="what_are_your_goals" value="" checked></label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Lead Generation">Lead Generation</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Brand Awareness">Brand Awareness</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Online Sales">Online Sales</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Sign-ups">Sign-ups</label>
</div>
<div class="hidden">
<h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Company Email">
<input type="button" name="email" value="Download">
</div>
</form>

This should work how you want it. Unfortunately, jquery invokes the first id as they're unique so if you want multiple elements to do the same functionality you'll have to make them all classes.
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
.hidden {
display: none;
}
</style>
<script>
$(document).ready(function() {
$('.traffic').on('change', function() {
if (this.value === "organic") {
$(".org").show();
$(".ppc").hide();
} else {
$(".org").hide();
$(".ppc").show();
}
});
});
</script>
</head>
<body>
<form>
<h2>Free Google Ads Audit!</h2>
<div>
<h4>Do you want Organic or PPC traffic right now?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="traffic" id="traffic" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="traffic" class="traffic" value="organic">Organic is the best </label>
<label class="radio-choice">
<input type="radio" name="traffic" class="traffic" value="ppc">PPC is better </label>
</div>
<div class="hidden ppc">
<h4>What's your monthly ads budget?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="whats_your_monthly_ads_budget" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+ </label>
</div>
<div class="hidden ppc">
<h4>Have you ever had an Adwords account?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="adwords" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="food" id="adwords" value="2-3 years">Yes </label>
<label class="radio-choice">
<input type="radio" name="food" id="adwords" value="5 years">No </label>
</div>
<div class="hidden org">
<h4>How much experience do you have?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="experience" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="exp" id="experience" value="2-3 years">2-3 years </label>
<label class="radio-choice">
<input type="radio" name="exp" id="experience" value="5 years">5 years </label>
</div>
<div class="hidden">
<h4>What are your Goal(s)?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="what_are_your_goals" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Lead Generation">Lead Generation </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Brand Awareness">Brand Awareness </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Online Sales">Online Sales </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Sign-ups">Sign-ups </label>
</div>
<div class="hidden">
<h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Company Email">
<input type="button" name="email" value="Download">
</div>
</form>
</body>
</html>

How to hide input fields of a form which are not checked and display only checked ones

I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});

If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();

Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>

try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});

Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>

Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>

how to multicheckbox for 1 enabled textbox

i want if cuti tahunan not checked then textbox not show in cuti khusus dan cuti sakit
$('#cutiKhusus').change(function(){
$("#textCutiKhusus").prop("disabled", !$(this).is(':checked'));
});
$('#cutiSakit').change(function(){
$("#textCutiSakit").prop("disabled", !$(this).is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label">Jenis Cuti</label>
<div class="col-sm-8">
<div class="checkbox">
<label>
<input id="cutitahunan" type="checkbox" id="" name="C_CUTI_TAHUNAN" value="Y"/>
Cuti Tahunan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cutiSakit" name="C_CUTI_SAKIT" value="Y"/>
Cuti Sakit
<input id="textCutiSakit" type="number" data-tt='tooltip' data-placement='top' title='Isikan jumlah hari 'required name="I_JML_SAKIT" class="" style="width: 50px;" disabled >
Hari
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cutiKhusus" name="C_CUTI_KHUSUS" value="Y"/>
Cuti Khusus
</label>
<input id="textCutiKhusus" type="number" data-tt='tooltip' data-placement='top' title='Isikan jumlah hari ' required name="I_JML_KHUSUS" class="" style="width: 50px;" disabled >
Hari
</div>
</div>
</div>
How can I solve this?
fdasfadfasfasdf fads fads fads fa fasd fasd fasdf

Try below code.
$('#cutitahunan').change(function() {
if ($(this).is(':checked')) {
$('.text').removeClass('hide');
} else {
$('.text').addClass('hide');
}
})
$('#cutiKhusus').change(function() {
$("#textCutiKhusus").prop("disabled", !$(this).is(':checked'));
});
$('#cutiSakit').change(function() {
$("#textCutiSakit").prop("disabled", !$(this).is(':checked'));
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label">Jenis Cuti</label>
<div class="col-sm-8">
<div class="checkbox">
<label>
<input id="cutitahunan" type="checkbox" id="" name="C_CUTI_TAHUNAN" value="Y"/>
Cuti Tahunan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cutiSakit" name="C_CUTI_SAKIT" value="Y"/>
Cuti Sakit
<input id="textCutiSakit" type="number" data-tt='tooltip' data-placement='top' title='Isikan jumlah hari 'required name="I_JML_SAKIT" class="hide text" style="width: 50px;" disabled >
Hari
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cutiKhusus" name="C_CUTI_KHUSUS" value="Y"/>
Cuti Khusus
</label>
<input id="textCutiKhusus" type="number" data-tt='tooltip' data-placement='top' title='Isikan jumlah hari ' required name="I_JML_KHUSUS" class="hide text" style="width: 50px;" disabled >
Hari
</div>
</div>
</div>

uncheck selected checkbox when one of the checkbox option has been selected

I have 2 groups of checkbox options on same page. below is the code.
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" />
</label>
</div>
Now,
User can select first 3 check boxes but clicking the 4th (last) one should
select the 4th (last) one and deselect all other of the set. Same should
happen for all checkbox sets.
Example : User can select A,B,C checkbox at a same time but when he checks D
all the above selected checkboxes should get unselected. Similarly for E,F,G
and H. I hope I am clear now.
Please help me on this. I hope I am clear, if not please do let me know

The below code section should work according to your requirement
$(document).ready(function() {
$('.checkbox1').on('click', function() {
var last_chekbox1 = $('.checkbox1:last');
if (last_chekbox1.is(':checked')) {
$('.checkbox1').prop('checked', false);
$(this).prop('checked', true);
}
});
$('.checkbox2').on('click', function(e) {
var last_chekbox2 = $('.checkbox2:last');
if (last_chekbox2.is(':checked')) {
$('.checkbox2').prop('checked', false);
$(this).prop('checked', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" class="checkbox1" /> A
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" class="checkbox1" /> B
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" class="checkbox1" /> C
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" class="checkbox1" /> D
</label>
</div>
<hr>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" class="checkbox2" /> E
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" class="checkbox2" /> F
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" class="checkbox2" /> G
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" class="checkbox2" /> H
</label>
</div>

$('checkbox1').on('click'function(){
$('checkbox').attr('checked',false)
$(this).attr('checked',true)
})
try something like this

update field on radio select

In a form I have a set of radio buttons with fixed donation amount and another field when a user can enter an amount of choice. For simplicity whilst processing the form I want a functionality where whatever is selected populates in the other field. I have the HTML/JS below:
$("input[id^='radio']").click(function() {
$("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-2" value="15.00">
<label for="amount-2">$15</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-3">$20</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-4">$25</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10"></div>
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">
I have also tried
<input type="radio" name="selamount" id="amount-3" value="20.00" onclick="document.getElementById('otheramount').value = this.value">
But when the first one changes it does not change anymore on subsequent clicks.

None of your IDs begin with "radio," which is what your [id^='radio'] selector is trying to match.
They begin with "amount" instead, so you should use:
$("input[id^='amount']").click(...
Also, here's a trick you can use with labels.
Instead of doing:
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
… you can put the input inside the label and avoid using the for attribute altogether:
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
Working Snippet
$("input[id^='amount']").click(function() { //CHANGE THIS
$("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-2" value="15.00">
$15
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$20
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$25
</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10">
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">