PDA

Click to See Complete Forum and Search --> : Ist it possible: Not just dynamic form content but...

chill2677
10-24-2003, 12:25 PM
I intend to generate a form dynamically with PHP: e.g. 4 Input fields, but if more input fields than 4 are needed, it shall be possible to "generate" a 5th or 6th, by pressing on a button - without the page reloading!!! Is that possible with javascript at all?

(its no problem to do it with php by reloading the page, but no reloading should occur, if possible.)
Anyone got an idea if or how that could work?
thanks
chill
chill2677
10-24-2003, 01:55 PM
No one knows wether this at least theoretically possible? Guess then, since I think html code needed to be generated/changed dynamically?
khayman2001
10-25-2003, 12:41 AM
Well, there's a couple of things I thought to try. The first was something like this:

function AddInput()
{
window.document.write("<input type='text'>");
}

as a function and

<form name="the_form"><button onClick="AddInput();">add new form element</button>

but that erases everything else on the page...

The second one I came up with was this:

function AddInput2()
{
window.document.the_form.hidden_form_element.style.background = "white";
window.document.the_form.hidden_form_element.disabled = false;
window.document.the_form.hidden_form_element.focus();
}

and the body stuff:

<button onClick="AddInput2();">AddInput2</button><br />
<input type="text" name="hidden_form_element" disabled style="border: 0; background-color: transparent">
</form>


What the second one does is actually start with a transparent-background, no-border form element which has been disabled, then when you click the button, it changes the background color to white, and centers the cursor on it. However, if you were using a white-background page, that may not do so well, as the border still isn't there. I tried everything I could to alter the border (make it something from 0) but failed. Hope this helps.
chill2677
10-25-2003, 06:12 AM
thanks for your reply! Your ideas are not directly what I was looking for, but helped me find something that could work:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20656395.html

Basically it should be possible to do such a thing by using layers! Unfortunatelly I have no experience with them yet...
Fang
10-25-2003, 07:04 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add an input using the DOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
//<![CDATA[<!--
var num=1;
function AddInput() {
var oInput = document.createElement('input');
oInput.setAttribute('name', 'cell'+(num++));
oInput.setAttribute('type', 'text');

var beforeObj=document.getElementById("submit");
document.getElementById("formcontent").insertBefore(oInput, beforeObj);
}
//-->//]]>
</script>

<style type="text/css">
<!--
input {display:block;}
-->
</style>

</head>
<body>
<form action="#" id="myform" name="myform" onsubmit="AddInput(); return false;">
<div id="formcontent">
<input type="text" name="cell0" size="20" />
<button type="submit" id="submit">Another input</button>
</div>
</form>

</body>
</html>
chill2677
10-26-2003, 03:32 AM
Thanks, this looks almost exactly what I was looking for!
Seems it is hard to change the layout though!

Is there something like an 'insertAfter()' Method
-if you want to stay that 'add' button on top?
Fang
11-01-2003, 08:26 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add an input using the DOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
//<![CDATA[<!--
var num=1;
function AddInput() {
var oInput = document.createElement('input');
oInput.setAttribute('name', 'cell'+(num++));
oInput.setAttribute('type', 'text');

var beforeObj=document.getElementById("empty");
document.getElementById("formcontent").insertBefore(oInput, beforeObj);
// or instead of previous 2 lines
document.getElementById("empty").appendChild(oInput);
}
//-->//]]>
</script>

<style type="text/css">
<!--
input {display:block;}
-->
</style>

</head>
<body>
<form action="#" id="myform" name="myform" onsubmit="AddInput(); return false;">
<div id="formcontent">
<input type="text" name="cell0" size="20" />
<button type="submit" id="submit">Another input</button>
<div id="empty"></div>
</div>
</form>

</body>
</html>

The "empty" div is used to position the added inputs.