Can't keep CSS change via Javascript

Can't keep CSS change via Javascript - javascript

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.

Related

Javascript .val change doesn't input value?

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?

Disable Required validation on some specific input fields if they are hidden with select tag

Hi guys can you help me solve this i used display:none to hide some input fields and display them with a select tag, if it's on a specific country, so when i tried submitting the form it keeps asking the hidden input field to be filled whereas they are hidden with select tag, i want this specific input field to be disable if hidden, then enable when show with required, so if input is shown enable required else disable required if input is hidden
<form action="d.php" method="POST">
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
<input id="first" name="first" placeholder="first" value="" required><div> </div>
<input id="second" name="second" placeholder="second " value="" required><div> </div>
<input id="third" style="display:none;" placeholder="third" name="third" value="" required><div> </div>
<input id="forth" style="display:none;" placeholder="forth" name="forth" value="" required><div> </div>
<input type="submit" value="submit">
</form>
<script type="text/javascript">
function showDiv(select){
if(select.value== "United States"){
document.getElementById('third').style.display = "block";
} else{
document.getElementById('third').style.display = "none";
}
if(select.value== "United kingdom"){
document.getElementById('forth').style.display = "block";
} else{
document.getElementById('forth').style.display = "none";
}
}
</script>
and also the space between the "second" and the "third" is what i want as the space between the "second" and the "forth" and any other fifth and six if i decided to add to the text field, i want hidden input field to be on same line
second and third
https://i.ibb.co/dQcXS2x/1.png
second and forth
https://i.ibb.co/c11VBfc/2.png

You may set the required attribute for such inputs, like this:
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
Something like this:
(function() {
var selTest = document.getElementById("test");
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
var forth = document.getElementById("forth");
selTest.onchange = function() {
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
};
}());
<form action="d.php" method="POST">
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
<input id="first" name="first" placeholder="first" value="" required>
<div> </div>
<input id="second" name="second" placeholder="second " value="" required>
<div> </div>
<input id="third" style="display: none;" placeholder="third" name="third" value="" required>
<div> </div>
<input id="forth" style="display: none;" placeholder="forth" name="forth" value="" required>
<div> </div>
<input type="submit" value="submit">
</form>
Update:
With div and CSS3 styles.
(function() {
var selTest = document.getElementById("test");
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
var forth = document.getElementById("forth");
selTest.onchange = function() {
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
};
}());
form {
border: #ccc solid 1px;
}
form div {
margin: 1em;
}
<form action="d.php" method="POST">
<div>
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
</div>
<div>
<input id="first" name="first" placeholder="first" value="" required>
</div>
<div>
<input id="second" name="second" placeholder="second " value="" required>
</div>
<div>
<input id="third" style="display: none;" placeholder="third" name="third" value="" required>
</div>
<div>
<input id="forth" style="display: none;" placeholder="forth" name="forth" value="" required>
</div>
<div>
<input type="submit" value="submit">
</div>
</form>

Showing an input text field when user selects certain element from select menu

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>

How to display a textarea after selecting a certain option

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>

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.

Can't keep CSS change via Javascript - javascript

Related

Javascript .val change doesn't input value?

Disable Required validation on some specific input fields if they are hidden with select tag

Showing an input text field when user selects certain element from select menu

How to display a textarea after selecting a certain option

Javascript Form validation not working for select element

Categories

Resources