Submit form data from a Javascript message box

aspless · June 12th, 2009, 02:35 PM

Chaps,

I have been working on a JavaScript message box for want of a better word to essentially pop up for informational tasks.

What i have been trying to do is add a form within the message box which transfers the data to a new page.

The frustration is that my rambling code does work in Explorer but not in Firefox.

Firstly i have some code for controlling a Div element which produces the message box

Code:

<script language="JavaScript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt() {
  if (dom) {document.getElementById("layer1").style.visibility='hidden';}
}
function showIt() {
  if (dom) {document.getElementById("layer1").style.visibility='visible';}
}
// -->
</script>

I then give the Div some style - No pun intended

<style>
div.visibleMsg {
position: absolute;
top: 300px;
left: 300px;
width: 300px;
background: #6382d2 url("/images/icons/info-i-icon.gif");
background-repeat:no-repeat;
color: #FFF;
border: 1px solid #3a5daf;
border-right-width: 2px;
border-bottom-width: 2px;
padding-left:30px;
padding-right:3px;
padding-bottom:10px;
padding-top:3px;
text-align:left;
visibility:hidden;
}
</style>

The Div Element and Form

Code:

<div id="layer1" class="visibleMsg">
<form name="form" onSubmit="SendData(this.form);return false;">
<br><b>Please Change Name</b><br><br>
Old Name <input type="text" name="txt1" value=""><br>
New Name <input type="text" name="txt2" value=""><br>
<input type="image"  src="images/buttons/b-update.png">
</form>
</div>

Then i have tried as best to create a function to transfer the form data to a new page

Code:

<script language="javascript" type="text/javascript">
function SendData (form){
var oldNm = document.all.txt1.value;
var NewNm = document.all.txt2.value;
window.navigate("default.asp?on="+oldNm+"&nn="+NewNm+"");
}
</script>

Lastly for testing purposes i am just using a form button to trigger the showIt function

Code:

<form><input type="button" value="Open pop-up" onClick="showIt()"></form>

What i am trying to achieve is to transfer the data to a new page which is IE and Mozz compatible.

I hope my ramblings make sense. Any thoughts greatly appreciated

Cheers

Aspless

philip_cole · June 12th, 2009, 03:32 PM

Hi Aspless,

I assume you can see the form and enter the details OK but the form isn't submitting properly?

window.navigate is an IE-only function, and has never been properly implemented Firefox. You should use window.location = "http://..." instead.
See https://bugzilla.mozilla.org/show_bug.cgi?id=310191

HTH
Phil

P.S. You may want to consider giving the text boxes ids and in SendData() use document.getElementById("txt1") instead of document.all.txt1 - another standards thing

Old Pedant · June 12th, 2009, 06:50 PM

document.all is *STRICTLY* an MSIE "feature" (or, rather, lack thereof).

The only browsers that *NEED* to use document.alll are MSIE 4 and earlier. Unless you really need to support 1999-vintage browsers, stop using document.all.

Instead, use ONLY document.getElementById(...)

But you don't need to use EITHER one of those here! You passed along the form, so why not USE it??

Well...you would have, but you goofed a little.

So:

Code:

<form name="form" onSubmit="SendData(this);return false;">

<script language="javascript" type="text/javascript">
function SendData (form)
{
    var oldNm = form.txt1.value;
    var NewNm = form.txt2.value;
    location.href = "default.asp?on=" + escape(oldNm) + "&nn=" + escape(NewNm)
}
</script>

Now explain to me how this is any different than simply letting the <FORM> be submitted????????

Old Pedant · June 12th, 2009, 06:58 PM

Quote:

P.S. You may want to consider giving the text boxes ids and in SendData() use document.getElementById("txt1") instead of document.all.txt1 - another standards thing

I don't get it. Why??

Field names are not only standard, they are *REQUIRED* if you want a form field to be submitted to the next page. Try it some time: Omit the name= from a form field sometime and then try to find it in your PHP/ASP/JSP code.

And if you give a form field a name, then the ID is *TOTALLY UNNECESSARY*.

Instead of using document.getElementById("xxx") you can just do document.FormName.xxx. If you need the form name and/or field name to be in variables, you just do document.forms[formname].elements[fieldname] (though there are shorter variants of those).

philip_cole · June 13th, 2009, 06:40 AM

The point I was making was that as you said yourself:

Quote:

Originally Posted by Old Pedant

document.all is *STRICTLY* an MSIE "feature"

I simply suggested using document.getElementById to get rid of document.all as it is pretty much the direct equivalent and is used elsewhere in the script. As always there are a dozen ways to do anything - you could use document.getElementsByTagName('input')[1] and avoid setting any names or ids altogether if you reeeeally wanted to. But yes, your solution of using document.form is probably a couple of ticks quicker than mine.

And where exactly did I say to remove the name attributes??

Old Pedant · June 14th, 2009, 03:36 PM

No no...I overenthused. I just meant that *IF* you give a form field a NAME attribute--and you have to if you want the field to be submitted to the next page via the form posting--*THEN* there is no need to *ALSO* give it an ID.

There are, of course, times when you want a form field but don't want it to be submitted, and then of course using an ID alone gives you all you want. And of course for non-form-fields the ID is the only way to go.

I think we are in violent agreement. Just I wasn't careful in my wording.

aspless · June 15th, 2009, 06:10 AM

Guys,

Thanks again for the assisstance.

Pleased to say the example Old Pedant provided and the correct 'location.href =' navigation has solved my issue.

Your further conversation has proved that i need to understand element control and the effective use of ID's more.

Cheers

Aspless