[scott2500uk]

I have on my page several input boxes which i have in an array:

HTML Code:

    <td><input id="DealerShipBuddySites[]" type="text" size="40"></td>
    <td><input id="DealerShipBuddySites[]" type="text" size="40"></td>
    <td><input id="DealerShipBuddySites[]" type="text" size="40"></td>
    <td><input id="DealerShipBuddySites[]" type="text" size="40"></td>
    <td><input id="DealerShipBuddySites[]" type="text" size="40"></td>

If I do a normal post I get an array in $_POST['DealerShipBuddySites'] perfectly fine. But Im having trouble trying to post that array with AJAX. Below is my ajax code:

Code:

//Browser Support Code
function ajupdateform(){
	grayOut(true, {'zindex':'101', 'bgcolor':'#000000', 'opacity':'70'});
	var ajaxRequest;  // The variable that makes Ajax possible!
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajupdatediv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	
	var d1 = document.getElementById('DealerShipBuddySites').value;
	var queryString = "DealerShipBuddySites="+d1;
	ajaxRequest.open("POST", "test.php", true);
	ajaxRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; Charset=UTF-8');
	ajaxRequest.send(queryString);	
}

With the above Im getting "undefined" in d1 var. Now I know that getElementById is only ment to get one value so Ive seen getElementsByName but I cant get that to work too. Please help

Thanks

[TwoD]

First I'd like to as why you use brackets in input-element ids? They are unneccessary and might lead to confusion.

document.getElementById will only return the first element if more than one with the specified id exists.

In your case, you'd need to use document.getElementById("DealerShipBuddySites[]") to get a reference to the first input field. As it is now, you should get an error because document.getElementById("DealerShipBuddySites") will return null. And null has no .value property (it might evaluate to undefined tho).

If you use getElementsByName("DealerShipBuddySites[]") (Again, remove the brackets, they are just in the way) with your code you'd get an array containing references to all the input elements (you must also give them a name attribute of course). Then you can loop through the array returned by getElementsByName and append each element's .value properties to the querystring.

I'm not sure why you'd ever want more than one textbox with the same name/id, only radiobuttons benefit from that since they must be grouped by name in order to function properly.

[jfulton]

This is completely untested, but should be a step in the right direction...

HTML Code:

<!-- changed ID to NAME...IDs must be unique...1 per page! -->
    <td><input name="DealerShipBuddySites" type="text" size="40"></td>
    <td><input name="DealerShipBuddySites" type="text" size="40"></td>
    <td><input name="DealerShipBuddySites" type="text" size="40"></td>
    <td><input name="DealerShipBuddySites" type="text" size="40"></td>
    <td><input name="DealerShipBuddySites" type="text" size="40"></td>

Code:

//Browser Support Code
function ajupdateform(){
	grayOut(true, {'zindex':'101', 'bgcolor':'#000000', 'opacity':'70'});
	var ajaxRequest;  // The variable that makes Ajax possible!
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajupdatediv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}


	//---=== NEW CODE BELOW HERE!!!
	var queryString = ""
	var els = document.getElementsByName('DealerShipBuddySites');
	for (var i=0; i<els.length; i++) {
		if (i > 0) {
			queryString += "&";
		}
		queryString += "DealerShipBuddySites=" + els[i].value;
	}


	ajaxRequest.open("POST", "test.php", true);
	ajaxRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; Charset=UTF-8');
	ajaxRequest.setRequestHeader("Content-length", queryString.length);
	ajaxRequest.setRequestHeader("Connection", "close");
	ajaxRequest.send(queryString);	
}

[scott2500uk]

thanks for the help guys. The reason why I was making inputs into arrays is because on the page there is 450+ input fields. Submiting them all in one would mean right 1000+ lines of codes. Thats why I wanted to split into arrays.

I decided to change all arrays to number elements for example:

DealerShipBuddySites0
DealerShipBuddySites1
etc

then just made DealerShipBuddySites=DealerShipBuddySites0:ealer ShipBuddySites1::etc

then at other end I would use php to explode the string into an array the way I want it.

Once again thanks for the input

[TwoD]

450+ input fields? Oh my... What's it used for, and isn't there a more convenient solution?

[sorcererayush]

use for $_POST["name"]
query = "name[] =Name1&name[]=name2&name[]=name3"

this will process you Name field into array on php

<?php
print_r($_POST[name]);
?>

Best of Luck

[End User]

Originally Posted by scott2500uk

The reason why I was making inputs into arrays is because on the page there is 450+ input fields.

I think I speak for all of us here when I say, "You're doing it wrong." Without even looking at the application, I can tell you that this isn't a good design. No user interface should have 450 inputs on a page- even the Space Shuttle's pre-flight control and configuration system doesn't do that.

[TwoD]

You guys realize this thread has been dead for a looong time?

[End User]

Originally Posted by TwoD

You guys realize this thread has been dead for a looong time?

I didn't, but I do now. lol

[kalyson1]

Well, I don't care how old it is. It saved me -- I was in quite a technical rut. The posts that helped me the most were the code samples and especially the note by sorcererayush.

People are still looking for help no matter how old the post is, so I am glad it was here.