differences beetween browsers

[fouskalex]

Hello everybody. I'm new here and I would really need some help.
I have a form which sends SMS to mobiles. Inside this form there is a button that makes a hidden div visible with data coming with ajax (contacts of the user). This data is inside a form which is inside a table all made with javascript. So we choose the contacts that we want to send the sms (with checkboxes) and then click on another button which will put the data of the choosen contacts inside my first form and hide the div. So when this button is clicked, it's going to a function. The first thing I want is to get the length of the form of the hidden/visible div and I'm doing this with an alert(document.contact_form.length) to see if it is there. In mozilla this alert does not work.An alert with a string works fine so it goes to the function.
In chrome and safari works but the problem here is that it completes the first form!!! that sends the SMS and stores the data in the database.?.

Could anybody help me or if you know where I could search for these kind of differences?

[Declan1991]

Quirksmode is the place for all your compatibility problems.

If you show us code, we might be able to help however.

[fouskalex]

Thanks for reply.

I'm sending the code.

<div id="content_sms">
			<div id="sms_create">
				<?php if (!empty($message)) { echo "<p class=\"message\">$message</p>"; }?>
				<form action="create_sms.php" method="post" name="sms_form">
					<label><input class="small" type="hidden" id="user_mobile" name="user_mobile" value="<?php echo $user_mobile; ?>"/></label>
					<label><input class="small" type="hidden" id="mycosmos_psw" name="mycosmos_psw" value="<?php echo $mycosmos_psw; ?>"/></label>
					<label><button name="theButton" type="button" onclick="clicked()">Επιλογή επαφής:</button> <input id="contact" class="top" type="text" name="contact" onfocus="hideDiv()"/></label>
					<label><span>Τηλ.αποστολής: </span><input id="mobile" class="small" type="text" name="mobile" maxlength="10" onkeyup="return ismaxlength(this)"/></label>
					<label><span>Θέμα: </span><input class="small" type="text" name="subject" maxlength="30" onkeyup="return ismaxlength(this)" /></label>
					<label><span>Κείμενο αποστολής: </span><textarea name="sms_text" id="sms_text" maxlength="140" rows="5" cols="30" onkeyup="return ismaxlength(this)"></textarea></label>
					<label><input class="send_button" type="submit" name="submit" value="Αποστολή" onclick="sendClicked()" />
				</form>
				<div id="ajax_results"> &nbsp;&nbsp;&nbsp;&nbsp; </div>
			</div>
		</div>

javascript

function clicked() {
	if (display) {
		var hiddenDiv = document.getElementById("ajax_results");
		hiddenDiv.style.display = "block";
		
		var selNum = "";
		var result = "";
		result = result + "<form name=\"contact_form\">";
		result = result + "<table id=\"the_table\"><caption>Επιλογή Επαφής</caption>";
		
		var x = xmlDoc.getElementsByTagName("contact");
		for (var i=0;i<x.length;i++) {
			selNum = i;
			result = result + "<tr><td><input type=\"checkbox\" name=\"select\" value=\"" + selNum + "\" </td><td>" 
			+ x[i].getElementsByTagName("nickname")[0].childNodes[0].nodeValue + "</td><td>" 
			+ x[i].getElementsByTagName("mobile")[0].childNodes[0].nodeValue + "</td></tr>";
			}
		result = result + "<tr><td colspan=\"3\"><input type=\"button\" name=\"insert\" value=\"Επιλογή\" onclick=\"insert_mobile()\"/></td>";
		result = result + "<tr><td colspan=\"3\" onclick=\"hideDiv()\">Κλείσιμο Παραθύρου</td></tr>"
		result = result + "</table></form>";
		
		document.getElementById("ajax_results").innerHTML = result;
		display = false;
	}
	else {
		hideDiv();
	}
}

function hideDiv() {
	var hiddenDiv = document.getElementById("ajax_results");
	hiddenDiv.style.display = "none";
	display = true;
}

function insert_mobile() {
	alert(document.contact_form.elements.length);
}

I'll also look at the link you told me to see what I can find.

[fouskalex]

Think I found what is going on. I asked the alert to bring me the elements of the sms_form, the one that contains the button which calls the clicked() function.
In chrome and safari shows me the number 8 meaning the exact elements I have in my HTML in sms_form.
In mozilla it gives me number 13 meaning the elements in sms_form plus the elements in contact_form.
So I think I will have to make different script for each one of them. Right?

Thanks a lot anyway and I will need you again pretty soon I think.

[Declan1991]

I don't see you calling that function anywhere. The button (as far as I can see anyway) calls sendClicked, while the function you've shown us is clicked.

[fouskalex]

It is called in the third line of labels
<label><button name="theButton" type="button" onclick="clicked()">
After all the code is working fine with safari and chrome but not with mozilla.

Mozilla does not see this form. It adds the elements of this form in the sms_form. Strange?

If you could stay with me for a little while because I'm dealing with other problems with the same code. I'll go home in the afternoon and write them.

Thank you.

[Declan1991]

Personally, I would use <input type="button"> instead of <button> and form.getElementsByTagName("input"). But I don't know exactly why yours is going wrong.

[Kor]

Mozilla does not see this form. It adds the elements of this form in the sms_form. Strange?

Not quite very strange. innerHTML is not a standard DOM method. It is unpredictable: it will not always add the new elements into the DOM tree. You should probably switch to DOM methods, instead of innerHTML.

[fouskalex]

The <input type="button"> creates a text input. I read somewhere that browsers that don't understand script will do that. I don't really understand what it means. As for the DOM method I think I'm going to try it.

The other problem I have is with safari and chrome.
I'm attaching the hole script if you can find anything.

javascript

var xmlhttp;
var xmlDoc;
var display = true;
var BrowserName;
window.onload = init;

function init() {
	var IsBrowser = navigator.userAgent;
	if (IsBrowser.indexOf("Firefox") >= 0) {
		BrowserName = "Firefox";
	}
	else if (IsBrowser.indexOf("Safari") >= 0){
		BrowserName = "Safari";
	}
	//alert(BrowserName);
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = stateChanged;
	url = "select_contact_ajax.php";
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}
	
function stateChanged() {
	if (xmlhttp.readyState==4) {
	  xmlDoc = xmlhttp.responseXML;
	  }
}
	

function clicked() {
	if (display) {
		var hiddenDiv = document.getElementById("ajax_results");
		hiddenDiv.style.display = "block";
		
		var selNum = "";
		var result = "";
		result = result + "<form name=\"contact_form\">";
		result = result + "<table id=\"the_table\"><caption>Επιλογή Επαφής</caption>";
		
		var x = xmlDoc.getElementsByTagName("contact");
		for (var i=0;i<x.length;i++) {
			selNum = i;
			result = result + "<tr><td><input type=\"checkbox\" name=\"select\" value=\"" + selNum + "\" </td><td>" 
			+ x[i].getElementsByTagName("nickname")[0].childNodes[0].nodeValue + "</td><td>" 
			+ x[i].getElementsByTagName("mobile")[0].childNodes[0].nodeValue + "</td></tr>";
			}
		result = result + "<tr><td colspan=\"3\"><input type=\"button\" name=\"insert\" value=\"Επιλογή\" onclick=\"insert_mobile()\"/></td>";
		result = result + "<tr><td colspan=\"3\" onclick=\"hideDiv()\">Κλείσιμο Παραθύρου</td></tr>"
		result = result + "</table></form>";
		
		document.getElementById("ajax_results").innerHTML = result;
		display = false;
	}
	else {
		hideDiv();
	}
}

function hideDiv() {
	var hiddenDiv = document.getElementById("ajax_results");
	hiddenDiv.style.display = "none";
	display = true;
}

function insert_mobile() {

	var selectedContacts = new Array();
	var selectedMobiles = new Array();
	
	if (BrowserName == "Firefox") {
		var formLength = document.sms_form.elements.length;
		var element = document.sms_form.elements;
	}
	else if (BrowserName == "Safari") {
		var formLength = document.contact_form.elements.length;
		var element = document.contact_form.elements;
	}
	
	var j = 0;
	
	for (var i = 0; i < formLength; i++) {
		if (element[i].type == "checkbox") {		
			if (element[i].checked == true) {
				selectedContacts[j] = document.getElementsByTagName("tr")[i].childNodes[1].innerHTML;
				selectedMobiles[j] = document.getElementsByTagName("tr")[i].childNodes[2].innerHTML;
				j++;
			}
		}
	}	
	
	alert(selectedContacts.length);	
	alert(selectedContacts[1]);	 
	//document.getElementById("contact").value = selectedContacts[1];
	//document.getElementById("mobile").value = selectedMobiles[1];
	
	//hideDiv();

}

In Saf, Chr when I click the button name="select" which is created inside clicked(), it executes the insert_mobile() function, then it executes the hole script from the begging (the init() function), and then it goes to PHP as if I clicked the submit button in sms_form and tries to store the non existing data into my database.

In mozilla it executes the insert_mobile() function only if I don't choose any of the contacts, it does't exexute the hole script again but if I choose contacts it does nothing.

I think I'm going very deep for a begginer.
Thanks anyway for your time.