Develop Reference

Disable Required validation on some specific input fields if they are hidden with select tag

Hi guys can you help me solve this i used display:none to hide some input fields and display them with a select tag, if it's on a specific country, so when i tried submitting the form it keeps asking the hidden input field to be filled whereas they are hidden with select tag, i want this specific input field to be disable if hidden, then enable when show with required, so if input is shown enable required else disable required if input is hidden
<form action="d.php" method="POST">
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
<input id="first" name="first" placeholder="first" value="" required><div> </div>
<input id="second" name="second" placeholder="second " value="" required><div> </div>
<input id="third" style="display:none;" placeholder="third" name="third" value="" required><div> </div>
<input id="forth" style="display:none;" placeholder="forth" name="forth" value="" required><div> </div>
<input type="submit" value="submit">
</form>
<script type="text/javascript">
function showDiv(select){
if(select.value== "United States"){
document.getElementById('third').style.display = "block";
} else{
document.getElementById('third').style.display = "none";
}
if(select.value== "United kingdom"){
document.getElementById('forth').style.display = "block";
} else{
document.getElementById('forth').style.display = "none";
}
}
</script>
and also the space between the "second" and the "third" is what i want as the space between the "second" and the "forth" and any other fifth and six if i decided to add to the text field, i want hidden input field to be on same line
second and third
https://i.ibb.co/dQcXS2x/1.png
second and forth
https://i.ibb.co/c11VBfc/2.png

You may set the required attribute for such inputs, like this:
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
Something like this:
(function() {
var selTest = document.getElementById("test");
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
var forth = document.getElementById("forth");
selTest.onchange = function() {
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
};
}());
<form action="d.php" method="POST">
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
<input id="first" name="first" placeholder="first" value="" required>
<div> </div>
<input id="second" name="second" placeholder="second " value="" required>
<div> </div>
<input id="third" style="display: none;" placeholder="third" name="third" value="" required>
<div> </div>
<input id="forth" style="display: none;" placeholder="forth" name="forth" value="" required>
<div> </div>
<input type="submit" value="submit">
</form>
Update:
With div and CSS3 styles.
(function() {
var selTest = document.getElementById("test");
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
var forth = document.getElementById("forth");
selTest.onchange = function() {
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
};
}());
form {
border: #ccc solid 1px;
}
form div {
margin: 1em;
}
<form action="d.php" method="POST">
<div>
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
</div>
<div>
<input id="first" name="first" placeholder="first" value="" required>
</div>
<div>
<input id="second" name="second" placeholder="second " value="" required>
</div>
<div>
<input id="third" style="display: none;" placeholder="third" name="third" value="" required>
</div>
<div>
<input id="forth" style="display: none;" placeholder="forth" name="forth" value="" required>
</div>
<div>
<input type="submit" value="submit">
</div>
</form>

enabled submit button if radio button field data and other field data found using jquery

I have few fields on this code snippet. Here I have radio button If Field_One is checked show mentioned input field (country select, first name, last name, mobile, email, trans id) same like if Field_Two is checked show mentioned field (reference no, id no and trans id)
Here Trans ID. First Name, Last Name is mandotory for both radio button and its a required field. But I have added few required field without last name.
And Field_Two radio field will show field like reference id and id no. I want if only one field is required field and if only one field is filled up then its ok from both reference id and id no.
But My code is not working properly See the below snippet
One thing if First Country is Africa then show another Dropdown box with Country2 but its also required when Africa is selected but Africa not selected its not required.
$(document).ready(function () {
function make_required_inputs(el) {
let value = el.val();
let div = $('div.' + value);
$('input[required]').removeAttr('required');
div.find('input.required').attr('required', true);
$('input[name="trxid"]').attr('required', true);
}
function validation() {
let valid = true;
$.each($('input[required]'), function () {
if ($(this).val() == '') valid = false;
});
if (valid) {
jQuery('#button1').attr('disabled', false);
} else {
jQuery('#button1').attr('disabled', true);
}
}
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide();
$("#country").show();
}
if ($(this).attr("value") == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide();
$("#country").hide();
}
validation();
});
let checked = $('input[name="myfield"]:checked');
let value_checked = checked.attr("value");
if (value_checked == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide();
}else if (value_checked == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide();
}
$('input[type="radio"]')
make_required_inputs($('input[name="myfield"]:checked'));
$('input[name="myfield"]').on('change', function () {
make_required_inputs($(this));
validation();
});
$('input').keyup(function (e) {
validation();
});
jQuery("#country").change(function(){
jQuery(this).find("option:selected").each(function(){
var optionValue = jQuery(this).attr("value");
if(optionValue=='za'){
jQuery("#country2").show();
} else{
jQuery("#country2").hide();
}
});
}).change();
jQuery("#country2").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myfield" value="Field_One" checked="true" /> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two
<br><br>
<select name="country" class="required" id="country">
<option>Select</option>
<option value="us">US</option>
<option value="uk">UK</option>
<option value="za">Africa</option>
</select>
<br><br>
<select name="country2" class="required" id="country2">
<option>Select</option>
<option value="eg">Egypt</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
<option value="za">South Africa</option>
</select>
<br><br>
<input type="text" name="first_name" class="required" placeholder="First Name" />
<br><br>
<input type="text" name="last_name" placeholder="Last Name"/>
<br><br>
<div class="Field_One">
<input type="text" name="mobile_no" placeholder="Mobile no"/>
<br><br>
<input type="text" class="required" name="email" placeholder="Email"/>
</div>
<br>
<div class="Field_Two">
<input type="text" name="reference_no" class="required" placeholder="Reference no" /><br><br>
<input type="text" name="id_no" class="required" placeholder="ID no" />
</div><br>
<input type="text" name="trxid" class="required" placeholder="Trans ID" />
<input type="submit" id="button1" value="Submit" disabled/>

Update:
$(document).ready(function () {
function validation() {
let valid = true;
$.each($('input[required]:not([name="reference_no"],[name="id_no"]),select[required]'), function () {
if ($(this).val() == '') valid = false;
});
let one = 0;
if ($('input[one="true"][required]').length == 0) {
one = 1;
} else {
one = 0;
$.each($('input[one="true"][required]'), function () {
if ($(this).val() !== '') one++;
});
}
if (valid && one > 0) {
jQuery('#button1').prop('disabled', false);
} else {
jQuery('#button1').prop('disabled', true);
}
}
function required(value) {
$('input.required,select.required').prop('required', true);
if (value == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide().find('input,select').prop('required', false);
$("#country").show().addClass('required').prop('required', true);
}
if (value == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide().find('input,select').prop('required', false);
$("#country").hide().removeClass('required').prop('required', false);
jQuery("#country2").hide().removeClass('required').prop('required', false);
}
validation();
}
$('input[type="radio"]').click(function () {
required($(this).val());
});
let value_checked = $('input[name="myfield"]:checked').attr("value");
required(value_checked);
$('select,input').on('change keyup', function () {
validation();
});
jQuery("#country").change(function () {
var optionValue = jQuery(this).find("option:selected").attr("value");
if (optionValue == 'za') {
jQuery("#country2").show().addClass('required').prop('required', true);;
} else {
jQuery("#country2").hide().removeClass('required').prop('required', false);;
}
validation();
}).change();
jQuery("#country2").hide().removeClass('required').prop('required', false);
});
let valid2 = true;
$.each($('#domain_name,select[required]'), function () { if ($(this).val() == '') valid2 = false; }); if (valid2) { jQuery('#domsBtn').prop('disabled', false); } else { jQuery('#domsBtn').prop('disabled', true); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myfield" value="Field_One" checked="true" /> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two
<br><br>
<select name="country" class="required" id="country">
<option value="">Select</option>
<option value="us">US</option>
<option value="uk">UK</option>
<option value="za">Africa</option>
</select>
<select name="country2" class="required" id="country2">
<option value="">Select</option>
<option value="eg">Egypt</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
<option value="za">South Africa</option>
</select>
<br><br>
<input type="text" name="first_name" class="required" placeholder="First Name" />
<br><br>
<input type="submit" id="firstCheck" value="First Name Check" disabled />
<br><br>
<input type="text" name="last_name" placeholder="Last Name" />
<br><br>
<div class="Field_One">
<input type="text" name="mobile_no" placeholder="Mobile no" />
<br><br>
<input type="text" class="required" name="email" placeholder="Email" />
</div>
<br>
<div class="Field_Two">
<input type="text" name="reference_no" one="true" class="required" placeholder="Reference no" /><br><br>
<input type="text" name="id_no" one="true" class="required" placeholder="ID no" />
</div><br>
<input type="text" name="trxid" class="required" placeholder="Trans ID" />
<input type="submit" id="button1" value="Submit" disabled />

javascript update form field by multiple option values

First of all, im new at this. I want to make a simple form to calculate a volume of right rectangular prism.
If the user select option custom, then user can customize the length(custom_panjang), width (custom_lebar) and height(custom_tinggi).
But there is other option without customize (10x10x5),etc.
I've found the solution to calculate the result from the customize option. But how can i calculate the other option (without calculate).
function pilihUkuran() {
var custom = document.getElementById("ukuran");
if (custom.value == "30x30x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
} else if (custom.value == "10x10x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
} else if (custom.value == "20x20x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
} else
document.getElementById("customukuran1").style.visibility = "visible";
}
function mult(pj, lb, tg) {
var isipj = pj;
var isilb = lb;
var isitg = tg;
var hasil = isipj * isilb * isitg;
document.getElementById('rupiah').value = hasil;
}
<div>
<label class="col-sm-2 mb-3"> Ukuran</label>
<select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
<option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
<option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
<option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
<option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
</select>
</div>
<div id="customukuran1" style="visibility: hidden;">
<select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
<!-- MENDAPATKAN VARIABEL P x L x T -->
<input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">
<input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">
<input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">
</select><br>
</div>
<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">
Or you can see the demo right here
https://jsfiddle.net/aurj74nq/
Please help me, thank you.

Call the mult when the value changes in the select. Also, call pilihUkuran once at the end so that the function will be called for the initial value of the select. If you don't want this, then you can omit it.
function pilihUkuran() {
var custom = document.getElementById("ukuran");
if (custom.value == "30x30x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
mult(30, 30, 5)
} else if (custom.value == "10x10x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
mult(10, 10, 5)
} else if (custom.value == "20x20x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
mult(20, 20, 5)
} else
document.getElementById("customukuran1").style.visibility = "visible";
}
function mult(pj, lb, tg) {
var isipj = pj;
var isilb = lb;
var isitg = tg;
var hasil = isipj * isilb * isitg;
document.getElementById('rupiah').value = hasil;
}
pilihUkuran(); // Optional
<div>
<label class="col-sm-2 mb-3"> Ukuran</label>
<select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
<option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
<option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
<option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
<option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
</select>
</div>
<div id="customukuran1" style="visibility: hidden;">
<select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
<!-- MENDAPATKAN VARIABEL P x L x T -->
<input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">
<input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">
<input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">
</select><br>
</div>
<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">

How to use different attribute on change the second select option

I'm trying to change the value of my input box by changing two different select options.
The first select box is product_type with two different data attributes on the options: data-price and data-price_c.
The second Select box pay_type is to selecting between data-price or data-price_c, to update the value of lprice.
This is what I've tried:
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var selected_type = pt.options[pt.selectedIndex];
sp.onchange = function(){
var selected = sp.options[sp.selectedIndex];
if (selected_type === 1){
lp.value = selected.getAttribute('data-price');
} else {
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
};
sp.onchange();
count.onchange = function(){
fp.value = lp.value * count.value;
}
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" onchange="update();">
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>

I hope I understated you correctly what needs to be done from code and explanation:
Your first problem was that you had your selected_type outside of you onchange function so it wasn't getting the changed options onchange.
Second is that you where trying to compare values 1 & 2 with element without actually extracting those values from element (missing .value on selected_type)
I assumed you will need to update the values on your Pay type change too as well as Select Product, so there is nit trick to wrap both HTML selects into one div in this case div id="wrapper" and that will listen on both selects and call function if any of them are changed. So now you call it on wrapper.onchange.
I would also advise to put your calculation fp.value = lp.value * count.value; inside this function to update total price on change of any of those elements so I wrapped your Count: into wrapper div.
Hope this helps.
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var wrapper=document.getElementById('wrapper');
wrapper.onchange = function(){
var selected = sp.options[sp.selectedIndex];
var selected_type = pt.options[pt.selectedIndex].value;
if (selected_type === "1"){
lp.value = selected.getAttribute('data-price');
}
if (selected_type === "2"){
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
fp.value = lp.value * count.value;
};
wrapper.onchange();
<div id="wrapper">
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" >
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>

How to change text based upon select id and radio name

I am bit lost over here.
I am trying to change the content of the id #total to "not eligible", if the user selects option in "countries" where the "data-class" is "false" and selects the radio "value" to "business". So if select is False and radio is business then change the #total to not eligible.
$(document).ready(function() {
$('.countries').change(function() {
var self = $(this).find('option:selected')
$('input:radio[name="service"]').change(
function() {
if ($(this).val() == 'Business' && self.attr("data-class") == 'False') {
return $('#total').text('Not Eligible')
}
}
).change()
}).change()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control countries">
<option value="AUSTRALIA" data-class="False" data-tx_1="63">AUSTRALIA</option>
<option value="USA" data-class="True" data-tx_1="65">USA</option>
<option value="GERMANY" data-class="True" data-tx_1="69">GERMANY</option>
</select>
<br><br>
<label for="id_service_0"><input type="radio" name="service" value="Economy" required id="id_service_0" />Economy</label>
<label for="id_service_1"><input type="radio" name="service" value="Business" required id="id_service_1" />Business</label>
<label for="id_service_2"><input type="radio" name="service" value="First" required id="id_service_2" />First</label>
<p>Total Price is <span id="total"></span></p>

I believe your code is indeed working. The reason you thinks it is not might be that you're not resetting the label text. See my snippet below. I've just added an "else" condition to your inner if statement.
$(document).ready(function() {
$('.countries').change(function() {
var self = $(this).find('option:selected')
$('input:radio[name="service"]').change(
function() {
if ($(this).val() == 'Business' && self.attr("data-class") == 'False') {
$('#total').text('Not Eligible')
}
else{
$('#total').text('Eligible')
}
}
).change()
}).change()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control countries">
<option value="AUSTRALIA" data-class="False" data-tx_1="63">AUSTRALIA</option>
<option value="USA" data-class="True" data-tx_1="65">USA</option>
<option value="GERMANY" data-class="True" data-tx_1="69">GERMANY</option>
</select>
<input type="radio" name="service" value="Economy" required id="id_service_0" />
<input type="radio" name="service" value="Business" required id="id_service_1" />
<input type="radio" name="service" value="First" required id="id_service_2" />
<p>Total Price is <span id="total"></span></p>

Have 2 separate change event
Check for value and compare
$(document).ready(function() {
$('.countries').change(function() {
var self = $(this).find('option:selected');
var inputvalue = $('input:radio[name="service"]:checked').val();
if (inputvalue == 'Business' && self.attr("data-class") == 'False') {
$('#total').text('Not Eligible')
} else {
$('#total').text('Eligible')
}
}).change()
$('input:radio[name="service"]').change(function() {
var self = $('.countries').find('option:selected');
var inputvalue = $('input:radio[name="service"]:checked').val();
if (inputvalue == 'Business' && self.attr("data-class") == 'False') {
$('#total').text('Not Eligible')
} else {
$('#total').text('Eligible')
}
}).change()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control countries">
<option value="AUSTRALIA" data-class="False" data-tx_1="63">AUSTRALIA</option>
<option value="USA" data-class="True" data-tx_1="65">USA</option>
<option value="GERMANY" data-class="True" data-tx_1="69">GERMANY</option>
</select>
<input type="radio" name="service" value="Economy" required id="id_service_0" />Economy
<input type="radio" name="service" value="Business" required id="id_service_1" />Business
<input type="radio" name="service" value="First" required id="id_service_2" />First
<p>Total Price is <span id="total"></span></p>