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.
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?
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;
}
});
My goal is to have a form on a woocommerce product page that when a certain attribute is checked then more options will show up.
More specifically. There is a question:
"How many additional dogs are you purchasing for?" and the if "one" is checked a text field with the label: "Second Dog's Name:" will appear. And if "two" is selected than "Second Dog's Name:" AND "Third Dog's Name:" will appear.
This is the code that I am working with and cannot really change the html structure because it is built with a wordpress plugin for extra product options in woocommerce.
I am able to get this close where when the fourth option is selected it does what I want and shows all three, but the first three options do nothing. But when I was writing each code, they would work until I wrote the next one.
$('.form-control').on('change', function () {
if(this.value === "option-1"){
$(".form-control-2_parent").show();
} else {
$(".form-control-2_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-2"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-3"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
$(".form-control-4_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
$(".form-control-4_parent").hide();
}
});
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="option-1">One Additional Dog</option>
<option value="option-2">Two Additional Dogs</option>
<option value="option-3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>
I know what I am missing is probably very basic, but I am very new to writing javascript/jquery functions and complex conditional statements like this one.
Thanks in advance for any help you can give me!
Here's the solution:
// First store all out option's Elements on a list
var options = [
$(".form-control-2_parent"),
$(".form-control-3_parent"),
$(".form-control-4_parent")
]
// Create a function that hides all our options
function resetAll(){
options.forEach(function(option){
option.hide();
});
}
$('.form-control').on('change',
function (event)
{
// Get the option that was clicked
var target = $(event.currentTarget);
if(target.val())
{
// First Hide all our options, this will hide any open ones
resetAll();
// Just create a loop that shows the number of options based on the selected option
var i = 0;
while(i < target.val()){
options[i].show();
i++;
}
}
}
);
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="1">One Additional Dog</option>
<option value="2">Two Additional Dogs</option>
<option value="3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>
Im trying to get this code to run with only plain JS.
When the user selects 'Other' I want my input field to show but only when they select 'Other'.
Ive hidden the input so its not displayed before its called.
I set a listener on the select field
Created the if/else statement looking for the value of the select field and set that to the value of other.
What am I missing here?
const select = document.getElementById('title');
let textField = document.getElementById('other-title').style.display = "none";
//This sets the focus on the first input field
function setFocusToTextBox(){
document.getElementById("name").focus();
}
setFocusToTextBox();
select.addEventListener("change", function() {
if(select.value === 'other') {
textField.style.display = "block";
} else {
textField.style.display = "none";
}
});
<fieldset>
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user-name" placeholder="Enter Your Full Name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user-email" placeholder="Enter Valid Email">
<label for="title">Job Role</label>
<select id="title" name="user-title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
<label for="other-title">Other Title</label>
<input type="text" id="other-title" name="job_role_other" placeholder="Your Job Role">
</fieldset>
The problem is here:
let textField = document.getElementById('other-title').style.display = "none"
You are assigning textField string value "none".
Do this instead:
let textField = document.getElementById('other-title');
document.getElementById('other-title').style.display = "none";
This works:
const select = document.getElementById('title');
var textField = document.getElementById('other-title');
var otherTitleLabel = document.getElementById('other-title-label');
//This sets the focus on the first input field
document.getElementById('other-title').style.display = "none";
otherTitleLabel.textContent="";
function setFocusToTextBox(){
document.getElementById("name").focus();
}
setFocusToTextBox();
select.addEventListener("change", function() {
if(select.value === 'other') {
textField.style.display = "block";
} else {
textField.style.display = "none";
otherTitleLabel.textContent="";
}
});
<fieldset>
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user-name" placeholder="Enter Your Full Name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user-email" placeholder="Enter Valid Email">
<label for="title">Job Role</label>
<select id="title" name="user-title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
<label for="other-title" id="other-title-label">Other Title</label>
<input type="text" id="other-title" name="job_role_other" placeholder="Your Job Role">
</fieldset>
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>