Ajax Refreshing Problem

[KingSlick]

Ok, I am working with PHP and Ajax. I am trying to have an Ajax call add some text into a MySQL DB. The adding to the DB is working fine, however, the page is refreshing everytime and I don't want it to refresh.

I am using the onMouseDown to start the call

<input type="image" name="AddComp" id="AddComp" title="Add company" class="ImgButton" style= "width:42px; height:45px" onmousedown="addCompany('<?=$pname?>')" src="images/AddBtn.gif"  />

The ajax script...

function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Your Browser Does Not support AJAX!\nPlease update your browser to get full functionality");
    }
}


//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

function addCompany(profile)
{
	if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = document.getElementById("CompanyName").value;
		
        searchReq.open("GET", 'ajaxAdd.php?t=CompanyName&str=' + str + 'p=' + profile, true);
		searchReq.onreadystatechange = companySelectBox;
        searchReq.send(null);
    }
	
}


function companySelectBox() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById("selectCompanyBox");
        ss.innerHTML = '<SELECT name="Select1[]" ID="Select1" size=6 class="menuselectowe" style="WIDTH: 280px;" multiple>';
        var str = searchReq.responseText;
		/*for(i=0; i < str.length - 1; i++) {
			var add = '<option>' + str[i] + '</option>';	
			ss.innerHTML += add;
		}*/
		ss.innerHTML += str;
        ss.innerHTML += '</select>';
		document.getElementById('CompanyName').focus();
    }
}

 

[KingSlick]

also when handling the response,

function companySelectBox() {
if (searchReq.readyState == 4) {
var ss = document.getElementById("selectCompanyBox");
ss.innerHTML = '<SELECT name="Select1[]" ID="Select1" size=6 class="menuselectowe" style="WIDTH: 280px;" multiple>';
var str = searchReq.responseText;
/*for(i=0; i < str.length - 1; i++) {
var add = '<option>' + str + '</option>';
ss.innerHTML += add;
}*/
ss.innerHTML += str;
ss.innerHTML += '</select>';
document.getElementById('CompanyName').focus();
}
}

the var str should be within the select tags. However, it comes back with the open and close select tags and then the option tags that are being returned from the php script.

 

[KingSlick]

also when handling the response,

function companySelectBox() {
if (searchReq.readyState == 4) {
var ss = document.getElementById("selectCompanyBox");
ss.innerHTML = '<SELECT name="Select1[]" ID="Select1" size=6 class="menuselectowe" style="WIDTH: 280px;" multiple>';
var str = searchReq.responseText;
/*for(i=0; i < str.length - 1; i++) {
var add = '<option>' + str + '</option>';
ss.innerHTML += add;
}*/
ss.innerHTML += str;
ss.innerHTML += '</select>';
document.getElementById('CompanyName').focus();
}
}

the var str should be within the select tags. However, it comes back with the open and close select tags and then the option tags that are being returned from the php script.

 

[kaht]

The problem is that you are using an input of type image. They act like a submit button by default, so the page is submitting to itself which makes it look like it refreshes. Instead of using the <input> tag, make it an <img> tag instead and that will solve your problem.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[KingSlick]

Thanks for that