Dynamic Text Preview

Hey everyone

I am working on this form which I am trying to get to preview dynamically. A bit like the process of setting up google adsense ads.

So I have several textboxes, and a button that I can click which will show a palette of colours.

Now when a user enters some text in a textbox it would automatically update the "holder" with that text. And the same would be with the colours.

How can I go about starting something like that?

Thanks everyone in advance

 

Use JavaScript DOM...

 

do you have any examples?

 

See this one: How to change page contents dynamically using JavaScript

 

No it's not quite what I am after.

I am after something that gets modified as the user types inside a textbox...

 

Sure. you could call a function written in JavaScript on text change event where the JavaScript function change the content of some text fields?

 

Really?

How?

Would it allow for also changing borders of tables etc....

 

Have a look at the jqueryui autocomplete widget. I've used that many times.

http://jqueryui.com/demos/autocomplete/

There are several other AJAX solutions out there to do what you're looking to do but I am a huge jquery fanboy.

 

Probably anything actually. Basically you can change the CSS dynamically using JavaScript.

Regarding borders.... You can do this easily with CSS/JavaScript.
Say your css is as below.

<style type="text/css">
table {
border-collapse:collapse;
}
.borderTable td {
border: 1px solid black;
}
</style>

Now you can set this to table "tabMain" using following JavaScript:
document.getElementById("tabMain").className="borderTable";

So what you have to do is, call this code as required on form changes...
For example, if you want to change it based on text entry, use following format. Note that changeSomething is the JavaScript function.
<input type='text' value='abc' onchange='changeSomething(this);' />

See Events and Event Handlers in JavaScript.