PHP session variables from Javascript form?

[facarroll]

Hi all.

Is there some way I can use the username and password from a javascript form to initiate php session variables? I want to use the javascript form shown below which allows access to a folder with a htaccess file. The folder also contains various php files that use sessions to function.

I need some good help on this one.

 

window.onload = function()
{
    var anchors = document.getElementsByTagName("a");
    for (var foo = 0; foo < anchors.length; foo++) {
        if (anchors[foo].className == "httpauth") {

		if ( (BrowserDetect.browser != 'Safari') && (BrowserDetect.browser != 'Opera') )  {			
            createForm(anchors[foo]);			
		}

        }
    }
}

function createForm(httpauth)
{
    var form = document.createElement("form");
    form.action = httpauth.href;
    form.method = "get";
    form.onsubmit = login;
    form.id = httpauth.id;

    var username = document.createElement("label");
    var usernameInput = document.createElement("input");
    usernameInput.name = "username";
    usernameInput.type = "text";
    usernameInput.id = httpauth.id + "-username";
    username.appendChild(document.createTextNode("Username : "));
    username.appendChild(usernameInput);

    var password = document.createElement("label");
    var passwordInput = document.createElement("input");
    passwordInput.name = "password";
    passwordInput.type = "password";
    passwordInput.id = httpauth.id + "-password";
    password.appendChild(document.createTextNode("Password : "));
    password.appendChild(passwordInput);

var submit = document.createElement("input");
    submit.type = "submit";
    submit.value = "Log in";

    form.appendChild(username);
    form.appendChild(password);
    form.appendChild(submit);

var logoutLink = document.createElement("a");
    /*logoutLink.href = "#";
    logoutLink.onclick = logout;
    logoutLink.appendChild(document.createTextNode("Log out"));
    form.appendChild(logoutLink);*/
    httpauth.parentNode.replaceChild(form, httpauth);
}

function getHTTPObject() {
var xmlhttp = false;
if (typeof XMLHttpRequest != 'undefined') {
	try {
		xmlhttp = new XMLHttpRequest();
	} catch (e) {
		xmlhttp = false;
	}
} else {
        /*@cc_on
        @if (@_jscript_version >= 5)
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (E) {
                    xmlhttp = false;
                }
            }
        @end @*/
    }
return xmlhttp;
}

function login()
{
    var username = document.getElementById(this.id + "-username").value;
    var password = document.getElementById(this.id + "-password").value;
    var http = getHTTPObject();
//var url = "http://" + username + ":" + password + "@" + this.action.substr(7);
var url = this.action;
    http.open("get", url, false, username, password);
    http.send("");
if (http.status == 200) {
	document.location = url;
} else {
        alert("Incorrect username and/or password!");
    }
    return false;
}

function logout()
{
    var http = getHTTPObject();
    http.open("get", this.parentNode.action, false, "null", "null");
    http.send("");
    alert("You have been logged out.");
    return false;
}

//http://www.quirksmode.org/js/detect.html
var BrowserDetect = {
init: function () {
	this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
	this.version = this.searchVersion(navigator.userAgent)
		|| this.searchVersion(navigator.appVersion)
		|| "an unknown version";
	this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
	for (var i=0;i<data.length;i++)	{
		var dataString = data[i].string;
		var dataProp = data[i].prop;
		this.versionSearchString = data[i].versionSearch || data[i].identity;
		if (dataString) {
			if (dataString.indexOf(data[i].subString) != -1)
				return data[i].identity;
		}
		else if (dataProp)
			return data[i].identity;
	}
},
searchVersion: function (dataString) {
	var index = dataString.indexOf(this.versionSearchString);
	if (index == -1) return;
	return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
	{ 	string: navigator.userAgent,
		subString: "OmniWeb",
		versionSearch: "OmniWeb/",
		identity: "OmniWeb"
	},
	{
		string: navigator.vendor,
		subString: "Apple",
		identity: "Safari"
	},
	{
		prop: window.opera,
		identity: "Opera"
	},
	{
		string: navigator.vendor,
		subString: "iCab",
		identity: "iCab"
	},
	{
		string: navigator.vendor,
		subString: "KDE",
		identity: "Konqueror"
	},
	{
		string: navigator.userAgent,
		subString: "Firefox",
		identity: "Firefox"
	},
	{
		string: navigator.vendor,
		subString: "Camino",
		identity: "Camino"
	},
	{		// for newer Netscapes (6+)
		string: navigator.userAgent,
		subString: "Netscape",
		identity: "Netscape"
	},
	{
		string: navigator.userAgent,
		subString: "MSIE",
		identity: "Explorer",
		versionSearch: "MSIE"
	},
	{
		string: navigator.userAgent,
		subString: "Gecko",
		identity: "Mozilla",
		versionSearch: "rv"
	},
	{ 		// for older Netscapes (4-)
		string: navigator.userAgent,
		subString: "Mozilla",
		identity: "Netscape",
		versionSearch: "Mozilla"
	}
],
dataOS : [
	{
		string: navigator.platform,
		subString: "Win",
		identity: "Windows"
	},
	{
		string: navigator.platform,
		subString: "Mac",
		identity: "Mac"
	},
	{
		string: navigator.platform,
		subString: "Linux",
		identity: "Linux"
	}
]

};
BrowserDetect.init();

[radar]

An easy way would be to use prototype.js style ajax, to send the username and password back to a login script....

 

So you'd continue to have what you currently have but you'd add in the prototype workings and add in:

 

function login(formID) { <-- needed..

i'd include a MyRand to beat browser caching...  var MyRand = parseInt(Math.random()*99999999);

then you'd add var srcs = "login.php";

then you'd serialize the form objects:  var pars = Form.serialize(formID);

 

then you'd simply add

var myAjax = new Ajax.Request (

srcs,

{

method: "post",

parameters: pars,

onComplete: function(originalRequest) {

  // do something here

}

});

}

 

this would take your form objects, back to php where you can handle it however you want....  while still utilizing the code you currently have to use the .htaccess stuff.  hope it gets you started at least