I have an HTML input, as well as some buttons.
<input type="number" placeholder="" id="id"/>
<button onclick="myfunction()" >Click Me</button>
<button onclick="toggle()">toggle</button>
The first button has this JavaScript function
var myfunction=function(){
if(bool){
a=document.getElementById('id');
a.placeholder='Invalid Character';
}
};
bool=false;
and the second button's function is this:
toggle=function(){
bool=!bool;
};
Basically, click the second button to change whether
bool
is true or false. The first button will set a placeholder if the value of bool is true. I want to figure out how to DYNAMICALLY set the color of a placeholder with JavaScript. I have found how to do it with CSS, but I need JavaScript. No jQuery or other frameworks please.
Thanks!
Travis J I specifically said that this is not a duplicate, as I CANNOT use CSS, like the question you mistakenly marked this as a duplicate of
I can ONLY use javscript, not css.
May be this is the not the RIGHT way to add inline styles, but this is the only way i found to full fill the OP requirement.
var placeholderColor = '#f0f';
var FontColor = '#000';
bool = true;
function toggle() {
bool = !bool;
}
function myfunction() {
if (bool) {
a = document.getElementById('id');
a.placeholder = 'Invalid Character';
a.style.color = placeholderColor;
}
}
function textChange() {
a = document.getElementById('id');
if (a.value != '') a.style.color = FontColor;
else {
a.placeholder = 'Invalid Character';
a.style.color = placeholderColor;
}
}
<input type="text" id="id" onkeyup='textChange()' />
<button onclick="myfunction()">Click Me</button>
<button onclick="toggle()">toggle</button>
Related
I want to enable my button, when input is filled. I want to do it in pure Javascript.
My code example in HTML:
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name" onkeyup="myFunction()"><br>
<button type="submit" class="button button-dark" id="send">Send message</button>
</form>
And Javascript:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
function myFunction() {
var nameInput = document.getElementById('name').value;
if (!nameInput === "") {
document.getElementById('send').disabled = "false";
}
}
});
I don't know why my button is not changing to enable state after filling something in input. I have tried diffrent ways to do it, but it's still not working.
Please help.
An input element in HTML is enabled only when the disabled attribute is not present.
In your case disabled is always present in your element, it's just that it has a "false" or a "true" value - but this is meaningless according to the specs (http://www.w3schools.com/tags/att_input_disabled.asp)
So you need to remove it altogether:
document.getElementById('send').removeAttribute('disabled')
The problem with your code is that myFunction() isn't available because you defined it in the eventlistener for click.
Complete refactored code answer:
HTML
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name">
<br>
<button type="submit" class="button button-dark" id="send" disabled>Send message</button>
</form>
JS
document.getElementById("name").addEventListener("keyup", function() {
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
document.getElementById('send').removeAttribute("disabled");
} else {
document.getElementById('send').setAttribute("disabled", null);
}
});
Try this one it will work for you
function myFunction() {
document.getElementById('send').disabled = true;
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
alert("Empty");
document.getElementById('send').disabled = false;
}
}
if you want to check the input should not be contain number then we can use isNaN() function, it will return true if number is not number otherwise return false
Your code is almost correct but you have defined myFunction inside a block, so input is not able to find myFunction() inside onkeyup="myFunction()"
so just keep the same outside of DOMContentLoaded event
see working demo
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
});
function myFunction() {
var nameInput = document.getElementById('name').value;
console.log(nameInput);
if (nameInput === "") {
document.getElementById('send').disabled = true;
} else {
document.getElementById('send').disabled = false;
}
}
I wants to check, if entered field's value is valid or not using onchange before submitting the page. I have written like below.It validates well.But how to activate 'NEXT' button when there is no error on input entries.
<div><input type="text" name="your_name" id="your_name" onchange = "validate_Name(this,1,4)" />
<span id="your_name-error" class="signup-error">*</span>
</div>
<div><input type="text" name="your_addr" id="your_addr" onchange = "validate_Name(this,1,4)" />
<span id="your_addr-error" class="signup-error">*</span>
</div>
<input class="btnAction" type="button" name="next" id="next" value="Next" style="display:none;">
<script type="text/javascript" src="../inc/validate_js.js"></script>
<script>
$(document).ready(function() {
$("#next").click(function() {
var output = validate(); //return true if no error
if (output) {
var current = $(".active"); //activating NEXT button
} else {
alert("Please correct the fields.");
}
});
}
function validate() {
//What should write here?I want to analyse the validate_js.js value here.
}
</script>
Inside validate_js.js
function validate_Name(inputVal, minLeng, maxLeng) {
if (inputVal.value.length > maxLeng) {
inputVal.style.background = "red";
inputVal.nextElementSibling.innerHTML = "<br>Max Characters:" + maxLeng;
} else if (!(tBox.value.match(letters))) {
inputVal.style.background = "red";
inputVal.nextElementSibling.innerHTML = "<br>Use only a-zA-Z0-9_ ";
} else {
inputVal.style.background = "white";
inputVal.nextElementSibling.innerHTML = "";
}
}
If by "activating" you want to make it visible, you can call $('#next').show().
However if you want to simulate a click on it, with jQuery you can simply call $('#next').click() or $('#next').trigger('click') as described here. Also, you might want to put everything in a form and programmatically submit the form when the input passes validation.
You could possibly trigger the change event for each field so it validates each one again.
eg.
function validate() {
$("#your_name").trigger('change');
$("#your_addr").trigger('change');
}
I have 2 text Boxes and one button! When I click on button it should write 1 in the chosen text box but my code is not working.
my code:
function one() {
var number = "1";
if (document.getElementById("txt1").focused) {
document.getElementById("txt1").value = number;
}
else if (document.getElementById("txt2").focused) {
document.getElementById("txt2").value = number;
}
else {
}
You can do some thing like this:
<input type="text" onfocus="onFocus(this)" id="itext1"></input>
<input type="text" onfocus="onFocus(this)" id="itext2"></input>
<button onclick="setValue()">ClickMe</button>
<script>
var selectedDOM = undefined;
function setValue() {
if (selectedDOM) { //selecteddom is present set text to it
selectedDOM.value = 1;
}
}
function onFocus(e) {
selectedDOM = e;//register the last dom selected inside the variable.
}
</script>
Full working code here
You can use onfocus property to perform this instead.
HTML
<input type="text" onfocus="myFocusFunction(this)">
<input type="text" onfocus="myPlaceholderFunction(this)">
Javascript
function myFocusFunction(x) {
x.value = "1";
}
function myPlaceholderFunction(x) {
x.placeholder = "1";
}
Above are two approaches to set value in text box when focused. You can apply any of them prior will add a value and later will add a placeholder instead.
Working Demo : JSFiddle
You can do like this
<div>
<input type="text" id="txt1">
<input type="text" id="txt2">
<button type ="button" id='button'>Click Me </button>
</div>
JavaScript
(function(){
var number ='1';
var _thisId=null;
var _button = document.getElementById('button');
_button.addEventListener('mouseover',function(){
_thisId = document.activeElement.id;
},false)
_button.addEventListener('click',function(){
if(_thisId =='txt1'){
document.getElementById("txt2").value = "";
document.getElementById("txt1").value = number;
}
else if(_thisId =='txt2'){
document.getElementById("txt1").value = "";
document.getElementById("txt2").value = number;
}
})
}())
jsfiddle
I want to create password toggle function when clicked on the eye icon using Javascript only. I have written code for it but it works only to show the password text and not the other way round. Can someone see the logic error in the code below.
function show() {
var p = document.getElementById('pwd');
p.setAttribute('type', 'text');
}
function hide() {
var p = document.getElementById('pwd');
p.setAttribute('type', 'password');
}
function showHide() {
var pwShown = 0;
document.getElementById("eye").addEventListener("click", function() {
if (pwShown == 0) {
pwShown = 1;
show();
} else {
pwShow = 0;
hide();
}
}, false);
}
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" onclick="showHide()" id="eye">
<img src="eye.png" alt="eye"/>
</button>
You are binding click event every time you click a button. You don't want multiple event handlers. Plus you are redefining var pwShown = 0 on every click so you can never revert input state (pwShown stays the same).
Remove onclick attribute and bind click event with addEventListener:
function show() {
var p = document.getElementById('pwd');
p.setAttribute('type', 'text');
}
function hide() {
var p = document.getElementById('pwd');
p.setAttribute('type', 'password');
}
var pwShown = 0;
document.getElementById("eye").addEventListener("click", function () {
if (pwShown == 0) {
pwShown = 1;
show();
} else {
pwShown = 0;
hide();
}
}, false);
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
</button>
The easiest way is using a button with an onclick attribute that toggles the type of the input.
<input type="password" id="password" value="myPassword"/>
<button onclick="if (password.type == 'text') password.type = 'password';
else password.type = 'text';">toggle</button>
You don't need to maintain one extra "pwShown" variable to decide whether to show text or hide it. All you need to do is to examine "type" attribute of "pwd" element as below :
Working Example
JavaScript :
document.getElementById("eye").addEventListener("click", function(e){
var pwd = document.getElementById("pwd");
if(pwd.getAttribute("type")=="password"){
pwd.setAttribute("type","text");
} else {
pwd.setAttribute("type","password");
}
});
HTML :
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
<img src="eye.png" alt="eye"/>
</button>
Follow these steps:
Download the images given below. Make a folder. Add your html file and the images in the same folder. Replace the value of "b.src" in javascript as well as in your html code accordingly.
Images :
function show() {
var a = document.getElementById("pwd");
var b = document.getElementById("EYE");
if (a.type == "password") {
a.type = "text";
b.src = "https://i.stack.imgur.com/waw4z.png";
} else {
a.type = "password";
b.src = "https://i.stack.imgur.com/Oyk1g.png";
}
}
<input type="password" id="pwd">
<button onclick="show()"><img src="https://i.stack.imgur.com/Oyk1g.png" id="EYE"></button>
This is an improvement upon Tunaki's answer. We don't even care to check which state the form field is in already, because this will be entirely determined by the state of the mouse. This allows the password to be only momentarily viewed (only as long as the mouse button is held down over the button.)
<html>
<head>
<title>Visible Password Test</title>
</head>
<body>
Password : <input type="password" name="password" id="password" />
<button type="button" id="eye" title="Did you enter your password correctly?"
onmousedown="password.type='text';"
onmouseup="password.type='password';"
onmouseout="password.type='password';">Peek at Password</button>
</body>
</html>
Based on what you wrote, you are adding the event both in html and in javascript (inside showHide function). May be you can change your js code from what you have, to:
function showHide()
{
var input = document.getElementById("pwd");
if (input.getAttribute("type") === "password") {
show();
} else {
hide();
}
}
The variable "pwShown" is misspelled (as "pwShow") in the else section of your Javascript code. Therefore, pwShown never gets reset to 0.
JQuery solution from my code: (just change the IDs).
$(document).ready(function () {
$("#eye").click(function () {
if ($("#password").attr("type") === "password") {
$("#password").attr("type", "text");
} else {
$("#password").attr("type", "password");
}
});
});
function action() {
var my_pass = document.getElementById("pass");
if (my_pass.type === "password") {
my_pass.type = "text";
} else {
my_pass.type = "password";
}
}
<input type="checkbox" onclick="action()">Show <input type="password" id="pass" value="my-secret">
We can get by using onclick event, let's see example.It is very easy
HTML
<span>
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" onclick="showHide()" id="eye" />
</span>
Javascript
function showHide() {
if (pwd.type == 'text') {
pwd.type = 'password';
}
else {
pwd.type = 'text';
}
}
Simple inline solution:
<input type="password" id="myInput" name="myInput">
<button onclick="myInput.type = (myInput.type=='text') ? 'password' : 'text'; return false;"></button>
In your code everytime when you call showHide() function, pwShown variable is set to 0.
You need to declare pwShown variable as global one.
var pwShown = 0;
function showHide()
{
...
}
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
see also https://www.w3schools.com/howto/howto_js_toggle_password.asp
Dump the eye image and instead use a button showing "Show" or "Hide" according to its state.
Then you just click on the text of the button.
You can stylize the button to be borderless and initially with the same background as its surrounds. Highlight the button by setting .show:hover to either brighten the background of the button or else to brighten the color of the Show/Hide text.
By putting the input and button into the same span, you will have them both inline ( CSS - span{display: inline-block;} ) and vertically align off the same bottom.
Use an ordinary text input just below the span for space to display the validation error alerts. Make sure its tab index is -1 and its background color & border is the same as its surrounding.
.
.
.
<span class="pwSpan">
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" onblur="return checkPassword();"/>
<button type="button" class="show" id="show" value="Show" onclick="showHide()" tabIndex="-1" autocomplete="off" >
</button>
</span>
<input type="text" class="error" name="pwErr" value="" tabIndex="-1" />
.
.
.
function showHide()
{
const pwField = document.getElementById("pwd");
const showHideValue = document.getElementById("show").value;
if(showHideValue.trim() === "Show")
{
showHideValue = "Hide";
pwField.setAttribute('type', 'text');
}
else
{
showHideValue = "Show";
pwField.setAttribute('type', 'password');
}
}
Here is my javascript:
if(!localStorage.status) localStorage['status'] = 1;
toggle(2);
enable.onclick = function(){toggle(0)};
disable.onclick = function(){toggle(1)};
function toggle(n){
/// code here not relevant to this question
}
}
Here's my html:
<form name="thename">
<input type="checkbox" name="option1"> Toggle it
</form>
Now how do I connect the javascript to the html so that checking the box toggles value of 0 and unchecking the box toggles value of 1?
Clarification:
The value that needs to be 0 or 1 is the localstorage value for 'status'. That's the value we are toggling.
Like this (javascript):
if(!localStorage.status) localStorage.status = 1;
var btn = document.getElementsByTagName('input')[0];
btn.onclick = function()
{
if(btn.checked === true)
{
toggle(1);
}else{
toggle(0);
}
};
function toggle(n){
localStorage.status = n;
alert(localStorage.status);
}
I used dot notation for localStorage['status'] instead, because it is better written in dot notation.
Here is the fiddle (will alert 1 when you check the checkbox, will alert 0 when you uncheck it).
You could either use <button> or <input type="button"> and include onclick="".For example:
<button onclick="toggle(0)">Enable</button>
<button onclick="toggle(1)">Disable</button>
OR
<input type="button" onclick="toggle(0)" value="Enable">
<input type="button" onclick="toggle(1)" value="Disable">