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?
Related
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 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.
I have a simple "select" - show below.
<label>Best way to reach you?</label><br>
<select id="contactMethod">
<option value="wp">Work Phone?</option>
<option value="cp">Personal Cell Phone?</option>
<option value="email">Email?</option>
<option value="Im">Instant Messanger?</option>
</select>
<button onclick="showHidden()">Which way?</button>
the object I wish to show is in the HTML with the following properties:
<label>E-mail Address:</label>
<input id="email" type="text" style='display:none'>
I then have a .js file with the following function.
function showHidden() {
var dropSelection = document.getElementById("contactMethod").value;
console.log(dropSelection)
if(dropSelection == "email") {
document.getElementById("email").style.display = "block";
}
}
I then have the id listed within my CSS as the following:
#email{ display:none; }
The goal is to "show" the email text box when the "email" option is selected from the <select> above.
As of right now, I'm simply printing what was selected, so I can know for sure that I'm getting the right values to run the if statement against. That being said, when I select the email option, it literally flashes the email text box but immediately reverts back to a hidden state.
UPDATED CODE
<label>Best way to reach you?</label><br>
<select onchange="showHidden()" id="contactMethod">
<option value="select">Select...</option>
<option value="email">Email</option>
<option value="phone">Work Phone</option>
<option value="cPhone">Cell Phone</option>
<option value="Im">Instant Messanger</option>
</select>
MODIFIABLE FIELDS
<label id="emailLabel">E-mail Adress:</label>
<input id="email" type="text">
<label id="phoneLabel">Work Phone Number</label>
<input id="phone" type="text">
<label id="cPhoneLabel">Personal Cell Phone Number</label>
<input id="cPhone" type="text">
<label id="IMLabel">Instant Messenger Name</label>
<input id="Im" type="text">
JS
function showHidden() {
var dropSelection = document.getElementById("contactMethod").value;
if(dropSelection == "email") {
document.getElementById("email").style.display = "block";
document.getElementById("emailLabel").style.display = "inline";
}
else if(dropSelection == "phone") {
document.getElementById("phone").style.display = "block";
document.getElementById("phoneLabel").style.display = "inline";
}
else if(dropSelection == "cPhone") {
document.getElementById("cPhone").style.display = "block";
document.getElementById("cPhoneLabel").style.display = "inline";
}
else if(dropSelection == "Im") {
document.getElementById("Im").style.display = "block";
document.getElementById("IMLabel").style.display = "inline";
}
}
function showHidden(){
var dropSelection = document.getElementById("contactMethod").value;
console.log(dropSelection)
if(dropSelection == "email"){
document.getElementById("email").style.display = "block";
}
}
#email{
display:none;
}
<label>Best way to reach you?</label>
<br>
<select id="contactMethod">
<option value="wp">Work Phone?</option>
<option value="cp">Personal Cell Phone?</option>
<option value="email">Email?</option>
<option value="Im">Instant Messanger?</option>
</select>
<br>
<button onclick="showHidden()">Which way?</button>
<br>
<label>E-mail Adress:</label>
<br>
<input id="email" type="text" display="none">
<br>
I don't see any problem, it works fine.