Change button text in jQuery - javascript

I have a table which I want to hide or show on the click of a button. Also, when the button is clicked, its text should be changed appropriately. I have the following code, but the button's text is not being changed:
<script>
$(document).ready(function () {
$("#myButton").click(function () {
$(".myTable").toggle(1000, "linear", function changeButtonText() {
$("#myButton").text = ($("#myButton").text === "Hide table" ? "Show table" : "Hide table");
});
});
});
</script>
...
<input type="button" id="myButton" value="Hide table" />
<table class="myTable">
...
</table>

Try this:
$("#myButton").val($("#myButton").val() === "Hide table" ? "Show table" : "Hide table");

You didn't use the function in the right way:
If the element is button:
Error:
$("#myButton").text = ("new text");
Work:
$("#myButton").text("new text");
Working example:
$("#myButton").text("New text");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="myButton">Old text</button>
If the element is input type="button":
Error:
$("#myButton").text = ("new text");
Work:
$("#myButton").val("new text");
Working example:
$("#myButton").val("New text");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="myButton" value="Hide table" />

use this to change the text of your button
$("#myButton").attr('value', 'newText');

I have to tweak your code and worked for me.You have to pass the vale like $("#myButton").val(Buttontext);
$(document).ready(function() {
$("#myButton").click(function() {
$(".myTable").toggle(1000, "linear", function changeButtonText() {
var text= ($("#myButton").val() === "Hide table" ? "Show table" : "Hide table");
$("#myButton").val(text);
});
});
});
fiddle work for me

you can use if statement to check the value of your button but first you must get the attribute which is value.
$("#myButton").click(function () {
$(".myTable").toggle(1000, "linear", function changeButtonText() {
var text = $("#myButton").attr("value");
if(text == "Hide table") {
$("#myButton").attr("value","Show table");
}
else {
$("#myButton").attr("value","Hide table");
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...
<button id="myButton">Hide table</button>
<table class="myTable">
<tr><td>works</td></tr>
</table>
<script>
$("#myButton").click(function () {
if($("#myButton").text() == "Hide table") {
$(".myTable").hide();
$("#myButton").text("Show table");
}
else {
$(".myTable").show();
$("#myButton").text("Hide table");
}
});
</script>
Put the javascript at the bottom of your body delete the ready function this works for me

Related

onclick inside function fail

I have 3 inputs and 3 buttons. I would like to set a value by clicking on the button. Everything working fine with the first set. When I set next input, it change the value of all my inputs.
How can I fix that?
$(function() {
$("input").on("click", function () {
var here = $(this);
$("div").on("click", "button", function() {
here.val(this.value);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div>
<button value="a">a</button>
<button value="b">b</button>
<button value="c">c</button>
</div>
You can't scope click function inside click function , just use two click and global variable ...
$(function() {
var here;
$("input").on("click", function () {
here = $(this);
});
$("div").on("click", "button", function() {
here.val(this.value);
});
});
Are you wanting to place the value of the Button, into the last focused INPUT,.
This might help..
$(function() {
var lastFocus;
$('body').on('focus','input', function () {
lastFocus = this;
});
$("div").on("click", "button", function() {
$(lastFocus).val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div>
<button value="a">a</button>
<button value="b">b</button>
<button value="c">c</button>
</div>
is this you want ?
$(function() {
$("input").on("click", function () {
var here = $(this);
$("div").on("click", "button", function() {
here.val(this.value+here.val());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div>
<button value="a">a</button>
<button value="b">b</button>
<button value="c">c</button>
</div>
Why have you used the outer function?
You can add a temporary class to the input, to which you want to change the value.
$("input").on("click", function () {
$("input").removeClass('addToThis');
$(this).addClass('addToThis');
});
$("div").on("click", "button", function() {
$(".addToThis").val(this.text());
});
Easiest solution: just put the here variable out the first click listner:
$(function() {
var here;
$("input").on("click", function () {
here = $(this);
$("div").on("click", "button", function() {
here.val(this.value);
});
});
});

How to run this jquery function with input type button

How can i perform this jquery validation with input type button ? when i switch to input type submit it's working, but i don wan input type submit because submit button will always reload my screen with modernizr.custom.js UI. Please help, thanks.
<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function (e) {
var isValid = true;
$('#VEHNO').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
e.preventDefault();
});
});
</script>
html
<input type="text" class="input-name" id="VEHNO" name="VEHNO" type="text" />
<input type="button" value="Submit" name="submit"/>
You are trying to use jQuery Id selector for a button but you have not assigned an id to your button, after you attach an id, it will work fine.
$(document).ready(function () {
$('#someId').click(function () {
var isValid = true;
$('#VEHNO').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
} else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
e.preventDefault();
});
});
<input type="text" class="input-name" id="VEHNO" name="VEHNO" type="text" />
<input type="button" value="Submit" id="someId" name="submit" />
Working demo is here : http://jsfiddle.net/qrj0qqrj/
#submit
This is an id selector. It selects the element with the id attribute with the value submit.
<input type="button" value="Submit" name="submit"/>
This element doesn't have an ID.
The name isn't being used for anything. Change name to id.
<input type="button" value="Submit" id="submit"/>
<input type="button" value="Submit" name="submit" id="submit" />
You can also add a return false; to the JS to stop the form submit and control it by JS.

How to Hide/Show 'div' using jQuery?

How can I show the text box depending on the user's selection in a dropdown box?
<select name="sites" id="select5" required="yes">
<?php
for($i=0;$i<=128;$i++){
echo "<option>".$i."</option>";
}
?>
</select>
<div id="YES">
Other: <input class="input-text" type="text" name="name"/>
</div>
If the user selects 1 - the text box will not show.
Then if the user selects more than 2 -> the <div id="YES"> will show.
Here's my jQuery:
<script type="text/javascript">
$(document).ready(function(){
$('#YES').hide();
$("#select5").change(function(){
$('#YES').hide('slow');
$("#" + this.value).show('slow');
});
});
</script>
Any suggestions?
You can call the hide/show based on the value of the select like
$(document).ready(function () {
$('#YES').hide();
$("#select5").change(function () {
$('#YES')[this.value > 1 ? 'show' : 'hide']('slow');
});
});
Demo: Fiddle
try this out
$('#select5').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if(valueSelected == 1){
$('#YES').show();
}
else{ $('#YES').hide();}
});

Changing button text onclick

When I click on myButton1 button, I want the value to change to Close Curtain from Open Curtain.HTML:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input>
Javascript:
function change();
{
document.getElementById("myButton1").value="Close Curtain";
}
The button is displaying open curtain right now and I want it to change to close curtain, is this correct?
If I've understood your question correctly, you want to toggle between 'Open Curtain' and 'Close Curtain' -- changing to the 'open curtain' if it's closed or vice versa. If that's what you need this will work.
function change() // no ';' here
{
if (this.value=="Close Curtain") this.value = "Open Curtain";
else this.value = "Close Curtain";
}
Note that you don't need to use document.getElementById("myButton1") inside change as it is called in the context of myButton1 -- what I mean by context you'll come to know later, on reading books about JS.
UPDATE:
I was wrong. Not as I said earlier, this won't refer to the element itself. You can use this:
function change() // no ';' here
{
var elem = document.getElementById("myButton1");
if (elem.value=="Close Curtain") elem.value = "Open Curtain";
else elem.value = "Close Curtain";
}
When using the <button> element (or maybe others?) setting 'value' will not change the text, but innerHTML will.
var btn = document.getElementById("mybtn");
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
When printed to the console:
<button id="mybtn" class="btn btn-primary" onclick="confirm()" value="my value">my text</button>
It seems like there is just a simple typo error:
Remove the semicolon after change(), there should not be any in the
function declaration.
Add a quote in front of the myButton1 declaration.
Corrected code:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
A faster and simpler solution would be to include the code in your button and use the keyword this to access the button.
<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />
There are lots of ways. And this should work too in all browsers and you don't have to use document.getElementById anymore since you're passing the element itself to the function.
<input type="button" value="Open Curtain" onclick="return change(this);" />
<script type="text/javascript">
function change( el )
{
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
}
</script>
this code work for me
var btn = document.getElementById("your_btn_id");
if(btn.innerText=="show"){
btn.innerText="hide";
}
else{
btn.innerText="show";
}
using value is not work in my case
Add this function to the script
function myFunction() {
var btn = document.getElementById("myButton");
if (btn.value == "Open Curtain") {
btn.value = "Close Curtain";
btn.innerHTML = "Close Curtain";
}
else {
btn.value = "Open Curtain";
btn.innerHTML = "Open Curtain";
}
}
and edit the button
<button onclick="myFunction()" id="myButton" value="Open Curtain">Open Curtain</button>
If you prefer binding your events outside the html-markup (in the javascript) you could do it like this:
document.getElementById("curtainInput").addEventListener(
"click",
function(event) {
if (event.target.value === "Open Curtain") {
event.target.value = "Close Curtain";
} else {
event.target.value = "Open Curtain";
}
},
false
);
<!doctype html>
<html>
<body>
<input
id="curtainInput"
type="button"
value="Open Curtain" />
</body>
</html>
i know this is an old post but there is an option to sent the elemd id with the function call:
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
function f1(objButton)
{
if (objButton.innerHTML=="EXPAND") objButton.innerHTML = "MINIMIZE";
else objButton.innerHTML = "EXPAND";
}
You are missing an opening quote on the id= and you have a semi-colon after the function declaration. Also, the input tag does not need a closing tag.
This works:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1">
<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>
Try this,
<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref) {
ref.value="Close Curtain";
}
</script>
this can be done easily with a vbs code (as i'm not so familiar with js )
<input type="button" id="btn" Value="Close" onclick="check">
<script Language="VBScript">
sub check
if btn.Value="Close" then btn.Value="Open"
end sub
</script>
and you're done , however this changes the Name to display only and does not change the function {onclick} , i did some researches on how to do the second one and seem there isnt' something like
btn.onclick = ".."
but i figured out a way using <"span"> tag it goes like this :
<script Language="VBScript">
Sub function1
MsgBox "function1"
span.InnerHTML= "<Input type=""button"" Value=""button2"" onclick=""function2"">"
End Sub
Sub function2
MsgBox "function2"
span.InnerHTML = "<Input type=""button"" Value=""button1"" onclick=""function1"">"
End Sub
</script>
<body>
<span id="span" name="span" >
<input type="button" Value="button1" onclick="function1">
</span>
</body>
try it yourself , change the codes in sub function1 and sub function2, basically all you need to know to make it in jscript is the line
span.InnerHTML = "..."
the rest is your code you wanna execute
hope this helps :D
This worked fine for me. I had multiple buttons which I wanted to toggle the input value text from 'Add Range' to 'Remove Range'
<input type="button" onclick="if(this.value=='Add Range') { this.value='Remove Range'; } else { this.value='Add Range'; }" />
var count=0;
document.getElementById("play").onclick = function(){
if(count%2 =="1"){
document.getElementById("video").pause();
document.getElementById("play").innerHTML ="Pause";
}else {
document.getElementById("video").play();
document.getElementById("play").innerHTML ="Play";
}
++count;
This is simple way to change Submit to loading state
<button id="custSub" type="submit" class="button left tiny" data-text-swap="Processing.. ">Submit <i class="fa fa-angle-double-right"></i></button>
<script>
jQuery(document).ready(function ($) {
$("button").on("click", function() {
var el = $(this);
if (el.html() == el.data("text-swap")) {
el.html(el.data("text-original"));
} else {
el.data("text-original", el.html());
el.html(el.data("text-swap"));
}
setTimeout(function () {
el.html(el.data("text-original"));
}, 500);
});
});
</script>
<input type="button" class="btn btn-default" value="click me changtext" id="myButton1" onClick="changetext()" >
<script>
function changetext() {
var elem = document.getElementById("myButton1");
if (elem.value=="click me change text")
{
elem.value = "changed text here";
}
else
{
elem.value = "click me change text";
}
}
</script>
If not opposed to or may already be using jQuery, you could do this without the approach of having to use obtrusive js. Hope it helps. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript Also like to reference, https://stackoverflow.com/a/3910750/4812515 for a discussion on this.
HTML:
<input type="button" value="Open Curtain" id=myButton1"></input>
Javascript:
$('#myButton1').click(function() {
var self = this;
change(self);
});
function change( el ) {
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
}
<!DOCTYPE html>
<html>
<head>
<title>events2</title>
</head>
<body>
<script>
function fun() {
document.getElementById("but").value = "onclickIChange";
}
</script>
<form>
<input type="button" value="Button" onclick="fun()" id="but" name="but">
</form>
</body>
</html>
Or more simple without having to name the element (with 'button' element):
<button onclick="toggleLog(this)">Stop logs</button>
and script :
var bWriteLog = true;
function toggleLog(elt) {
bWriteLog = !bWriteLog;
elt.innerHTML = bWriteLog ? 'Stop logs' : 'Watch logs';
}
function change() {
myButton1.value=="Open Curtain" ? myButton1.value="Close Curtain" : myButton1.value="Open Curtain";
}

alert box not working in jsp

I added a stylish alert box to my page, resource is here . But problem is after clicking ok, confirmsubmit.jsp is not opening. Also in that alert cancel button is not appearing why?
javascript
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
<!--
function confirmation() {
var answer = csscody.alert("Confirm submit?")// added csscody here for alert but after clicking ok nothing happens
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;// here cancel button is not coming
}
}
//-->
</script>
</form>
html
<input type="text" name="textboxname"/>
<input type="submit" onclick="return confirmation()"/>
</form>
UPDATE
View below code ,it uses button instead of link
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
$().ready(function() {
$('#btn_submit').click(function(e) {
e.preventDefault();
var that = this;
var text = "si o no compa?";
csscody.confirm(text, {
onComplete: function(e) {
if (e) {
window.location = "confirmsubmit.jsp";
}
else {
return false;
}
}
})
});
});
</script>
<input type="text" name="textboxname"/>
<input type="submit" id="btn_submit" onclick="return confirmation()"/>
</form>
You willl have to use confirm instead of alert which will giv eyou both ok and cancel buttons which return true and false respectively. And also take off return from onclick
HTML
<form action = "confirmsubmit.jsp" method = "POST">
<input type = "text" name = "textboxname" />
<input type = "submit" onclick = "confirmation();" />
</form>
Javascript
function confirmation() {
var answer = confirm("Confirm submit?");
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;
}
}

Categories

Resources