How to change text based upon select id and radio name

How to change text based upon select id and radio name - javascript

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>

Related

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 />

jQuery - Variable Outside Selectors / Functions - Sum Variables

I think I am close but I am missing something. Not doing something right.
Here is the link to the JSFiddle - JSFiddle Link
These all work individually but I need part one and part two to be evaluated together to determine the value of part 3's total.
My part 1 needed to fit multiple conditions.
My part 2 result stays 0 and part 3 sum never happens.
If I don't define the variables, part 1 and part 2 work.
Thank you very much in advance.
<p>
Part 1
</p>
<label for="pt3c-pt2-q1-cpr_$DropDownChoice">Class 1</label>
<select id="pt3c-pt2-q1-cpr_$DropDownChoice" title="pt3c-pt2-q1-cpr" class="RadioText">
<option value="False" selected="selected">False</option>
<option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-dot_$DropDownChoice">Class 2</label>
<select id="pt3c-pt2-q1-dot_$DropDownChoice" title="pt3c-pt2-q1-dot" class="RadioText">
<option value="False" selected="selected">False</option>
<option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-lto_$DropDownChoice">Class 3</label>
<select id="pt3c-pt2-q1-lto_$DropDownChoice" title="pt3c-pt2-q1-lto" class="RadioText">
<option value="False" selected="selected">False</option>
<option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-other_$TextField">Class 4</label>
<input type="text" value="" maxlength="255" id="pt3c-pt2-q1-other_$TextField" title="pt3c-pt2-q1-other" class="long"><br>
<label for="pt3c-pt2-q1b_$TextField">Result</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-q1b_$TextField" title="pt3c-pt2-q1b" class="long"><br>
<p>
Part 2
</p>
<label for="pt3c-pt2-q2_$DropDownChoice">Part 2 : Question</label>
<select id="pt3c-pt2-q2_$DropDownChoice" title="pt3c-pt2-q2" class="RadioText">
<option value="False" selected="selected">False</option>
<option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q2b_$TextField">Part 2 : Result</label>
<input type="text" maxlength="5" id="pt3c-pt2-q2b_$TextField" title="pt3c-pt2-q2b" class="long ">
<p>
Part 3
</p>
<label for="pt3c-pt2-total_$TextField">Total</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-total_$TextField" title="pt3c-pt2-total" class="long">
$(function() {
var pt3cpt2q1b = "0";
var pt3cpt2q2b = "0";
var pt3cpt2total = "0";
$("*[title^=pt3c-pt2]").change(function() {
if ($("select[title='pt3c-pt2-q1-cpr']").val() == "True" ||
$("select[title='pt3c-pt2-q1-dot']").val() == "True" ||
$("select[title='pt3c-pt2-q1-lto']").val() == "True" ||
$("input[title='pt3c-pt2-q1-other']").val().length !== 0) {
var pt3cpt2q1b = "50";
$("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
}
if ($("select[title='pt3c-pt2-q1-cpr']").val() == "False" &&
$("select[title='pt3c-pt2-q1-dot']").val() == "False" &&
$("select[title='pt3c-pt2-q1-lto']").val() == "False" &&
$("input[title='pt3c-pt2-q1-other']").val().length === 0) {
var pt3cpt2q1b = "0";
$("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
} else {}
});
$("select[title='pt3c-pt2-q2']").change(function() {
if ($("select[title='pt3c-pt2-q2']").val() == "True") {
var pt3cpt2q2b = "50";
$("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
}
if ($("select[title='pt3c-pt2-q2']").val() == "False") {
var pt3cpt2q2b = "0";
$("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
} else {}
});
$("*[title^=pt3c-pt2]").change(function() {
pt3cpt2total = parseInt(pt3cpt2q1b) + parseInt(pt3cpt2q2b);
$("input[title='pt3c-pt2-q2b']").val(pt3cpt2total);
});
});

try to update the variables instead of redefining them in the function.To avoid such problems, let is used in the example so it tell you that you are trying to redefine an already defined value instead of just updating the value;
$(function() {
let pt3cpt2q1b = "0";
let pt3cpt2q2b = "0";
let pt3cpt2total = "0";
$("*[title^=pt3c-pt2]").change(function() {
if ($("select[title='pt3c-pt2-q1-cpr']").val() == "True" ||
$("select[title='pt3c-pt2-q1-dot']").val() == "True" ||
$("select[title='pt3c-pt2-q1-lto']").val() == "True" ||
$("input[title='pt3c-pt2-q1-other']").val().length !== 0) {
pt3cpt2q1b = "50";
$("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
}
if ($("select[title='pt3c-pt2-q1-cpr']").val() == "False" &&
$("select[title='pt3c-pt2-q1-dot']").val() == "False" &&
$("select[title='pt3c-pt2-q1-lto']").val() == "False" &&
$("input[title='pt3c-pt2-q1-other']").val().length === 0) {
pt3cpt2q1b = "0";
$("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
} else {}
});
$("select[title='pt3c-pt2-q2']").change(function() {
if ($("select[title='pt3c-pt2-q2']").val() == "True") {
pt3cpt2q2b = "50";
$("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
}
if ($("select[title='pt3c-pt2-q2']").val() == "False") {
pt3cpt2q2b = "0";
$("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
} else {}
});
$("*[title^=pt3c-pt2]").change(function() {
pt3cpt2total = parseInt(pt3cpt2q1b) + parseInt(pt3cpt2q2b);
$("input[title='pt3c-pt2-q2b']").val(pt3cpt2total);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Part 1
</p>
<label for="pt3c-pt2-q1-cpr_$DropDownChoice">Class 1</label>
<select id="pt3c-pt2-q1-cpr_$DropDownChoice" title="pt3c-pt2-q1-cpr" class="RadioText">
<option value="False" selected="selected">False</option>
<option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-dot_$DropDownChoice">Class 2</label>
<select id="pt3c-pt2-q1-dot_$DropDownChoice" title="pt3c-pt2-q1-dot" class="RadioText">
<option value="False" selected="selected">False</option>
<option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-lto_$DropDownChoice">Class 3</label>
<select id="pt3c-pt2-q1-lto_$DropDownChoice" title="pt3c-pt2-q1-lto" class="RadioText">
<option value="False" selected="selected">False</option>
<option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-other_$TextField">Class 4</label>
<input type="text" value="" maxlength="255" id="pt3c-pt2-q1-other_$TextField" title="pt3c-pt2-q1-other" class="long"><br>
<label for="pt3c-pt2-q1b_$TextField">Result</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-q1b_$TextField" title="pt3c-pt2-q1b" class="long"><br>
<p>
Part 2
</p>
<label for="pt3c-pt2-q2_$DropDownChoice">Part 2 : Question</label>
<select id="pt3c-pt2-q2_$DropDownChoice" title="pt3c-pt2-q2" class="RadioText">
<option value="False" selected="selected">False</option>
<option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q2b_$TextField">Part 2 : Result</label>
<input type="text" maxlength="5" id="pt3c-pt2-q2b_$TextField" title="pt3c-pt2-q2b" class="long ">
<p>
Part 3
</p>
<label for="pt3c-pt2-total_$TextField">Total</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-total_$TextField" title="pt3c-pt2-total" class="long">

I can not use two conditions in jQuery

I have a form like this:
<form>
<input type="radio" name="adsType" id="adsType" value="request" />
<input type="radio" name="adsType" id="adsType" value="provide" />
<select name="transactionType" id="transactionType">
<option value="1">Sale</option>
<option value="2">Rent</option>
</select>
<input type="text" name="price" id="price" />
<input type="text" name="min_price" id="price" />
<input type="text" name="max_price" id="max_price" />
<input type="text" name="fare" id="fare" />
<input type="text" name="min_fare" id="min_fare" />
<input type="text" name="max_fare" id="max_fare" />
</form>
I want:
when provide selected and click on Sale display price input only,
when provide selected and click on Rent display fare input only,
when request selected and click on Sale display min_price and max_price inputs,
when request selected and click on Rent display min_fare and max_fare inputs
i am trying for this javascript:
//<![CDATA[
$(function(){
$('input[name=adsType]').change(function () {
if ($(this).val() == 'provide') {
$('select[name=transactionType]').change(function () {
if ($(this).val() == '1') { /* Provide type | Sale type => display 'price' input only */
$('#price').show();
} else {
$('#price').hide();
}
if ($(this).val() == '2') { /* Provide type | Rent type => display 'fare' input only */
$('#fare').show();
} else {
$('#fare').hide();
}
});
}
if ($(this).val() == 'request') {
if ($(this).val() == '1') { /* Request type | Sale type => display 'min_price' and 'max_price' inputs */
$('#min_price').show();
$('#max_price').show();
} else {
$('#min_price').hide();
$('#max_price').hide();
}
if ($(this).val() == '2') { /* Request type | Rent type => display 'min_fare' and 'max_fare' inputs */
$('#min_fare').show();
$('#max_fare').show();
} else {
$('#min_fare').hide();
$('#max_fare').hide();
}
});
}
});
});//]]>
But it not return good result. Please help me to edit this JavaScript code!

I believe something like this may help. See the snippet and comments in the code:
$(function() {
function toggleFields() {
// setup which fields to show in every case
var items = {
provide: {
1: '#price',
2: '#fare'
},
request: {
1: '#min_price, #max_price',
2: '#min_fare, #max_fare'
}
}
// get the selected values
var ad = $('input[name="adsType"]:checked').val(),
tr = $('select[name="transactionType"]').val();
// hide all and show required
$('[id*="price"], [id*="fare"]').hide();
$(items[ad][tr]).show();
}
// handler for changes
$('select[name="transactionType"], input[name="adsType"]').change(toggleFields);
// initial run
toggleFields();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>request <input type="radio" name="adsType" value="request" checked/></label>
<label>provide <input type="radio" name="adsType" value="provide" /></label>
<select name="transactionType" id="transactionType">
<option value="1" selected>Sale</option>
<option value="2">Rent</option>
</select>
<div>
<label id="price">price <input type="text" name="price" /></label>
<label id="min_price">min_price <input type="text" name="min_price" /></label>
<label id="max_price">max_price <input type="text" name="max_price" /></label>
</div>
<div>
<label id="fare">fare <input type="text" name="fare" /></label>
<label id="min_fare">min_fare <input type="text" name="min_fare" /></label>
<label id="max_fare">max_fare <input type="text" name="max_fare" /></label>
</div>
</form>

TRY IT:
$(document).ready(function () {
var radioValue = "request";
var transactionValue = 1;
$('input[name=adsType]').change(function () {
radioValue = $(this).val();
update();
});
$('select[name=transactionType]').change(function () {
transactionValue = parseInt($(this).val(), 10);
update();
});
function update() {
if (radioValue === "provide") {
if (transactionValue === 1) {
$('#price').show();
$('#min_price').hide();
$('#max_price').hide();
$('#fare').hide();
$('#min_fare').hide();
$('#max_fare').hide();
} else {
$('#price').hide();
$('#min_price').hide();
$('#max_price').hide();
$('#fare').show();
$('#min_fare').hide();
$('#max_fare').hide();
}
} else {
if (transactionValue === 1) {
$('#price').hide();
$('#min_price').show();
$('#max_price').show();
$('#fare').hide();
$('#min_fare').hide();
$('#max_fare').hide();
} else {
$('#price').hide();
$('#min_price').hide();
$('#max_price').hide();
$('#fare').hide();
$('#min_fare').show();
$('#max_fare').show();
}
}
}
update();
});
FORM HTML > Please check form id: min_price
<form>
<input type="radio" name="adsType" id="adsType" value="request" checked="checked" />
<input type="radio" name="adsType" id="adsType" value="provide" />
<select name="transactionType" id="transactionType">
<option value="1" selected="selected">Sale</option>
<option value="2">Rent</option>
</select>
<input type="text" name="price" id="price" />
<input type="text" name="min_price" id="min_price" />
<input type="text" name="max_price" id="max_price" />
<input type="text" name="fare" id="fare" />
<input type="text" name="min_fare" id="min_fare" />
<input type="text" name="max_fare" id="max_fare" />
</form>

There is no onchange event for the select box inside the if ($(this).val() == 'request') { of your code.
I have made some changes like adding class all to the inputs #price #fare #max_price #max_fare #min_price #min_fare.
You can go through the code in the below snippet.
//<![CDATA[
$(function() {
$('input[name=adsType]').change(function() {
$('.all').hide();
$('#transactionType').val('');
if ($(this).val() == 'provide') {
$('select[name=transactionType]').change(function() {
$('.all').hide();
if ($(this).val() == '1') { /* Provide type | Sale type => display 'price' input only */
$('#price').show();
}
if ($(this).val() == '2') { /* Provide type | Rent type => display 'fare' input only */
$('#fare').show();
}
});
}
if ($(this).val() == 'request') {
$('select[name=transactionType]').change(function() {
$('.all').hide();
if ($(this).val() == '1') { /* Request type | Sale type => display 'min_price' and 'max_price' inputs */
$('#min_price, #max_price').show();
}
if ($(this).val() == '2') { /* Request type | Rent type => display 'min_fare' and 'max_fare' inputs */
$('#min_fare, #max_fare').show();
}
});
};
});
});
.all {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
request<input type="radio" name="adsType" id="adsType" value="request" /> provide
<input type="radio" name="adsType" id="adsType" value="provide" />
<select name="transactionType" id="transactionType">
<option value="" selected></option>
<option value="1">Sale</option>
<option value="2">Rent</option>
</select>
<input class='all' type="text" name="price" placeholder='price' id="price" />
<input class='all' type="text" name="min_price" placeholder='min_price' id="min_price" />
<input class='all' type="text" name="max_price" placeholder='max_price' id="max_price" />
<input class='all' type="text" name="fare" placeholder='fare' id="fare" />
<input class='all' type="text" name="min_fare" placeholder='min_fare' id="min_fare" />
<input class='all' type="text" name="max_fare" placeholder='max_fare' id="max_fare" />
</form>

How do I enable my form's submit button using jquery?

I have a basic form with some input fields and a dropdown(select field).
Almost all fields have a form of validation. When a field has an error, an error message with the CSS class 'errorText' is displayed next to the field.
By default, my submit button is 'disabled'. I want to remove the 'disabled' attribute from my submit button once all tags with 'errorText' CSS classes are hidden/removed.
my current script just hides all tags with 'errorText' when an error occurs. how do I stop it from doing that and how can I enable my submit button once all fields have been properly enter/validated? Thanks.
EDIT: SOLVED. CODE UPDATED.
// Field Validations
$('#firstName')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$('label[for="firstName"]').addClass('errorText');
$('#errorFName').show();
} else {
$('label[for="firstName"]').removeClass('errorText');
$('#errorFName').hide();
}
});
$('#lastName')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$('label[for="lastName"]').addClass('errorText');
$('#errorLName').show();
} else {
$('label[for="lastName"]').removeClass('errorText');
$('#errorLName').hide();
}
});
$('#state')
.on('blur', function() {
var $this = $(this);
if ($('#state').val() == "") {
$('label[for="state"]').addClass('errorText');
$('#errorState').show();
} else {
$('label[for="state"]').removeClass('errorText');
$('#errorState').hide();
}
});
// Submit Button validation
$('input, select').on('keyup, blur', function() {
if ($('.errorText:visible').length ||
$('#firstName' || '#lastName' || '#state').val() == '' ) {
$('input[type="submit"]').prop('disabled', true);
} else if ($('#firstName').val() != '' &&
$('#lastName').val() != '' &&
$('#state').val() != '' ) {
$('input[type="submit"]').prop('disabled', false);
}
});
.errorText {
color: #c4161c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>
<label for="firstName" class="required">First Name</label>
</div>
<div>
<input type="text" name="firstName" id="firstName" />
</div>
<div class="errorText" id="errorFName" style="display:none;">Please enter a First Name</div>
<br />
<div>
<label for="lastName" class="required">Last Name</label>
</div>
<div>
<input type="text" name="lastName" id="lastName" />
</div>
<div class="errorText" id="errorLName" style="display:none;">Please enter a Last Name</div>
<br />
<div>
<label for="state" class="required">State</label>
</div>
<div>
<select name="state" id="state">
<option value="">Select State</option>
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
<option value="arkansas">Arkansas</option>
<option value="california">California</option>
<option value="etc">etc..</option>
</select>
</div>
<div class="errorText" id="errorState" style="display:none;">Please select a State</div>
<br />
<input type="submit" class="LargeButton" value="Submit Referral" disabled />

If it helps, check this update using data-attribute. We group the label,input,error in a div and handle error message. Also simplified the check valid on input and select element but can be modified.
html
<div>
<label for="firstName" class="required">First Name</label>
<input type="text" name="firstName" id="firstName" />
<span class="errorText" style="display:none;">Please enter a First Name</span>
</div>
<br />
<div>
<label for="lastName" class="required">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<span class="errorText" style="display:none;">Please enter a Last Name</span>
</div>
<br />
<div>
<label for="state" class="required">State</label>
<select name="state" id="state" data-valid="">
<option value="">Select State</option>
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
<option value="arkansas">Arkansas</option>
<option value="california">California</option>
<option value="etc">etc..</option>
</select>
<span class="errorText" style="display:none;">Please select a State</span>
</div>
<br />
<input type="submit" id="submit" class="LargeButton" value="Submit Referral" disabled />
script
$(function() {
$('input,select')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$this.data("valid", 'false');
//find the immediate span with errorText and show it
$this.next("span.errorText").show();
} else {
$this.data("valid", 'true');
$this.next("span.errorText").hide();
}
checkInputs();
});
});
function checkInputs() {
//find all the input and select items where the data attribute valid is present and make an array
var array = $('input,select').map(function() {
return $(this).data("valid");
}).get();
//if there are not empty or false indicating invalid value set submit property to true
if (array.indexOf("") == -1 && array.indexOf("false") == -1) {
$("#submit").prop("disabled", false);
} else {
$("#submit").prop("disabled", true);
}
}
css
.errorText {
color: #c4161c;
display: block;
}

Javascript Form validation not working for select element

So I'm trying to change a select box's style if the value is not changed ie. the user has not selected anything. That yesnoCheck is a function which shows an additional input field if the choice "other" is selected. I don't think it affects this form validation though. This same kind of validation works fine with an input field but it won't work with a select box.
I've also treid selectedIndex == 0 but it doesn't work either.
HTML:
<form name="myForm" method="post" action="" onsubmit="return(validate());">
<label for="lastname">Sukunimesi:</label>
<input type="text" id="lastname" name="lastname" /><br />
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
<input type="submit" value="Submit" />
</form>
JS:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById("yesCheck").selected) {
document.getElementById("ifYes").style.display = "block";
}
else document.getElementById("ifYes").style.display = "none";
}
function validate() {
if (document.myForm.lastname.value.length < 3) {
document.getElementById("lastname").className = "required";
return false;
}
if (document.myForm.car.value == "none") {
document.getElementById("car").className = "required";
return false;
}
alert ("Everything is fine!");
}
</script>

Your code works check your form name and make sure your form exists before the script is run.
function check(){
if (document.myForm.car.value == "none") {
document.getElementById("car").style.border = "1px solid #900";
document.getElementById("car").style.backgroundColor = "#ff9";
return false;
}
}
<form name="myForm">
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
</form>
<button onclick="check()">Run script</button>

So the solution was to delete return false; from the function.

Develop Reference

JavaScript is the programming language of the Web.

How to change text based upon select id and radio name - javascript

Related

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

jQuery - Variable Outside Selectors / Functions - Sum Variables

I can not use two conditions in jQuery

How do I enable my form's submit button using jquery?

Javascript Form validation not working for select element

Categories

Resources