• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Changing the text of a buton

 
sulabh kapoor
Greenhorn
Posts: 16
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
I want that on click of a button, the display of the button should change.
The scenario is,
1) Click on the button - Initial the text of button is + sign.
2) The button text should change to - sign and a js method should be called to display some text in a div
3) Again on click of that button + sign should change to - sign.

Regards,
Sulabh
 
Praveen Rajendran
Greenhorn
Posts: 21
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
This can be done using below code:

definition of button


on onclick function the below code can be


Let me know if this helps your requirement.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please take the time to choose the correct forum for your posts. This forum is for questions on JSP. For more information, please read this.

This post has been moved to a more appropriate forum.
 
sulabh kapoor
Greenhorn
Posts: 16
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The code sent is not working. I understand it should but somehow it is not calling the function on click.
<input type="button" value="+" id="myButton1" onclick="fnClick();"></input>
<script language="text/javascript">
function fnClick(){
if(document.getElementById("myButton1").value == "+")
document.getElementById("myButton1").value="-";
else
document.getElementById("myButton1").value="+";
}
</script>
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
sulabh kapoor wrote:Not working..

Please read this.

And, be sure to use code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along to posts that are easier to read. Please read this for more information.

You can go back and change your post to add code tags by clicking the button on your post.
 
Praveen Rajendran
Greenhorn
Posts: 21
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please try the below.

 
sulabh kapoor
Greenhorn
Posts: 16
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey the code worked.
The only problem was "type" keyword in script where I had written "language". Thanks for the help
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If that is literally all you need to do on a button click here is a nice jQuery'fied shortened version of the code required. Even if you have to do more than just change the value of the button, jquery can sure shorten your keystrokes.

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Note that Gregg's code also employs the best-practice principle of Unobtrusive JavaScript wherein no script is embedded in structural markup (in other words, avoiding onclick and the like).
 
sulabh kapoor
Greenhorn
Posts: 16
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Need help, I guess I am missing something which I am not able to make out.
Please see

<input type="button" value="+" id="inputButton" />
<a href="Places.html" target="frmContent">Places</a><br><br>
<input type="button" value="+" id="inputButton"></input>
<a href="Hotels.html" target="frmContent">Hotels</a><br><br>


<script type="text/javascript">
$(function(){
$('#inputButton').click(function(){
$(this).val()=='+' ? $(this).val('-') : $(this).val('+');
});
});
</script>

The label is not changing
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please be sure to use code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along to posts that are easier to read. Please read this for more information.

You can go back and change your post to add code tags by clicking the button on your post.
 
sulabh kapoor
Greenhorn
Posts: 16
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
sulabh kapoor wrote:Need help, I guess I am missing something which I am not able to make out.
Please see

<html>
<head>
<script type="text/javascript">
<!--
function fnClick(){
if(document.getElementById("Places").value == "+"){
//alert("inside function");
document.getElementById("Places").value="-";
//alert("during the function");
document.getElemendById("divPlaces").style.display="show";
}
if(document.getElementById("Places").value == "-"){
document.getElementById("Places").value="+";
document.getElemendById("divPlaces").style.display="none";
}
if(document.getElementById("Hotels").value == "+"){
//alert("inside function");
document.getElementById("Hotels").value="-";
//alert("during the function");
document.getElemendById("divPlaces").style.display="show";
}
if(document.getElementById("Hotels").value == "-"){
document.getElementById("Hotels").value="+";
document.getElemendById("divPlaces").style.display="none";
}

} -->
$(function(){
$('#inputButton').click(function(){
$(this).val()=='+' ? $(this).val('-') : $(this).val('+');
});
});
</script>
</head>
<title>Links</title>
<body link="black" vlink="black">

<input type="button" value="+" id="inputButton"></input>
<a href="Places.html" target="frmContent">Places</a><br><br>
<input type="button" value="+" id="inputButton"></input>
<a href="Hotels.html" target="frmContent">Hotels</a><br><br>

</body>
</html>
</script>

The label is not changing
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic