Button function [Archive] - Dynamic Drive Forums

jolicious

07-21-2008, 06:57 AM

Hi, I would like to ask if it is possible to do change a button function depending to the number of times it is pressed. For example if I click on the submit button and it changes to edit.

jeanray

07-21-2008, 08:25 AM

Yes, and faster if you use AJAX to update your division.
Say:
<div id=xxx> <form..> <input..> <input type='button' value='submit> ... </div>
The button shows "submit".
When clicked, it goes to the server. The server replies:
"fill <div id=xxx> with:
<form..> <input..> <input type='button' value='edit'> ... "
and so-on.
With javascript, you could have image buttons, and swap images on each click
i.e. <img src=button1 onclick='change_image(2)' ...>
and
function change_image(imno) {
document.write... (where, ID)... with image # 2 }

codeexploiter

07-21-2008, 08:50 AM

You can change the label of a button as well as its functionality using JavaScript. One demo page is below, which illustrates that.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type="text/javascript">
window.onload = function(){
document.forms['f1'].b1.onclick = firstState;
}
var firstState = function(){
alert('You are in button\'s first state');
document.forms['f1'].b1.value = "second state";
document.forms['f1'].b1.onclick = function(){
alert('You are in button\'s second state');
document.forms['f1'].b1.value = "third state";
document.forms['f1'].b1.onclick = function(){
alert('You are in button\'s third state');
document.forms['f1'].b1.value = "fourth state";
document.forms['f1'].b1.onclick = function(){
alert('You are in button\'s fourth state');
document.forms['f1'].b1.value = "fifth state";
document.forms['f1'].b1.onclick = function(){
alert('You are in button\'s fifth state and you are going back to first state');
document.forms['f1'].b1.value = "first state";
document.forms['f1'].b1.onclick = firstState;
};
};
};;
};
}
</script>
</head>
<body>
<form name="f1">
<input type="button" name="b1" value="first state"/>
</form>
</body>
</html>

After saving the code in your machine open it in your browser and click the button available and you can see that how its lable and functionality changing.

You need to use AJAX only if you want to use a code snippet from the server as the new functionality.

jolicious

07-22-2008, 03:09 AM

Thank you for your replies. I'm looking to integrate the button into Chronoform base on Joomla!. Is it possible to use php to code it or it is better to leave it in java ?

GarethMc

07-22-2008, 11:23 AM

Thank you for your replies. I'm looking to integrate the button into Chronoform base on Joomla!. Is it possible to use php to code it or it is better to leave it in java ?

Firstly JavaScript and Java are two VERY different things. One is a broswer side scripting language the other is an enterprise Object Oriented Development Langauge.

To answer your question its a lot better to use JavaScript for situations like this as JavaScript can respond to events such as clicking and change a button's values immediatly. PHP would require that the entire page be reloaded before the button changes....

jolicious

07-23-2008, 03:31 AM

Thanks for the information. I'm still learning more about programming as this is my first time doing a project on programming and I did not have any experience with programming.

jolicious

07-23-2008, 06:26 AM

Hi again. I would like to know if it is possible to have data entered in the 1st page to appear again when you click a link from a 2nd page that goes back to the 1st page.