Develop Reference

Change the height of an html element when a button gets clicked with ajax

I have a login.php page. The page contains php and html. When the login button gets clicked it will either log me in and Forward me to the welcome page or output "your Password or username is invalid". I want to change the height of an element. Sadly this doesen't work because php is reloading the page(witch makes sense). I heard i can make it work with Ajax.
Does somebody know how to do that?
Button:
<input id="button" type="submit" value="Log In" onclick="ausgabe();">
Javascript:
function hardgainer(){
var gainheight = document.getElementById('gain')
gainheight.style.height ="220px";
document.getElementById('gain').innerHTML = gainheight;
}
function ausgabe(){
document.getElementById('button') =
hardgainer();
}

You are submitting the form and therefore the page reloads. You should change the type to type="button" and then you can make something like this:
function hardgainer(){
var gainheight = document.getElementById('gain')
gainheight.style.height = "220px";
}
document.getElementById("gbutton").addEventListener("click", function() {
hardgainer()
})
#gain {
background: red;
width: 200px;
}
<input id="gbutton" type="button" value="Log In">
<div id="gain"></div>

Change between menu/buttons

So I've got this menu where you can choose the class in my game.
<div class="text">
<div id="story">Choose a class.</div>
<input type="button" class="knight" value="Knight"/>
<input type="button" class="mage" value="Mage"/>
<input type="button" class="archer" value="Archer"/>
</div>
How do I use jquery so that when I press any of these buttons, I'll get a new set of buttons which you can press to choose your race?
I've tried .replaceWith() but jquery won't work on the new buttons.
It will take the css.
function classChange() {
var Class = $(this).val();
$('#statsImg').text("class: " + Class);
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>');
$('.mage').replaceWith('<input type="button" class="human" value="Human"/>');
$('.archer').replaceWith('<input type="button" class="Dwarf" value="Dwarf"/>');
$('.menu').show();
};
$('.knight').click(classChange);
$('.mage').click(classChange);
$('.archer').click(classChange);
Button elf won't do anything with the next part:
$('.elf').on('click', '.elf',function () {
$('#statsImg').text('test');
});
Works with button knight/mage/archer.
So what I'd like to know is how do I get rid of this menu and get a new menu once I press a button?
Sorry if I forgot to add something that you need to know. I'll add it if you need it.

You have to bind the events to the buttons after adding them. Try with -
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>').bind('click', function() {
$('#statsImg').text('test');
});

Can I attach an action to a buttonclick?

If i have a button, can I attach an action to it to perform server side processing, or does it have to be wrapped in a form?
For example
<button type="submit" onClick="listco_directory_contents.js"> List </button>
Can this be made to work, or is a form required?

You can't have a type="submit" if it's not in a form, there is nothing to submit. What you can do, is having a <button id="myButton">, then attach an event to it:
var myButton = document.selectElementById('myButton');
myButton.addEventListener('click', function() {
/* do something cool */
}, false);
And the "do something cool" could be an Ajax request so you send data to the server.

You can yes but if your aiming to do server side processes i recommend the jquery way.
<!--this button uses javascript-->
<input type="button" onclick="myfunction()" value="button"/>
<!--this button uses jquery-->
<input type="button" id="myfunction" value="button"/>
<script>
//javascript function using the onclick event
function myfunction(){
alert("an action");
// or any other function u wish to
// do once the button is click
}
//jquery using the id of the button
$(document).ready(function(){
$("#myfunction").click(function(){
alert("another action");
// or any other function u wish to
// do once the button is click
});
});
</script>

You could also just include the js:
<script type="text/javascript" src="listco_directory_contents.js"></script>
and then call whatever function you need from there:
<button onClick="exampleFunction()"> List </button>
Or in case you want to do server side processing with php you can do simply:
<button onClick="$.post('http://example.com/index.php');"> List </button>

$(function(){
$(':submit').on('click',function(){
alert('hi');
})
})
also can be type=submit
$(function(){
$('input[type="submit"]').on('click',function(){
alert('hi');
})
})
DEMO

pressing button on one page highlights button on new page

So i have two pages and one has a list of buttons (page a) and the other page only has one(page b). Im looking for a way that if you press the button on page b it will take me to page a with the second button with .focus() already targeting it. here are some links for the code i have written this is for page a http://jsfiddle.net/posgarou/S96zw/
HTML page a
<button type="button" id="button0" onClick="reply_click(this.id)">button0</button><p></p>
<button type"button" id="button1" onClick="reply_click(this.id)">button1</button><p></p>
<button type"button" id="button2" onClick="reply_click(this.id)">button2</button><p></p>
<textarea id="myArea"></textarea>
<button type"button" id="button0" onClick="reply_click(this.id)">focus on button 0</button><p></p>
JAVASCRIPT (just used the same for both pages)
function reply_click(clicked_id){
var id= clicked_id;
var myTextArea = document.getElementById('myArea');
myTextArea.innerHTML += id;
document.getElementById(id).focus();
};
and this is for page b http://jsfiddle.net/posgarou/S96zw/
HTML
<body>
<textarea id="result"></textarea>
<button type="button" id="return" onClick="reply_click(this.id)">Return</button>
</body>

You should be able to do that using either a cookie or (better) local/sessionStorage.
On page b, you would include the following code:
sessionStorage["focusedButton"] = "buttonId";
and on page a, you would include the following:
if (sessionStorage["focusedButton"] != undefined) {
document.getElementById(sessionStorage["buttonId"]).focus();
}
For more info, see this earlier question.

I want to disable link button after clicking of it and other enable. toggle enable/ disable between both link buttons using javascript

I want to disable link button after clicking of it & other enable. toggle enable/ disable between both link buttons using javascript
<a id="a1" href="page1.aspx">One</a><a id="a2" href="page2.aspx">Two</a>

Simple, just add listeners to the onclick events on both links, that disable the link in question and enable the other one.
Something like
document.getElementById('a1').onclick = function() {
document.getElementById('a1').disabled = true;
document.getElementById('a2').disabled = false;
};
document.getElementById('a2').onclick = function() {
document.getElementById('a2').disabled = true;
document.getElementById('a1').disabled = false;
};
Of course if you're going to be extending this to multiple buttons then you could easily abstract the above out to registration methods, looping over arrays of buttons etc. (possibly those that implement a particular class rather than explicitly specifying the array).

The simplest way is to hide the link rather than to make it disabled.
You can use this code to hide the link after click on it.
Its tested code & it worked perfect for me. :-)
<script type="text/javascript">
onclick = function() {
var chk= document.getElementById('myElementId');
chk.style.display="none";
};
</script>

To disable a LINK rather than a BUTTON, the only thing you can do apart from hiding it is to set it not to go anywhere.
onclick="this.href='javascript: void(0)';"

Your question can have any one of the following 3 possible scenario. Choose whichever suites your problem.
Case1) A catch in your question is that since they are links pointing to page1.aspx and page2.aspx respectively once you click on a link a new page loads in the browser. So the effect you want to achieve doesn't really matter.
Case 2) If, you have both the links 'One' and 'Two' on each of aspx pages then you can as well hardcode the disabling of the link pointing to itself. (Or as well not have the link at all).
Case 3) If you have a frame to display the links 'One', 'Two' and you have a another frame to load content of both links then your question has a meaning disabling the other link. Here is the code for the same.
<html>
<a id="a1" href="javascript:void(0)" onclick="toggle(objA1,objA2,'page1.aspx')">One</a>
<a id="a2" href="javascript:void(0)" onclick="toggle(objA2,objA1,'page2.aspx')">Two</a>
<br><iframe id="ifrm" src=""></iframe>
<script>
var objA1 = document.getElementById('a1');
var objA2 = document.getElementById('a2');
// d=element to disable, e=element to enable
function toggle(d,e,link)
{
//if already disabled do nothing(don't follow url)
if(d.disabled) return;
//enable/disable
d.disabled = true;
d.style.cursor = 'default';
e.disabled = false;
e.style.cursor = 'hand';
//follow link
ifrm.src = link;
}
</script>
</html>

You can access and set the "disabled" attribute like this:
if(somebutton.disabled == true){
somebutton.disabled = false;
}
I recommend using a JavaScript framework like jQuery.

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.submit{
padding:8px;
border:1px solid blue;
}
</style>
</head>
<body>
<h1>Disabled submit form button after clicked with jQuery</h1>
<form action="#">
<p>
I'm a form ~
</p>
<input type="submit" value="Submit"></input>
<button>Enable Submit Button</button>
</form>
<script type="text/javascript">
$('input:submit').click(function(){
$('p').text("Form submiting.....").addClass('submit');
$('input:submit').attr("disabled", true);
});
$('button').click(function(){
$('p').text("I'm a form ~").removeClass('submit');
$('input:submit').attr("disabled", false);
});
</script>
</body>
</html>

<script type="text/javascript">
function validateForm(formObj) {
if (formObj.username.value=='') {
alert('Please enter a username');
return false;
}
formObj.submitButton.disabled = true;
formObj.submitButton.value = 'Please Wait...';
return true;
}
</script>
<form name="frmTest" action="" method="post" onsubmit="return validateForm(this);">
Username: <input type="text" name="username" value="" /><br />
<input type="submit" name="submitButton" value="Submit" />
</form> ​​​​​​