Using JavaScript to dynamically create a form

[Pace|Work]

I have a form which I would like to automatically be generated for me. Using server side is not an option - it must be run from my home folder basically.

So, JavaScript

I need to create <input name="MyChoice" value="bleh">

So, can I use JavaScript to dynamically write the above, or can it be done easily by using GET (i.e. input.htm?name=MyChoice) ?

Does that make any sense?

Thanks in advance, I'll clarify if needed.

P.

[GNEP]

Erm... first thing that comes to mind is the document.writeIn type of thing...

[Pace|Work]

Yeah, but can I write stuff on the fly? I want to type in "MyChoice", and change the name of that input field. Any other ideas on how to implement this are welcome, as in creating a more complex form?

Oh, this is a static page which I send to a perl script, the ones we have at the moment have "MyChoice" hardcoded - I'm trying to make that more flexible.

Edit: All I have to do is POST <tt> 'variable'="true"</tt> to a perl script, and I need to change 'variable'

[GNEP]

You can only change it with the document.writein when the page is loaded/refreshed. But you can force a refresh and send variables using the pagename.html?varName=value notation

[Pace]

Ok, and how do I get JS to use that variable - just call it as normal? (me runs off to test )

Edit: So far I have

<form action="idchooser.htm" method="get">
  <input type="text" name="id" value="EnterID"/>
  <input type="submit" />
</form>

I should be able to get the form working once I have more time, if anyone has quick tips then drop them in though. Back later, cheers, P.

Edit 2: Updated the code, form is ok - how, how do I import get variables into my scripts?

Calling it directly calls an error, and if I declare "id" it just proved to be 'undefined'. Hohum...

[spazm_1999]

Not sure i understood everything... but... if i did, this will do the thing... i already use it on some of my forms.

Well if all the fields you have to send are textbox, you could add a hidden textbox in which you'd concatenate all your fields and then do a document.location to call your perl page.

In more detail. You could add a textbox with the name=fieldname an other one with fieldvalue and an hidden third one field result. Then add 2 button one whould be concatenate and one send query. On the first one i'd do something like this.

if (txtresult != '')
txtresult = txtresult + '&' + fieldname + '=' + fieldvalue;
else
txtresult = fieldname + '=' + fieldvalue;

The other button would have sonthing like this as code.

document.location = 'perl.pl?' + txtresult;


----------

To get the value of a field in a form... i put a name on the form... the i call document.forms.<formname>.<field>.value

example :

&lt;form name="test" action="#" method="get"&gt;
&lt;input type="text" name="testfield"&gt;
&lt;/form&gt;

document.forms.test.testfield.value = 'something';

If you need more help feel free to pm me.

Spazm

[spazm_1999]

Oh and there's a tutorial at

http://www.faqts.com/knowledge_base/view.phtml/aid/1785/fid/255

that show's exactly how to add and remove dynamic items on a form.

Spazm

[Pace]

Well, I can use forms to call a page via GET, which gives me:

idchooser.htm?id=12345

I need to use javascript to

document.write("<input name=\"" + id + "\" value=\"inGroup\">");

In other words, to output

<input name="12345" valud="inGroup">

I then have to POST that to the Perl script. This might still not work, as GET doesn't

So, as it stands, the problem is getting "idchooser.htm?id=12345" to create a variable that I can use in JavaScript. I should probably be able to do everything from that point on

P.

[GNEP]

Can you post up the code that you are trying to retrieve the GET passed variable with?

[Pace]

document.write("<input name=\"" + id + "\" value=\"inGroup\">");

I presumed I would have to import the GET variable somehow though, and I did download something the other night, I'll just go find it...

Edit:

function getParams() {
	var idx = document.URL.indexOf('?');
	var params = new Array();
	if (idx != -1) {
		var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
		for (var i=0; i<pairs.length; i++) {
			nameVal = pairs[i].split('=');
			params[nameVal[0]] = nameVal[1];
		}
	}
	return params;
}
params = getParams();

This works erratically...

[GNEP]

That looks much more complicated than it needs to be I think... let me go check...

[Pace]

Yeah, that's taking every GET argument and putting it into an array - where the index is the name of the argument. (I think)

[GNEP]

Are you just using the one variable pair? If so, then you can do it much more simply...

[Pace|Work]

Yeah, just the one

[GNEP]

window.location.search will return everything after the ? of the URL generated by the GET function. Unfortunately there doesn't appear to be a neat way to then split the name/value pairs from within this string.

For one pair only:

http://www.developer.com/lang/other/article.php/639611

For more pairs, and a better description of what's going on:

http://javascript.about.com/library/scripts/blquerystring.htm

Hopefully you should be able to get something reliable out of these...

Gnep