DHTML-Urgent plz

**nandoo** · 05-02-2005, 04:37 AM

Hi,
This is Nandoo,new to webDeveloper.I want to make a script which should work in the following manner.
In my web page,I want to have a button(with name add).whenever i click that button it should generate a select list and also 3 text Fields.
Whenever i select the list items the text fields should change accordingly.
I am struggling for the past 4 days here since i m babe to WebDeveloping.
plz help me.. i have created the generation of selection List and also text fields.Now i need to change the text based on the selected items.
plz...

I dont know how to get the selection list in another javascript function so that i could change the values of the text boxes plz
i m a new guy ...reply me urgent plz

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM form elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function appendtable()
{
var div = document.getElementById("divide");
var ControlsDesign = document.createElement("div");

var table_cd = document.createElement("table");
var tr_cd = document.createElement("tr");
var td_cd = document.createElement("td");

var table_content = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");

var oSelect=document.createElement("select");
var oOption = document.createElement("OPTION");
var t = document.createTextNode("Ferrari");
oOption.setAttribute("value", 4);
oOption.appendChild(t);
oSelect.appendChild(oOption);

var oOption1 = document.createElement("OPTION");
var t = document.createTextNode("Fessari");
oOption1.setAttribute("value", 4);
oOption1.appendChild(t);
oSelect.appendChild(oOption1);

var txt1=document.createElement("input");
txt1.type="text";
txt1.value="mamu"

var txt2=document.createElement("input");
txt2.type="text";
txt2.value="Machan"

var txt3=document.createElement("input");
txt3.type="text";
txt3.value="maplai"

td.appendChild(oSelect);

oSelect.onchange="txtChange()";
td.appendChild(txt1);
td.appendChild(txt2);
td.appendChild(txt3);
tr.appendChild(td);
table_content.appendChild(tr);
td_cd.appendChild(table_content);
tr_cd.appendChild(td_cd);
table_cd.appendChild(tr_cd);
ControlsDesign.appendChild(table_cd);
div.appendChild(ControlsDesign);
document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;
}

function txtChange()
{
var di = document.getElementsByTagName("select");
//when i tried to get the selected value its showing error.
}
</script>

<style type="text/css">

</style>

</head>
<body>
<input type="button" onclick="appendtable()" value="Press me">
<div id="divide"></div>

</body>
</html>

thanks in advance....
nandoo

**mwinter** · 05-02-2005, 07:04 PM

Originally Posted by nandoo

In my web page,I want to have a button(with name add).whenever i click that button it should generate a select list and also 3 text Fields.

This is very simple, but I'm confused about why you're doing some of the things evident in your code.

You create two tables and a div element. One table goes inside the other. The outer table is appended to the created div element, and that is added to an existing div. When you add the form controls, they are all inserted into one cell in the innermost table. Frankly, this structure makes absolutely no sense and results in a very badly constructed document tree. It would make more sense to have a single table for everything, and the controls are inserted into rows within that table.

I've produced code to do that in the past. An example already exists on the Web from a previous demonstration.

Whenever i select the list items the text fields should change accordingly.

How are they supposed to change. You don't provide any details. Is one particular input element supposed to take a value from the select element? Do they all change? Does it depend on the selected value?

var oSelect=document.createElement("select");
var oOption = document.createElement("OPTION");
var t = document.createTextNode("Ferrari");
oOption.setAttribute("value", 4);
oOption.appendChild(t);

You can, and should, just use the text and value properties when creating a option element within a HTML (but not a true XHTML) document. IE can be odd in its use of setAttribute, so it can be safer to sidestep that issue entirely.

oSelect.appendChild(oOption);

You cannot use appendChild to add an option element to a select element. IE will simply fail to do this properly. You must use the add method itself.

Code:

var s = document.createElement('select'),
    o = document.createElement('option');

    o.value = '4';
    o.text = 'Ferrari';
    s.add(o, null);

This is a very simplistic example which will not work in IE because Microsoft is a pain in the ass. It also doesn't contain any feature detection, which is vital when working with the DOM. I'll provide an alternative in a follow-up post, once you've address some of my earlier questions.

oSelect.onchange="txtChange()";

The intrinsic event properties expect a function, not a string. Though you provide a string when writing a listener in HTML, that code is converted internally into a function. You are required to do that yourself within a script. The solution is extremely simple though:

Code:

oSelect.onchange = txtChange;

Do not include parentheses () at the end as that will call the function. Here, we are just assigning a reference to that function.

document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;

I really have no idea why you think that's necessary. If it actually does something useful (perhaps addressing the problem above), it's a truly horrible hack.

var di = document.getElementsByTagName("select");

This would retrieve every select element in the document as a collection (think: a simple array). I don't think that's a particularly good idea. The this operator will refer to the select element that fired the txtChange function:

Code:

oSelect.onchange = txtChange;

function txtChange() {
  var selectElement = this;
}

The code you presented clearly needs work. However, you'll have to be very specific with what you want to achieve. Some people around here might be able to read minds. I can't.

Mike

Thread: DHTML-Urgent plz

Thread Tools

Search Thread

DHTML-Urgent plz

Bookmarks

Bookmarks

Posting Permissions