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.
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 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.
I have this form where for example in Type A you can write only numbers that start with 1, and so on:
<form accept-charset="UTF-8" action="verify.php" id="form" method="post">
<label id="type" for="type" class="">Type</label>
<select class="" id="Type" name="type">
<option id="a" value="1">Type A</option>
<option id="b" value="2">Type B</option>
<option id="c" value="3">Type C</option>
<option id="d" value="4">Type D</option>
<option id="e" value="5">Type E</option>
</select>
<label for="type_number" class="inner_text">Type Number</label>
<input name="type_number" type="text" class="false" id="type_number" />
<input type="button" id="Confirm" value="Confirm" />
</form>
And this Javascript:
document.getElementById('Confirm').onclick = function () {
var letter = document.getElementById("type_number").value.match(document.getElementById("Type").value);
if (letter !== null) {
letter = letter[0].toLowerCase();
this.value = letter + this.value.substring(1);
}
else {
alert('Number is not correct!');
}
}
The validation work, but doesn't submit, when a good answer is writed the 'Confirm' get renamed to '1onfirm', only that happen.
Check the jsfiddle too: http://jsfiddle.net/focusoft/hSmFS/1/
Thanks.
Either submit the form in javascript function or change the confirm button type to submit.
change your javascript function
document.getElementById('Confirm').onclick = function () {
var letter = document.getElementById("type_number").value.match(document.getElementById("Type").value);
if (letter !== null) {
letter = letter[0].toLowerCase();
this.value = letter + this.value.substring(1);
document.forms[0].submit();
}
else {
alert('Number is not correct!');
}
}
Change this:
<input type="button" id="Confirm" value="Confirm" />
for this:
<input type="submit" id="Confirm" value="Confirm" />