I'm implementing a simple web-page, in that page, I have multiple div objects, what I'm trying to do is refresh the contents of a single div based on the user clicking a button or entering text in an input field.

So far I've found solutions online that apply to php which I know nothing about to be honest, can somebody provide me with a solution using javascript or jquery and simple html?

I'm implementing a simple web-page, in that page, I have multiple div objects, what I'm trying to do is refresh the contents of a single div based on the user clicking a button or entering text in an input field.

So far I've found solutions online that apply to php which I know nothing about to be honest, can somebody provide me with a solution using javascript or jquery and simple html?

• javascript
• jquery
• html

• 3 what did you try so far? – Ariful Islam Commented Dec 29, 2011 at 12:31
• 1 Do you intend to store the information somehow, or do you just want to manipulate the DOM based on some user input? If you intend to store the information, you will have to look at some kind of server-side code, like PHP, ASP.Net or similar. – Christofer Eliasson Commented Dec 29, 2011 at 12:32
• this should be possible but you might to to flesh out your question a bit more in terms of the structure of the page. Is there one text box for the page or is it one text box per div? – martincarlin87 Commented Dec 29, 2011 at 12:33
• 1 so, if the div content is "blah blah" and the user clicks on a button, what do you want to display in the div? – Pencho Ilchev Commented Dec 29, 2011 at 12:33

3 Answers 3

The simplest route if you're new to all of this is to change the html of the div. Given a div with id "ponies", you can change its contents via:

document.getElementById("ponies").innerHTML = '<p>new html block</p>'

If you want to swap out a div contents for another, you can opt instead to alter the DOM tree by a createChild after the div, and then removing the div. The innerHTML approach, while simple to understand, is a bit of a blunt (and slow) tool, pared to modifying the DOM itself. But if you're doing it rarely, and the html is simple, who cares?

If you have a form input for a forename then you can do:

function showForename(forenameDiv) {
    var text = "<p>Your forename is " + document.getElementById(forenameDiv).text + "</p>";
    document.getElementById("ponies").innerHTML = text; 
}

And put the call in the button's onClick event:

<input type="button" value="Who am I?" onclick="showForename('forenameinput')" />

Where forenameinput is the id of the forename form input. To learn more about all this stuff, look at the w3schools website.

an example with jquery:

$("input.button").click(function(){
   $('div#content').load('ajax/test.php', function() {
      console.log('loaded.');
   });
});

Based on @PhilH s answer here a cleaner jQuery solution:

jQuery( '#yourInput' ).click( function(){
    jQuery( '#ponies' ).text( 'You wrote: ' + this.value );
} );

Even in jQuery you can type in pure HTML if you want:

jQuery( '#yourInput' ).click( function(){
    jQuery( '#ponies' ).html( '<span>You wrote: <b>' + this.value + '</b></span>' );
} );