1

I am building a sign up form, and want to include it into a div on the main page. The main page also includes a 'log in' form.

Both forms are included on the page using php include commands in the appropriate div i.e:

<?php include_once("login.php")?>    
<?php include_once("signup.php")?>

Now when I use ajax on the second form i.e. the signup.php form, it sends back information from the fields in the first form. It doesn't help that they are both email and password fields.

Does anyone know how I can isolate the information from each form so i can send the data from each form separately? Below is all the relevant code for the forms and the Javascript.

Here is the code for the first form(login.php):

  <form name="loginform" id="loginform" onsubmit="return false;">
    <input style="margin-bottom:5px;" id="email" type="text" class="searchbox" onblur="checkusername()" maxlength="35" value="Email">
    <span id="emailstatus"></span>
    <input id="password" class="searchbox" type="password" onfocus="emptyElement('status')"  maxlength="88" value="Password">
    <p><a href="#" id="loginbtn" onclick="login()">Log In / <a href="#" onclick="forgotpass()">Forgot Password</a></p>
    <span id="status"></span>
  </form>

and the ajax for it:

function login(){
//isolate the variables from the form
var p = _("password").value;
var e = _("email").value;
var status = _("status");
if(e != "Email" && p != "Password"){
    _("loginbtn").style.display = "none";
    status.innerHTML = 'please wait ...';

//start the Ajax Request

    var ajax = ajaxObj("POST", "login.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            if(ajax.responseText == "login_failed"){
                status.innerHTML = 'There was a problem. Please check your email and password and try again. ';
                _("loginbtn").style.display = "block";
            }  else {
                window.location = "user.php?id="+ajax.responseText; 

            }
        }
    }

//data being sent by the ajax call

    ajax.send("e="+e+"&p="+p);
} else {
    status.innerHTML = "You're missing something..";
}
}

function emptyElement(x){
//The _(x) function is a shortcut for getElementById
    _(x).innerHTML = "";
}

//This jQuery used to pre populate the email and password fields with "email" and "password"
$('input .seachbox').each(function(){
    $(this)
    .data('default', $(this).val())
    .focus(function(){
        if ($(this).val() == $(this).data('default')||''){
        $(this).val() = ''
        }
    })
    .blur(function(){
    var default_val = $(this).data('default');
    if($(this).val() == ''){
        $(this).val($(this).data('default'))
    }
    }); 
});

and the second form(signup.php):

     <form name="signupform" id="signupform" onsubmit="return false;">
      <div>Email Address:</div>
    <input id="emails" type="text" class="searchbox" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88">
    <div>Create Password:</div>
    <input id="pass1" type="password" class="searchbox" onfocus="emptyElement('status')" maxlength="16">
    <div>Confirm Password:</div>
    <input id="pass2" type="password" class="searchbox" onfocus="emptyElement('status')" maxlength="16">
      </form>           
<br> <a href="#" alt="Signup" onclick="signup()">Create Account</a><p>
<div class="statuserror"><span id="status" >This is a permanent error</span></div>
    </div>

and the ajax for it:

function signup(){
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var status = _("status");
if( e == "" || p1 == "" || p2 == ""){
    status.innerHTML = "Fill out all of the form data";
} else if(p1 != p2){
    status.innerHTML = "Your password fields do not match";
} else {
    status.innerHTML = 'please wait ...';
    var ajax = ajaxObj("POST", "signup.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            if(ajax.responseText != "OK"){
                status.innerHTML = ajax.responseText;
                _("signupbtn").style.display = "block";
            } else {
                _("p1").innerHTML = "Please check your email inbox and junk mail box at <u>"+e+"</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.";
            }
        }
    }
    ajax.send("e="+e+"&p="+p1);
}

This is a screenshot with the Firebug output - the response from the POST should appear where the red text is on the page.

EDIT - SOLUTION:- Have - after 3 days found a solution so stupid i had to share it. Basically I changed the id of the status div from "status" to "status1" and found that everything is working fine now. I think that it might be because on the login page I also have a div named status so the browser is unsure which div to put it in and just does nothing. This also explains why the signup.php page works when run alone in the browser but not when the login.php is included along with it in the main page.

Moral of the story - MAKE SURE YOUR IDS ARE ALL DIFFERENT!! Thanks to everyone for the help.

4

0 回答 0