Dynamically move elements into form ?

F

fidodido

I was asked to do this....
Dynamically move "text1" and "hidden1" into the "form1" .....
Not by creating new elements, but moving the "text1" and "hidden1"
elements into the form using javascript, after i click the submit
button....
So if i loop the "form1", i can get the values for "text1" and
"hidden1" too.....

Is that possible ?

Here is the source ....

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>...</title>
<script type="text/javascript">
function submitIt()
{
var obj_text1 = document.getElementById("text1");
var obj_hidden1 = document.getElementById("hidden1");
var oFormObj = document.getElementById("form1");
for (var i=0;i<oFormObj.length;i++)
{
alert(oFormObj.name+" -- "+oFormObj.type)
}
}
</script>
</head>

<body>

<table border="0">
<tr>
<td>
<input type=text value='text111' name=text1 id=text1 >
<input type=hidden value='hidden111' name =hidden1 id=hidden1 >

<form id=form1 name=form1 action=test.html>

<input type=text value='text222' name =text2 id=text2 >
<input type=hidden value='hidden222' name =hidden2 id=hidden2>

<br>
<input type=button value=submit onClick="submitIt()">

</form>
</td>
</tr>
</table>

</body>
</html>
 
R

RobG

fidodido said:
I was asked to do this....
Dynamically move "text1" and "hidden1" into the "form1" .....
Not by creating new elements, but moving the "text1" and "hidden1"
elements into the form using javascript, after i click the submit
button....
So if i loop the "form1", i can get the values for "text1" and
"hidden1" too.....

Is that possible ?
Click to expand...

Why not just put them in the form in the first place? This seems
rather pointless, but anyway...

Here is the source ....
Click to expand...

When posting code, please indent using 2 or 4 spaces, not tabs.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>...</title>
<script type="text/javascript">
function submitIt()
Click to expand...

Change this to (see below):

function submitIt(formObj)


{
var obj_text1 = document.getElementById("text1");
var obj_hidden1 = document.getElementById("hidden1");
var oFormObj = document.getElementById("form1");
Click to expand...

You don't need to use getElementById for the form, just pass a
reference to the form from the submit button.


function submitIt(formObj)
{
var obj_text1 = document.getElementById("text1");
var obj_hidden1 = document.getElementById("hidden1");

formObj.appendChild(obj_text1.parentNode.removeChild(obj_text1))
formObj.appendChild(obj_hidden1.parentNode.removeChild(obj_hidden1))
}


[...]
</script>
</head>

<body>

<table border="0">
<tr>
<td>
<input type=text value='text111' name=text1 id=text1 >
<input type=hidden value='hidden111' name =hidden1 id=hidden1 >

<form id=form1 name=form1 action=test.html>

<input type=text value='text222' name =text2 id=text2 >
<input type=hidden value='hidden222' name =hidden2 id=hidden2>

<br>
<input type=button value=submit onClick="submitIt()">
Click to expand...


If you want this to submit the form, make the button a submit button:

<input type="submit" value="Submit" onclick="submitIt();">


Attribute values should always be quoted, even though it's not always
necessary.

[...]
 
F

fidodido

Thanx!!!! Thought it can't be done.. :)

Seriously i am not sure why I was asked to do this specific way....
 
D

Danny

Well, for any Form element in the page, there have to have a parent
FORM element, so, you cannot just drop an <input> element like so
without the browser, either tossing it or giving it a parent in
quirk-mode or sometimes in transitional DTD. You can add text as
argument to a property(innerHTML) of the <FORM> in order to produce
those 2 inputs, however, I'm assuming what you want is to produce is
to add these 2 new elements upon some user request, like [add extra
options] button or so, you can do so by including them from the getgo
in the Form with the rest of the elements, and toggle their
..style.display property or .style.visibility upon and onclick on a
link or a button or else.



Danny
 
F

fidodido

If let say, by not using appendChild, is there any other way? coz if I
use appendChild, the layout will change...

I am not allowed to add any table tags...and the submit type has to be
button .....??

The source -

<html>
<head>
<title>...</title>
<script type="text/javascript">
function submitIt()
{
var obj_text1 = document.getElementById("text1");
var obj_hidden1 = document.getElementById("hidden1");
var formObj = document.getElementById("form1");


//formObj.appendChild(obj_text1.parentNode.removeChild(obj_text1))

//formObj.appendChild(obj_hidden1.parentNode.removeChild(obj_hidden1))


for (var i=0;i<formObj.length;i++)
{
//alert(formObj.name+" -- "+formObj.type)
}
}
</script>
</head>
<body>
<input type=text value='text111' name=text1 id=text1>
<input type=hidden value='hidden111' name =hidden1 id=hidden1>
<form id=form1 name=form1>
<input type=text value='text222' name =text2 id=text2>
<input type=hidden value='hidden222' name =hidden2 id=hidden2>
<br>
<input type="button" value="Submit" onclick="submitIt();">
</form>
</body>
</html>
 
R

RobG

fidodido said:
If let say, by not using appendChild, is there any other way? coz if I
use appendChild, the layout will change...
Click to expand...

You could instead use insertBefore with the form's firstChild. What
does it matter if the layout changes? It is done onsubmit, the user has
no further interaction with the form.

I am not allowed to add any table tags
Click to expand...

The form is completely enclosed within a table cell, the suggested code
does not add any table elements, it just moves the two input elements
into the form.

...and the submit type has to be button .....??
Click to expand...

Is that a statement or a question? As posted, the form has no submit
button. The 'submit' button does not attempt to call the form's submit
method, so the form will not be submitted.

The source -

<html>
<head>
<title>...</title>
<script type="text/javascript">
function submitIt()
{
var obj_text1 = document.getElementById("text1");
var obj_hidden1 = document.getElementById("hidden1");
var formObj = document.getElementById("form1");
Click to expand...

The following will maintain the layout, provided there is nothing else
happening in the table or form.

formObj.insertBefore(
document.createElement('br'),
formObj.firstChild);
formObj.insertBefore(
obj_text1.parentNode.removeChild(obj_text1),
formObj.firstChild);
formObj.insertBefore(
obj_hidden1.parentNode.removeChild(obj_hidden1),
formObj.firstChild);
}
</script>
Click to expand...
[...]

I still don't understand why the elements aren't included in the form in
the first place, then there would be no need for JavaScript, nor the
need to play with the document structure without modifying the presentation.
 
Z

zif

Danny said:
Well, for any Form element in the page, there have to have a parent
Click to expand...

There is only one 'form element', and that is denoted using the HTML
form tag set. Other elements may be form controls, but they aren't
'form elements'.

Any element that can be a form control (input, select, button, etc.) can
also be used outside a form. There is no requirement that they be in a
form.

FORM element, so, you cannot just drop an <input> element like so
without the browser, either tossing it or giving it a parent in
quirk-mode or sometimes in transitional DTD.
Click to expand...

Complete rubbish.

You can add text as
argument to a property(innerHTML) of the <FORM> in order to produce
those 2 inputs, however, I'm assuming what you want is to produce is
to add these 2 new elements upon some user request, like [add extra
Click to expand...

No, the intention was stated quite clearly that the OP wishes to move
the input elements into the table. Any use of innerHTML for that is
almost certain to fail in most browsers.


[... more rubbish snipped ...]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Move a Form action="ThatPage.php" to an <input type="??" > inline 1
Mandatory Elements To Conduct JavaScript Form Manipulation 7
Registration form 13
Script to send email not working 1
Registration Form 7
Help needed with thank you message 5
Only one table shows up with the information 2
Checking dynamically populated data using ajax with user entered value 5

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 337

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top