By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,602 Members | 1,507 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,602 IT Pros & Developers. It's quick & easy.

Forms without HTML

P: n/a
Hi all --

I'm trying to create a hidden form in the document using only
Javascript -- I don't know what form I want until the user clicks a
button --

I tried the following code, which does create the objects in the
document hierarchy; the problem is it does not insert the HIDDEN field
into the list of form elements[].

<HTML>
<HEAD>
<SCRIPT LANG=javascript>
// recreate the following HTML form:
// <form method="GET" action="http://search.yahoo.com/bin/search">
// <input type="text" name="p" value="" size=35>
// </form>

function submitToYahoo() {
var first = true;
if (first) {
alert("creating form");
var yahooForm = document.createElement("Form");
yahooForm.name = "yForm"
yahooForm.action = "http://search.yahoo.com/bin/search"
yahooForm.method = "GET";
yahooFormInput = document.createElement("Hidden");
yahooFormInput.name = "p";
yahooForm.appendChild(yahooFormInput);
document.body.appendChild(yahooForm);

first = false;
}
alert(document.forms.length); // I get 2 here
alert(document.forms[1].name); // I get "yForm", as expected
alert(document.forms["yForm"].elements.length); // I get 0, sadly
alert(document.forms["yForm"].childNodes.length); // I get 1, as expected
alert(document.forms["yForm"].childNodes[0].name); // I get "p", as expected
document.forms["yForm"].elements[0].value =
document.forms["theVisible"].input1.value; // runtime error: elements[0] has no properties
document.forms["yForm"].submit();
}

</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<form id=theVisible> <input type=text id="input1" size=35 onBlur=submitToYahoo()></form>

</BODY>
</HTML>

Any ideas?

Thanks in advance,
Bob
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Bob Nolty <no***@spiritvideo.com> writes:
yahooFormInput = document.createElement("Hidden");


You mean
yahooFormInput = document.createElement("input");
yahooFormInput.type = "hidden";
There is no element called "hidden".

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2

P: n/a
Lasse Reichstein Nielsen <lr*@hotpop.com> writes:
You mean
yahooFormInput = document.createElement("input");
yahooFormInput.type = "hidden";
There is no element called "hidden".


You are right! I was confused because there *is* a class called
Hidden which inherits from Input (documented in the Client-Side
JavaScript Reference in O'Reilly's "javascript: The Definitive Guide,
4th Edition"); however, it appears that "Hidden" is not a proper
argument to createElement (it doesn't throw an error, though :-/ )

Thanks for getting me back on the right track,
Bob
Jul 20 '05 #3

P: n/a
what exactly should your page do? the solution seems a little complicated!

"Bob Nolty" <no***@spiritvideo.com> wrote in message
news:m3************@spiritvideo.com...
Hi all --

I'm trying to create a hidden form in the document using only
Javascript -- I don't know what form I want until the user clicks a
button --

I tried the following code, which does create the objects in the
document hierarchy; the problem is it does not insert the HIDDEN field
into the list of form elements[].

<HTML>
<HEAD>
<SCRIPT LANG=javascript>
// recreate the following HTML form:
// <form method="GET" action="http://search.yahoo.com/bin/search">
// <input type="text" name="p" value="" size=35>
// </form>

function submitToYahoo() {
var first = true;
if (first) {
alert("creating form");
var yahooForm = document.createElement("Form");
yahooForm.name = "yForm"
yahooForm.action = "http://search.yahoo.com/bin/search"
yahooForm.method = "GET";
yahooFormInput = document.createElement("Hidden");
yahooFormInput.name = "p";
yahooForm.appendChild(yahooFormInput);
document.body.appendChild(yahooForm);

first = false;
}
alert(document.forms.length); // I get 2 here
alert(document.forms[1].name); // I get "yForm", as expected
alert(document.forms["yForm"].elements.length); // I get 0, sadly
alert(document.forms["yForm"].childNodes.length); // I get 1, as expected alert(document.forms["yForm"].childNodes[0].name); // I get "p", as expected document.forms["yForm"].elements[0].value =
document.forms["theVisible"].input1.value; // runtime error: elements[0] has no properties document.forms["yForm"].submit();
}

</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<form id=theVisible> <input type=text id="input1" size=35 onBlur=submitToYahoo()></form>
</BODY>
</HTML>

Any ideas?

Thanks in advance,
Bob

Jul 20 '05 #4

P: n/a
Bob Nolty <no***@spiritvideo.com> wrote in message news:<m3************@spiritvideo.com>...
Lasse Reichstein Nielsen <lr*@hotpop.com> writes:
You mean
yahooFormInput = document.createElement("input");
yahooFormInput.type = "hidden";
There is no element called "hidden".


You are right! I was confused because there *is* a class called
Hidden which inherits from Input (documented in the Client-Side
JavaScript Reference in O'Reilly's "javascript: The Definitive Guide,
4th Edition"); however, it appears that "Hidden" is not a proper
argument to createElement (it doesn't throw an error, though :-/ )

Thanks for getting me back on the right track,
Bob


In my quick test, using IE6, document.forms['form_name'] does not
return the form. document.forms['form_id'] does return the form.

FWIW
Jul 20 '05 #5

P: n/a
"Greg" <gd*******@hotmail.com> wrote :
In my quick test, using IE6, document.forms['form_name'] does not
return the form. document.forms['form_id'] does return the form.


Quick test indeed, you have to slow down ;-).

Look at this:

<form name="fname" id="fid">

</form>
<script>
alert(document.forms['fname'].tagName);
alert(document.forms['fid'].tagName)
</script>

Jul 20 '05 #6

P: n/a
Vjekoslav Begovic wrote:
"Greg" <gd*******@hotmail.com> wrote :
In my quick test, using IE6, document.forms['form_name'] does not
return the form. document.forms['form_id'] does return the form.

Quick test indeed, you have to slow down ;-).

Look at this:

<form name="fname" id="fid">

</form>
<script>
alert(document.forms['fname'].tagName);
alert(document.forms['fid'].tagName)
</script>

Nice code, but to come up to speed you would need to match
a) Bob's problem code,
b) what Greg didn't say :)

Anyway, /incredible/ as it may seem, there seems to be a bug in IE.

If a child element of a form is inserted using DOM methods, the child
must be given an *id* attribute for it to be also made a named property
of the Form object under IE. It will go into the form's elements
collection regardless.

So right after
<unsnip>
yahooFormInput.name = "p";
</unsnip>
try adding
yahooFormInput.id = "p";

Doesn't work for radio input groups unfortunately, but innerHTML can be
used to programatically insert HTML for these.

HTH,
Dom

---
never knowingly make a miss-take.


Jul 20 '05 #7

P: n/a
"Dom Leonard" <do*************@senet.andthis.com.au> wrote in message
news:fM*******************@nnrp1.ozemail.com.au...
Vjekoslav Begovic wrote:
"Greg" <gd*******@hotmail.com> wrote :
In my quick test, using IE6, document.forms['form_name'] does not
return the form. document.forms['form_id'] does return the form.

Quick test indeed, you have to slow down ;-).

Look at this:

<form name="fname" id="fid">

</form>
<script>
alert(document.forms['fname'].tagName);
alert(document.forms['fid'].tagName)
</script>

Nice code, but to come up to speed you would need to match
a) Bob's problem code,
b) what Greg didn't say :)


Uppps. I need to be much more careful, sorry Greg.
So right after
<unsnip>
yahooFormInput.name = "p";
</unsnip>
try adding
yahooFormInput.id = "p";


If the form has the id, that is not nessesary.

Regards,

Vjekoslav
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.