Problem: posting hidden fields to a different page

[Itai]

I have an aspx file named index.aspx which contains two ‘form'
sections, one that has the runat=server attribute (e.g From1) and one
which is a regular HTML form (e.g SignInForm).

I am trying to copy values from two INPUT controls that are located
within the Form1 section to hidden INPUT controls located in the
SignInForm and post the SignInForm form hidden controls values to a
different page (e.g login.aspx)

Problem is that after filling in values and hitting the submit button
the browser makes the post ‘click sound' but does not display
login.aspx, it continues to display the index.aspx page (the entered
values are cleared from the input controls).

BTW: Values are copied to the hidden INPUT controls in SignInForm (I
checked with alert())


Following is the code:

function SubmitLoginCredentials()
{

var homeForm, postForm

if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {

homeForm = document.forms["Form1"];
postForm = document.forms["SignInForm"];
}
else {

homeForm = document.Form1;
postForm = document.SignInForm;
}

postForm["userid"].value = homeForm["uid"].value;
alert(postForm["userid"].value);
postForm["password"].value = homeForm["pwd"].value;
alert(postForm["password"].value);
postForm.submit();
}


<form id="SignInForm" name="SignInForm"
action="http://localhost/login.aspx" method="post" target="_self">
<input type="hidden" name="userid"> <input type="hidden"
name="password">
</form>



<form id="Form1" method="post" runat="server">

<DIV style="MARGIN-TOP: 10px; FONT-SIZE: 10pt; MARGIN-LEFT: 10px;
COLOR: white; FONT-FAMILY: Arial">Already Registered? Sign-in
here&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <asp:hyperlink id="Hyperlink1"
runat="server" ForeColor="White" CssClass="cssDefaultTextFontBlack">
Forgot your password? Click here</asp:hyperlink><BR>
<BR>
Username:&nbsp;<INPUT id="uid" style="WIDTH: 80px; HEIGHT: 16pt"
type="text" maxLength="16" size="8" name="uid">&nbsp;
Password:&nbsp;<INPUT id="pwd" style="WIDTH: 80px; HEIGHT: 16pt"
type="password" maxLength="20" size="8" name="pwd">&nbsp;&nbsp; &nbsp;
<INPUT id="Submit1" style="FONT-SIZE: 8pt; WIDTH: 64px; FONT-FAMILY:
Ariel; HEIGHT: 21px" onclick="SubmitLoginCredentials()" type="submit"
value="Submit" name="btnlogin"></DIV>

</form>


Thanks in advance,

-Itai

 

[Harag]

I have an aspx file named index.aspx which contains two ‘form'
sections, one that has the runat=server attribute (e.g From1) and one
which is a regular HTML form (e.g SignInForm).

I am trying to copy values from two INPUT controls that are located
within the Form1 section to hidden INPUT controls located in the
SignInForm and post the SignInForm form hidden controls values to a
different page (e.g login.aspx)

Problem is that after filling in values and hitting the submit button
the browser makes the post ‘click sound' but does not display
login.aspx, it continues to display the index.aspx page (the entered
values are cleared from the input controls).

BTW: Values are copied to the hidden INPUT controls in SignInForm (I
checked with alert())


Following is the code:

function SubmitLoginCredentials()
{

var homeForm, postForm

if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {

homeForm = document.forms["Form1"];
postForm = document.forms["SignInForm"];
}
else {

homeForm = document.Form1;
postForm = document.SignInForm;
}

postForm["userid"].value = homeForm["uid"].value;
alert(postForm["userid"].value);
postForm["password"].value = homeForm["pwd"].value;
alert(postForm["password"].value);
postForm.submit();
}


<form id="SignInForm" name="SignInForm"
action="http://localhost/login.aspx" method="post" target="_self">
<input type="hidden" name="userid"> <input type="hidden"
name="password">
</form>



<form id="Form1" method="post" runat="server">

<DIV style="MARGIN-TOP: 10px; FONT-SIZE: 10pt; MARGIN-LEFT: 10px;
COLOR: white; FONT-FAMILY: Arial">Already Registered? Sign-in
here&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <asp:hyperlink id="Hyperlink1"
runat="server" ForeColor="White" CssClass="cssDefaultTextFontBlack">
Forgot your password? Click here</asp:hyperlink><BR>
<BR>
Username:&nbsp;<INPUT id="uid" style="WIDTH: 80px; HEIGHT: 16pt"
type="text" maxLength="16" size="8" name="uid">&nbsp;
Password:&nbsp;<INPUT id="pwd" style="WIDTH: 80px; HEIGHT: 16pt"
type="password" maxLength="20" size="8" name="pwd">&nbsp;&nbsp; &nbsp;
<INPUT id="Submit1" style="FONT-SIZE: 8pt; WIDTH: 64px; FONT-FAMILY:
Ariel; HEIGHT: 21px" onclick="SubmitLoginCredentials()" type="submit"
value="Submit" name="btnlogin"></DIV>

Try changing the type of the submit button to "button".

Another way would be to move the onclick event to the form onsubmit
event and then put return false in the code that copies the values
(just after the .submit() method.

At the moment your currently submiting 2 forms to the server.

HTH

Al.

 

[Itai Itai]

"Try changing the type of the submit button to "button"."

Solved the problem. Thank you!

"At the moment your currently submiting 2 forms to the
server."

The button in Form1 is calling a function that explicitly submits the
'SignInForm' form (e.g postForm.submit()
Why do think that this submits Form1 as well?

"Another way would be to move the onclick event to the form onsubmit
event and then put return false in the code that copies the values(just
after the .submit() method."

'onsubmit' fires when a form is about to be submitted.
however, I still need to explictly issue a submit to 'SignInForm' which
in turn fires its 'onsubmit' event.

BTW putting 'return false' will kill the 'onsubmit' event or am I
misunderstanding this javascript conditional return behavior?

 

[Harag]

"Try changing the type of the submit button to "button"."

Solved the problem. Thank you!

No Probs.

"At the moment your currently submiting 2 forms to the
server."

The button in Form1 is calling a function that explicitly submits the
'SignInForm' form (e.g postForm.submit()
Why do think that this submits Form1 as well?

When you had the button as type "Submit" even though the onclick
called the validating/copying function which then submitted the OTHER
form this form is still being submitted, so in a sence your submitting
2 differnt forms (1 via normal means, and 1 via the .submit() method)
which you shouldn't do as the receiver (asp/server code) only receives
one form submittal.

2 ways in stopping the first form to be submitted...

1) change the submit button to a normal button - like you have already
done.

2) cancel the submission of the form, by returning false in the
onsubmit event. The OTHER (hidden) form will still get posted via the
method .submit().

"Another way would be to move the onclick event to the form onsubmit
event and then put return false in the code that copies the values(just
after the .submit() method."

'onsubmit' fires when a form is about to be submitted.
however, I still need to explictly issue a submit to 'SignInForm' which
in turn fires its 'onsubmit' event.

Correct.... But you don't actually want the information from the
"visible" form1 to be submitted do you? or am I missing something
here? (btw I don't use aspX - so just going on classic asp)

Personally I don't see why your copying the information to a 2nd
form... why not just post the info in the first form?

BTW putting 'return false' will kill the 'onsubmit' event or am I
misunderstanding this javascript conditional return behavior?

yes/no...

The onsubmit event will still fire when the user clicks the submit
button so this is where you can put validation code... if the
validation is wrong (ie invalid email etc) then returning false would
cancel the actual submit to the server, where returning true would
continue the submittal to the server.

eg

<script type="text/javascript">
function validate() {
if (document.forms["testForm"].elements["userName"].value =="") {
alert("need to enter your name");
return false
} else {
return true;
}
}
</script>

<!-- note: action in form is left blank so will post to self -->
<form name="testForm" onsubmit="return validate()" method="get">
<input type="text" name="userName" value="" size="30" maxlength="30">
<input type="submit" value="Submit Text">
</form>