I have a html select element with multiple options, when selected javascript will display specific input field(s). In these fields I have javascript function that changes comma (,) to dot (.)
The problem is, only input field with id #size will work, when others are selected, nothing changes. I'm using jQuery.
Here's full code in JSFiddle
<select id="switch" name="switch">
<option value="">Select...</option>
<option value="size">Size</option>
<option value="weight">Weight</option>
<option value="dimensions">Dimensions</option>
</select>
<div class="switch-body">
<!-- javascript content goes here -->
</div>
Javascript:
$(document).ready(function() {
$("#switch").change(function() {
//if selected option is size
if ($(this).val() == "size") {
$(".switch-body").html('<input type="text" id="size" placeholder="Product Size">');
}
//if selected option is weight
else if ($(this).val() == "weight") {
$(".switch-body").html('<input type="text" id="weight" placeholder="Product Weight">');
}
//if selected option is weight
else if ($(this).val() == "dimensions") {
$(".switch-body").html(`
<input type="text" id="height" placeholder="Product Height">
<input type="text" id="width" placeholder="Product Width">
<input type="text" id="length" placeholder="Product Length">
`);
}
//if selected option is none
else if ($(this).val() == "") {
$(".switch-body").html("");
}
});
//replaces comma with dot (here is the problem)
$(".switch-body").keyup(function(){
$("#size").val($("#size").val().replace(/,/g, '.'));
$("#weight").val($("#weight").val().replace(/,/g, '.'));
$("#height").val($("#height").val().replace(/,/g, '.'));
$("#width").val($("#width").val().replace(/,/g, '.'));
$("#length").val($("#length").val().replace(/,/g, '.'));
});
});
The replace function on other input fields outside this javascript code works just fine.
The problem is because your replace() logic is attempting to work on undefined values, where the fields don't yet exist in the DOM. It only appears to work for #size because it's first in the list. If you check the console after it 'works' you'll see that the replacement in #weight is causing an error.
To fix this, put a common class on all the input elements, then give a function to val() which returns the new value to update the field with based on its current one, like this:
$(".switch-body").keyup(function() {
$(".no-comma").val(function(i, v) {
return v.replace(/,/g, '.');
});
});
$(document).ready(function() {
$("#switch").change(function() {
//if selected option is size
if ($(this).val() == "size") {
$(".switch-body").html('<input type="text" id="size" placeholder="Product Size" class="no-comma">');
}
//if selected option is weight
else if ($(this).val() == "weight") {
$(".switch-body").html('<input type="text" id="weight" placeholder="Product Weight" class="no-comma">');
}
//if selected option is weight
else if ($(this).val() == "dimensions") {
$(".switch-body").html(`
<input type="text" id="height" placeholder="Product Height" class="no-comma">
<input type="text" id="width" placeholder="Product Width" class="no-comma">
<input type="text" id="length" placeholder="Product Length" class="no-comma">`);
}
//if selected option is none
else if ($(this).val() == "") {
$(".switch-body").html("");
}
});
//replaces comma with dot (here is the problem)
$(".switch-body").keyup(function() {
$(".no-comma").val(function(i, v) {
return v.replace(/,/g, '.');
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="type">Type</label>
<br>
<select id="switch" class="custom-select" name="switch">
<option value="">Select...</option>
<option value="size">Size</option>
<option value="weight">Weight</option>
<option value="dimensions">Dimensions</option>
</select>
</div>
<div class="form-group switch-body">
<!-- content here -->
</div>
The first thing to do is to check your console. The code is failing because certain of the elements that you are trying to replace on are undefined, because you create and destroy the HTML elements each time you change the selection. A better way to do this would be to hide and show the elements.
Sample code:
<div class="form-group">
<label for="type">Type</label>
<br>
<select id="switch" class="custom-select" name="switch">
<option value="">Select...</option>
<option value="size">Size</option>
<option value="weight">Weight</option>
<option value="dimensions">Dimensions</option>
</select>
</div>
<div class="form-group switch-body">
<div class="show-size">
<input type="text" id="size" placeholder="Product Size">
</div>
<div class="show-weight">
<input type="text" id="weight" placeholder="Product Weight">
</div>
<div class="show-dimensions">
<input type="text" id="height" placeholder="Product Height">
<input type="text" id="width" placeholder="Product Width">
<input type="text" id="length" placeholder="Product Length">
</div>
</div>
$(document).ready(function() {
$(".switch-body").children().each(function() {
$(this).hide();
});
$("#switch").change(function() {
$(".switch-body").children().each(function() {
$(this).hide();
});
//if selected option is size
if ($(this).val() == "size") {
$(".show-size").show();
}
//if selected option is weight
else if ($(this).val() == "weight") {
$(".show-weight").show();
}
//if selected option is weight
else if ($(this).val() == "dimensions") {
$(".show-dimensions").show();
}
});
//replaces comma with dot (here is the problem)
$(".switch-body").keyup(function(){
$("#size").val($("#size").val().replace(/,/g, '.'));
$("#weight").val($("#weight").val().replace(/,/g, '.'));
$("#height").val($("#height").val().replace(/,/g, '.'));
$("#width").val($("#width").val().replace(/,/g, '.'));
$("#length").val($("#length").val().replace(/,/g, '.'));
});
});
Code is in this JS Fiddle.
Related
I'm trying to input something into a text field based on an option selected from a dropdown, using .val(), but it is not working.
$('#addressee_type').on('change', function() {
var type = $("select#addressee_type option:selected").attr('value');
// alert(type);
if (type == 'I') {
$('#name').attr('required', true).val('insured')
} else if (type == 'A') {
$('#name').attr('required', true).val('third party adv')
} else if (type == 'C') {
$('#name').attr('required', true).val('third party')
} else {
$('#name').attr('required', true).val('')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<label class="required">Addressee type</label>
<select class="form-control chosen" id="addressee_type" name="addressee_type" required>
<option value="" selected>Please select Addressee type</option>
<option value="I">Insured</option>
<option value="A">Third Party Advocate</option>
<option value="C">Third Party Claimant</option>
</select>
</div>
<div class="col-sm-4">
<label class='required'>Addressee Name</label>
<input class="form-control" readonly="true" id="name" type="text" name="name">
</div>
I added the attr() later on from a solution I found, but it still didn't solve the error.
Does anyone have an idea?
Hello i would like to add function to my form when i select one option then some inputs of my form are disabled i tried to do this in jquery but something is not working.Could u help me wit this?
There is a example form:
<div class="col-4">
<label>Enabled </label>
<select name="stato" id="stato" class="form-control">
<option value="Text1">Text1</option>
<option value="Text2">Text2</option>
<option value="Text3">Text3</option>
<option value="Text4">Text4</option>
</select>
</div>
<div class="col-4" >
<label>Disabled when choose option in select</label>
<input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
</div>
and function in jquery
$(function() {
$('#data_consegna').prop('disabled', true);
$('#stato option').each(function() {
if ($(this).is('selected')) {
$('#data_consegna').prop('enabled', true);
} else {
$('#data_consegna').prop('enabled', false);
}
});
});
enter code here
$(function() {
//Triggering change event handler on element #stato
$('#stato').change(function() {
var value = $(this).val(); //Getting selected value from #stato
if (value == "") {
$('.common_disable').prop('disabled', false); //If value is empty then disable another field
} else {
$('.common_disable').prop('disabled', true); //Else enable another field
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-4">
<label>Enabled </label>
<select name="stato" id="stato" class="form-control">
<option value="">Select One</option>
<option value="Text1">Text1</option>
<option value="Text2">Text2</option>
<option value="Text3">Text3</option>
<option value="Text4">Text4</option>
</select>
</div>
<div class="col-4" >
<label>Disabled when choose option in select</label><br>
<input id="data_consegna" type="text" class="form-control common_disable" name="data_consegna" placeholder="Data Consegna" /><br>
<input id="data_consegna2" type="text" class="form-control common_disable" name="data_consegna2" placeholder="Data Consegna2" /><br>
<input id="data_consegna3" type="text" class="form-control common_disable" name="data_consegna3" placeholder="Data Consegna3" /><br>
</div>
Please check above solution. It will enable input box at initial level. when you select one value, then it will disable input box.
I'm creating a form and I made a validation so it has a field is required text popping up when you click the submit button.
It works pretty well but, it has 1 problem. When it pops up, and I select an option from the select tag, the field is required text doesn't hide automatically, but when it's an input text and I type something in it, the text hides automatically.
$('#name').on('change', function() {
if (this.value != "") {
this.removeAttribute("required");
this.required = false;
}
});
function Validate(_id) {
$("#form_validation").validate({
rules: rules,
highlight: function(input) {
$(input).parents('.form-line').addClass('error');
},
unhighlight: function(input) {
$(input).parents('.form-line').removeClass('error');
},
errorPlacement: function(error, element) {
$(element).parents('.form-group').append(error);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
<div class="form-line">
<select class="form-control show-tick" name="name" id="name" required>
<option value="" disabled selected hidden="">-- Please select --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
<div class="form-group form-float" align="center">
<input type="submit" name="insert" class="btn btn-lg large" id="data">
</div>
Have you tried to put the attribute novalidate on the SELECT tag?
Example:
<select class="form-control show-tick" name="name" id="name" required novalidate>
Make sure that you are typing the right selector in this snippet:
$('#elemschool').on('change', function() {
if (this.value != "") {
this.removeAttribute("required");
this.required = false;
}
});
change elemschool to name as the id in the select
<select class="form-control show-tick" name="name" id="name" required>
is equal to name
so basically it will be like below:
$('#name').on('change', function() { // here is the change
if (this.value != "") {
this.removeAttribute("required");
this.required = false;
}
});
I have a textarea element that is not displayed. If the user selects "Other" option in the select element, the textarea should show, but it is not showing with the below code.
The following is my select element :
<select class="form-control" name="feed" id="feed" value="" style="width:540px">
<option selected="selected" disabled="true">Please select</option>
<!-- <option></option> -->
<option value="Excellent" id="Excellent"> All text is excellent</option>
<option value="Other" id="Other" onclick="showHide(this)"
>Other feedback (free text)</option
>
</select>
The following is my textarea element :
<div class="form-group">
<label for="fb_text"></label>
<textarea
class="form-control"
name="fb_text"
id="fb_text"
rows="5"
placeholder="Describe yourself here..."
value=""
style="width:540px;display:none"
></textarea>
</div>
The following is my JS :
function showHide(elm) {
var Fbtext = document.getElementById("fb_text");
if (document.getElementById("feed").value == "Other") {
Fbtext.classList.remove("hide");
}
}
You can pass value from select using onchangeevent to your function and check if that value is equals to Others if yes display textarea else hide it. Working example :
function showHide(elm) {
if (elm == "Other") {
//display textbox
document.getElementById('fb_text').style.display = "block";
} else {
//hide textbox
document.getElementById('fb_text').style.display = "none";
}
}
<select class="form-control" name="feed" id="feed" value="" onchange="showHide(this.value)" style="width:540px">
<option selected="selected" disabled="true">Please select</option>
<!-- <option></option> -->
<option value="Excellent" id="Excellent"> All text is excellent</option>
<option value="Other" id="Other">Other feedback (free text)</option>
</select>
<div class="form-group">
<label for="fb_text"></label>
<textarea class="form-control" name="fb_text" id="fb_text" rows="5" placeholder="Describe yourself here..." value="" style="width:540px;display:none"></textarea>
</div>
Add change event to the select element, see if the selected option is 'Other', hide the text area else show.
const textareaEle = document.querySelector('textarea');
document.querySelector('select').addEventListener('change', function() {
textareaEle.style.display = (this.value == 'Other') ? 'block' : 'none';
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control" name="feed" id="feed" value="" style="width:540px">
<option selected="selected" disabled="true">Please select</option>
<!-- <option></option> -->
<option value="Excellent" id="Excellent"> All text is excellent</option>
<option value="Other" id="Other">Other feedback (free text)</option>
</select>
<div class="form-group">
<label for="fb_text"></label>
<textarea class="form-control hide" name="fb_text" id="fb_text" rows="5" placeholder="Describe yourself here..." value="" style="width:540px;"></textarea>
</div>
I have not checked but I understand in your code you try to remove a class (hide) that you have not assigned, because you hide the textarea with the attribute style
Please try this example, I understand in your example you use bootstrap, for demonstration I have added hide
const feed = document.querySelector('#feed');
const fbtext = document.querySelector('#fb_text');
feed.addEventListener('change', handleChange);
function handleChange(event) {
const value = event.target.value;
if (value === 'Other') {
fbtext.classList.remove('hide');
return false;
}
fbtext.classList.add('hide');
}
.hide {
display: none;
}
<select
class="form-control"
name="feed"
id="feed"
value=""
style="width:540px"
>
<option selected="selected" disabled="true">Please select</option>
<option value="Excellent" id="Excellent"> Excellent</option>
<option value="Other" id="Other">Other</option>
</select>
<div class="form-group">
<label for="fb_text"></label>
<textarea
class="form-control hide"
name="fb_text"
id="fb_text"
rows="5"
placeholder="Describe yourself here..."
></textarea>
</div>
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;
}