javascript button show/hide on text changed - javascript

I want to show and hide a button by using java script.
My problem is that the button should be hide on page load and when I changed the text in text box then button should be show.
thanks.....

pls, Check this page and tell if this is what you wanted.
Basically, you need to use onchange event to do whatever you want to do.
<html>
<head>
<script>
window.onload=function(){
document.getElementById("button").style.display='none';
}
function showButton(){
document.getElementById("button").style.display='block';
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
Change the text in Input Box. Then Button will be show<br/><br/>
<input type="text" id="userText" value="Change the text" onchange="showButton()"/>
</body>
</html>

Try with jQuery:
$("#yourInput").bind("change", function() {
var value = $(this).val();
if (value && value.length > 0) {
// Exist text in your input
$("#yourButton").show();
} else {
$("#yourButton").hide();
}
});
For non-jQuery:
function onchangeInput() {
var value = this.value;
if (value && value.length > 0) {
// Exist text in your input
document.getElementById("yourButton").style.visibility = "visible";
} else {
document.getElementById("yourButton").style.visibility = "hidden";
}
}
window.onload = function() {
document.getElementById("yourButton").style.visibility = "hidden";
var el = document.getElementById("yourInput");
if (el.addEventListener) {
el.addEventListener("change", onchangeInput, false);
} else {
el.attachEvent('onchange', onchangeInput);
}
}
Again, don't show/hide a button, just disable it, that make the best user experience.

You could style the css to visibilty:hidden then in javascript add an event listner like this:
<script type="text/javascript">
var box = document.getElementById('box');
var textbox = document.getElementById('textbox');
textbox.addEventListener("focus",showbox,false);
function showbox() {
box.style.visibility = 'visible';
}
That would make it appear on focus but if you wanted to take it a step further you could add another event listener for a keystroke when the textbox is focused on. That would probably work.

This is to hide/show a div based on text changed in text box.
With JQuery
<script type="text/javascript">
window.onload = function () {
document.getElementById("submitdiv").style.display = 'none';
}
$(function () {
$('.Name').on('keyup change', function () {
if (this.value.length > 0) {
$('#submitdiv').show();
} else {
$('#submitdiv').hide();
}
});
});
</script>
HTML
<%:Html.TextBoxFor(m => m.FirstName, new { #class ="Name"}) %>
<div id="submitdiv">
<button type="submit" value="Submit" class="btn btn-primary pull-right value-set" id="btnLogin">Submit</button>
</div>

Try this:
<script>
function
changeButton() {
document.getElementById("changeButton").innerHTML = "Insert text for button";
document.getElementById("changeButton").removeAttribute("hidden");
}
</script>
<button hidden id="changeButton"></button>

Related

jQuery button toggle text doesn't work onlick

I've created button to show content below. I need change text inside this button when this content is visible. So:
My HTML code
<button class="c-cta c-cta--show-hide">
<div class="e-cta-text">Pokaż więcej</div>
<span class="e-cta__icon--regular e-cta__icon--after">
<i class="fas fa-chevron-circle-down"></i>
</span>
</button>
and my jQuery
$(function() {
var button = $("button.c-cta--show-hide");
var buttonText = $(".e-cta-text");
button.click(function() {
$(this).next(".l-center--hidden-content").toggleClass("l-center--show-content");
$(this).children("span.e-cta__icon--before").children("i").toggleClass("e-cta__icon--before--rotate");
$(this).children("span.e-cta__icon--after").children("i").toggleClass("e-cta__icon--after--rotate");
});
// function to change the text
button.click(function() {
if (buttonText.innerHTML === "Pokaż mniej") {
buttonText.innerHTML = "Pokaż więcej"
} else {
buttonText.innerHTML = "Pokaż mniej"
}
})
});
How to makes it right?
Since your code mostly uses jQuery here's your text-change function completely in jQuery working:
jsFiddle demo: https://jsfiddle.net/wfj6L38v/
$(function() {
var button = $("button");
var buttonText = $(".e-cta-text");
button.click(function() {
if (buttonText.text() == 'Less') {
buttonText.html("More");
} else {
buttonText.html("Less");
}
});
});

Css change on value change in input field. jQuery

var footerEmail = $('footer#footer input.email');
var footerEmailLength = footerEmail.val().length;
var footerEmailCaptcha = $("footer#footer .captcha-hide");
footerEmail.focus( function() {
footerEmailCaptcha.css("display","block");
});
footerEmail.blur( function() {
if(footerEmailLength > 0) {
footerEmailCaptcha.css("display","block");
}
else if (footerEmailLength == 0) {
footerEmailCaptcha.css("display","none");
}
});
.captcha-hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<footer id="footer">
<input class='email'>
<div class="captcha-hide">Testing</div>
</footer>
I want to make sure that onblur works when I enter something inside the text (input) field.
First if condition inside the blur function is not working since it is taking the value as '0' which will be initially. When I enter something and click outside of the input field then the css should be display:block
Please guide me how I can proceed further. I am new to jQuery/Javascript. Googling around to learn stuff.
you have to give the var footerEmailLength = footerEmail.val().length; inside blur function.
The blur function should be like this:
footerEmail.blur( function() {
var footerEmailLength = footerEmail.val().length;
if(footerEmailLength > 0) {
footerEmailCaptcha.css("display","block");
}
else if (footerEmailLength == 0) {
footerEmailCaptcha.css("display","none");
}
And if you use class as selector then change the footerEmail.val().length
to footerEmail[0].val().length.
The running code
var footerEmail = $('.email');
var footerEmailCaptcha = $(".captcha-hide");
footerEmail.focus( function() {
footerEmailCaptcha.css("display","block");
});
footerEmail.blur( function() {
var footerEmailLength = footerEmail[0].val().length;
if(footerEmailLength > 0) {
footerEmailCaptcha.css("display","block");
}
else if (footerEmailLength == 0) {
footerEmailCaptcha.css("display","none");
}
});
.captcha-hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer">
<input class='email'>
<div class="captcha-hide">Testing</div>
</footer>

Expande button until status change

I use an automation testing tool (selenium)
I try to test a page which has this button:
<button morearea-controllers="my-list" morearea-expanded="false" class="lpw-reach-text-more link">
As a user, when I press show more it shows the "show more content". And when there is no more to show, the morearea-expanded becomes true.
Is there any JavaScript command which could expand the button until the end (until morearea-expanded becomes true)?
Somehting very general I tried as I found it is from the full button list which I found the list and after that the number of button (but this number is not the same in every page I try to test):
document.querySelectorAll('button')
is this:
document.getElementsByTagName('button')[29].click()
You can keep invoking the click event in a while loop until the attribute value is "true". Sample using jQuery (function named automationFunction()):
$(document).ready(function() {
var count = 0,
$button = $("[morearea-controllers='my-list']");
/* bad code alert - just for sample purpose */
$button.click(function() {
if (count == 5) {
return;
} else {
if (count === 4) {
$(this).attr("morearea-expanded", true);
$(this).val("Show Less");
}
$("#container").append((count + 1) + "<br/>");
count++;
}
});
/* automation function */
$("#btn-automate").click(function() {
automationFunction();
});
var automationFunction = function() {
count = 0;
while ($button.attr("morearea-expanded") === "false") {
$button.click();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Five items hidden..click on show more to unhide
<div id="container"></div>
</div>
<input type="button" id="btn-show-more" morearea-controllers="my-list" morearea-expanded="false" class="lpw-reach-text-more link" value="Show More"> <br/>
<input type="button" id="btn-automate" value="Invoke automation function">

How to read input from text on button click unobtrusively in Javascript?

How to read input from text on button click unobtrusively in Javascript? Can anyone provide a sample?
<script type="text/javascript>
window.onload = function() {
var btn = document.getElementById(
"btn"
);
btn.addEventListener("click",function() { alert("bar"); },false);
}
</script>
and in the body:
<div id="content">
<input type="text" id="percent" value="" />
<button id="btn">click</button></div>
Yes, addEventListener (with IE's attachEvent) is the most unobtrusive. To get the value of the textbox you simply use the .value property of the textbox.
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById("btn");
if (btn.addEventListener) {
btn.addEventListener("click", btnClick, false);
} else if (btn.attachEvent) {
btn.attachEvent("onclick", btnClick);
}
};
function btnClick() {
alert(document.getElementById("percent").value);
}
</script>

I am trying to make a simple toggle button in javascript

I am trying to make a simple toggle button in javascript. However, the button will only turn "OFF" and will not turn back "ON"
<html><head></head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
I am running:HP Netbook : Ubuntu Linux 10.04 : Firefox for Ubuntu 1.0.
Why are you passing the button if you're going to look it up?
Also, since you know the possible values, you only need to check if it's OFF, otherwise, you know it's ON.
// Toggles the passed button from OFF to ON and vice-versa.
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
If you wanna get fancy and save a couple of bytes you can use the ternary operator:
function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}
Both of your if statements are getting executed one after each other, as you change the value and then immediately read it again and change it back:
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
else if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
Adding the else in there should stop this happening.
Another method to do this is:
var button = document.querySelector("button");
var body = document.querySelector("body");
var isOrange = true;
button.addEventListener("click", function() {
if(isOrange) {
body.style.background = "orange";
}else {
body.style.background = "none";
}
isOrange = !isOrange;
});
In the JavaScript file.
/*****
NOTE!
Another way is applying a class to the element that we want to change.
The CSS file must have the class with the format we want:
.orange {
background: orange;
}
By last in our js file we only need to make the application of the class:
var button = document.querySelector("button");
button.addEventListener("click", function() {
document.body.classList.toggle("orange");
});
Regards :)
Why not use a switch?
function toggle(button)
{
switch(button.value)
{
case "ON":
button.value = "OFF";
break;
case "OFF":
button.value = "ON";
break;
}
}
<html>
<head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF")
{
document.getElementById("1").value="ON";
}
else
{
document.getElementById("1").value="OFF";
}
}
</script>
</head>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);">
</form>
</body>
</html>
This will resolve your issue.
let isOn = true;
function toggle(button) {
isOn = !isOn;
if (isOn) {
document.getElementById("1").value = "ON";
} else {
document.getElementById("1").value = "OFF";
}
}

Categories

Resources