I have two different forms which are being included in a php file. Their visibility is based on a onClick JS toggle function. The toggle works great. However if I was to fill only one of the forms out and click its respective submit button, I get sent back to the same page rather than the action.php file that i have specifed with this in the broswer:
http://localhost/?user_temp=f&pass_temp1=f&pass_temp2=ff&email_temp=f&answer1=3&submitbtn=Signup+Now
And this Javascript error: "TypeError undefined document.hform.sSecureUser
Both Forms also have their own javascripts to MD5 some data and sSecureUser comes from the Signup Form.
Interestingly, if I was to remove one of the inlcude forms leaving only the Submit form lets say, it would work. It seems that these forms' javascript is clashing with one another :/ ...
I tried this but it didnt work for me since each one of my forms is using java script. PLEASE HELP AND THANKS IN ADVANCE!!!... Let me know if you would like to see any of my forms, javascript, or php files...
Toggle Code:
<div>
<a href="/forms/login-form.php" onclick="toggle_visibility('login-div'); return false;">Login</a>
<div id="login-div" style="display:none">
<?php include($_SERVER['DOCUMENT_ROOT'].'/forms/login-form.php');?>
</div>
<a href="/forms/signup-form.php" onclick="toggle_visibility('signup-div'); return false;">Sign up</a>
<div id="signup-div" style="display:none">
<?php include($_SERVER['DOCUMENT_ROOT'].'/forms/signup-form.php'); ?>
</div>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block'){
e.style.display = 'none';
}
else{
e.style.display = 'block';
}
}
//-->
</script>
</div>
Login Form:
<div id="hasJavaScript1" style="display:none">
<form name="login">
Username:
<input type="text" name="user_temp" size=32 maxlength=32><br>
Password:
<input type="password" name="pass_temp" size=32 maxlength=32><br>
<input onClick="passResponse(); return false;" type="submit" name="submitbtn" value="Login now">
</form>
<form action="/action/login-action.php" METHOD="POST" name="hform">
<input type="hidden" name="secureuser">
<input type="hidden" name="securepass">
</form>
</div>
<script language="javascript" src="/js/md5.js"></script>
<script language="javascript">
<!--
document.getElementById('hasJavaScript1').style.display = 'block';
function passResponse() {
document.hform.secureuser.value = MD5(document.login.user_temp.value);
document.hform.securepass.value = MD5(document.login.pass_temp.value);
document.login.pass_temp.value = "";
document.hform.submit();
}
// -->
</script>
SignUP Form:
<?php include ($_SERVER['DOCUMENT_ROOT'].'/functions/functions.php');?>
<div id="hasJavaScript" style="display:none">
<form name="signup">
<label>Username</label> <input type="text" name="user_temp" size=32 maxlength=32><span>alphanumeric, no spaces</span><br>
<label>Type password</label> <input type="password" name="pass_temp1" size=32 maxlength=32><span>alphanumeric, 8-12 long</span><br>
<label>Retype password</label> <input type="password" name="pass_temp2" size=32 maxlength=32><br>
<label>Email</label> <input type="text" name="email_temp" size=32 maxlength=32><br>
<label> What is: </label><?php $captchaArray = myCaptcha(); echo $captchaArray['equation'];?><br>
<label>Answer</label><input type="text" name="answer1">
<input onClick="passResponse1(); return false;" type="submit" name="submitbtn" value="Signup Now">
</form>
<form action="/action/signup-action.php" METHOD="POST" name="signup-hform">
<input type="hidden" name="sSecureUser">
<input type="hidden" name="sSecurePass1">
<input type="hidden" name="sSecurePass2">
<input type="hidden" name="secureEmail">
<input type="hidden" name="answer2">
<input type="hidden" name="checker" value=".<?php echo $captchaArray['answer'];?> .">
</form>
</div>
<script language="javascript" src="/js/md5.js"></script>
<script language="javascript">
<!--
document.getElementById('hasJavaScript').style.display = 'block';
function passResponse1() {
document.signup-hform.sSecureUser.value = MD5(document.signup.user_temp.value);
document.signup-hform.sSecurePass1.value = MD5(document.signup.pass_temp1.value);
document.signup.pass_temp1.value = "";
document.signup-hform.sSecurePass2.value = MD5(document.signup.pass_temp2.value);
document.signup.pass_temp2.value = "";
document.signup-hform.secureEmail.value = MD5(document.signup.email_temp.value);
document.signup-hform.answer2.value = document.signup.answer1.value;
document.signup.answer1.value = "";
document.signup-hform.submit();
}
// -->
</script>
One problem I see is that you do not specify any value attributes or values in your hidden fields:
<input type="hidden" name="sSecureUser">
<input type="hidden" name="sSecurePass1">
<input type="hidden" name="sSecurePass2">
<input type="hidden" name="secureEmail">
<input type="hidden" name="answer2">
But then in your JS, you're trying to access the value attribute.
document.hform.sSecureUser.value = ...
Try adding values to those. I would also give your hidden forms ids and use the document.getElementById() syntax instead of the document.hform.sSecureUser syntax.
As far as your form submits, you are suppressing the action of the first form, trying to fill in values for the hidden fields in the second form and then submitting that. Both of your scripts use the same name for the forms "hform". They need to be unique. I would also give them a unique id.
Another possible issue is this line:
<input type="hidden" name="checker" value=".<?php echo $captchaArray['answer'];?> .">
You're using the . for string concatenation, but it's not in an echo/print statement. I think it's supposed to be:
<input type="hidden" name="checker" value="<?php echo $captchaArray['answer'];?>">