/    Sign up×
Community /Pin to ProfileBookmark

PHP retrieving Javascript arrays problem

Hello all,

I just joined this forum and this is my first post, so I wanted to thank you all in advance for your help.
I’m pretty much a newbie when it comes to PHP and Javascript, as I’ve always been involved mainly in the designing part of website building (HTML and CSS).

Anyway, here’s my problem (hope I’ll explain it clearly):

I’m building this website that features a contact form where visitors can type in their name, email address and whatnot to receive feedback from the admins.
This form features two select fields labeled “area” and “city”.

The “city” field is initially set to a blank value, and has no other options selectable,
By selecting the “area” first, the selected area’s cities appear in the “city” field.

Onto the code:

1) here’s the form HTML code (shortened version):

[code=html]<select name=”area” onchange=”SelectArea()”>
<option value=”” selected=”selected”>Area</option>
<option value=”101″>Piemonte</option>
<option value=”102″>Lombardia</option>
<option value=”103″>Veneto</option>
</select>

<select name=”city” onmouseup=”CheckCity()”>
<option selected=”selected” value=””>City</option>
</select>[/code]

2) here’s the relevant Javascript that displays the cities available for each area (“prof” is the form name):

[CODE]function SelectArea(){

GetCityCode();

if (document.prof.area.value > 0){
selectVal = document.prof.area.value;
ClearCity(nMax);

j = 1;
for (i = 1; i <= nMax; i++){
if (n[i][1] == selectVal){
document.prof.city.options[j] = new Option(n[i][2],n[i][0]);
j = j + 1;
}
}
}else{
ClearCity(nMax);
}

}

function ClearCity(nMax){
for (i = 1; i < nMax; i++){
document.prof.city.options[1] = null;
}
}[/CODE]

3) the list with all the cities is in another attached .js file (here I paste just a few lines to give you the idea):

[CODE]function GetCityCode(){
n = new Array;
n[1] = new Array(11011,101,”Torino”);
n[2] = new Array(11029,101,”Biella”);
n[44] = new Array(22012,102,”Milano”);
n[45] = new Array(22021,102,”Como”);
n[53] = new Array(32018,103,”Venezia”);
n[54] = new Array(32026,103,”Verona”);

nMax = 904;
}[/CODE]

So far everything works like a charm. The website visitor chooses the area they’re from, the “city” field gets populated with all the cities in that area and they choose the city they’re from.
Now,
here’s the problem:
I compiled a PHP script which retrieves all the data submitted in the form and posts it to a .csv file.

here’s the relevant PHP code:

[code=php]<?php
$area = $_POST[‘area’];
$city = $_POST[‘city’];

$csv_file = ‘contacts.csv’;
if (is_writable($csv_file)) {
if (!$csv_handle = fopen($csv_file,’a’)) {
exit;}
}
$csv_item = “”$area”,”$city”n”;
if (is_writable($csv_file)) {
if (fwrite($csv_handle, $csv_item) === FALSE) {
exit; }
}
fclose($csv_handle);
?>[/code]

The script works, it writes data on the .csv file, but for “area” and “city” all i get are their numeric values and not the names.
Say for example that a visitor submits “Piemonte” as area and “Torino” as city,
in the .csv file I get “101” for the area and “11011” for the city.

Is there a way to get the area and city names instead of numbers in the .csv?

Excuse this long post and thanks in advance!

Cyrus

to post a comment
PHP

7 Comments(s)

Copy linkTweet thisAlerts:
@SrWebDeveloperDec 14.2009 — Try this:

Find:

[CODE]document.prof.city.options[j] = new Option(n[i][2],n[i][0]);
[/CODE]


Insert After:

[CODE]document.prof.city.options[j].value = n[i][2];
document.prof.area.options[j].value=document.getElementById("myselect").options[i].text;
[/CODE]


Find:

[code=html]<select name="area" onchange="SelectArea()">[/code]

Change to:

[code=html]<select id="myselect" name="area" onchange="SelectArea()">[/code]

The first Javascript line sets the city using your array, the second line sets the area based on the ID I added to reference it more easily.

Notes:

Got error (n[i] not defined) when running your code even before I made any changes, it occurs when selecting areas other than "Piemonte".



Ever thought about NOT using the "101, 102" codes and replacing them with the area name in the value attribute for each area option tag? Also, what's the "11011" stuff in the n array which isn't referenced anywhere else plus you only wanted area/city names returned after the submit anyway?



The n array stuff maybe should be defined in the global scope (maybe you had a good reason to put it in a function, I dunno, just wondering).



I like your use of the Options object, alot of folks use the exhaustive select.add/remove methods and this is tidier. Not only that, it's even compatible with the old browsers since it's DOM 2. Nice job there.



-jim
Copy linkTweet thisAlerts:
@cyrus999authorDec 15.2009 — Jim,

you're a genius! It works! Thanks a LOT!




Notes:

Got error (n[i] not defined) when running your code even before I made any changes, it occurs when selecting areas other than "Piemonte".



Ever thought about NOT using the "101, 102" codes and replacing them with the area name in the value attribute for each area option tag? Also, what's the "11011" stuff in the n array which isn't referenced anywhere else plus you only wanted area/city names returned after the submit anyway?



The n array stuff maybe should be defined in the global scope (maybe you had a good reason to put it in a function, I dunno, just wondering).

[/QUOTE]




I noticed the error when running the script too, honestly I have no clue about that since, as I said, I'm pretty much a newbie when it comes to Javascript.

I didn't compile the .js file with all the arrays (numbers and cities). It was sent to me by a friend, but he didn't compile it either and didn't have any php that went along with it.

So what I was trying to do was simply adapting that file to my needs. I considered changing the values and getting rid of all the numbers, but I was looking for a simpler and quicker solution to achieve what i needed.

And your solution works perfectly, so thanks again!





I like your use of the Options object, alot of folks use the exhaustive select.add/remove methods and this is tidier. Not only that, it's even compatible with the old browsers since it's DOM 2. Nice job there.

[/QUOTE]




Thank you, I'm just trying, you know... I only know tiny pieces of Javascript, as I've just started messing with it recently... but I'm glad to know I'm doing things the right way..



Cyrus
Copy linkTweet thisAlerts:
@cyrus999authorDec 15.2009 — Actually, after some more testing...

you were right, if i insert the codes you've given me:

1) if i select the first area (Piemonte) I get all the city options and the php posts their names in the .csv file.

2) if i select another area I get only one city option, and the php posts that city name, but still posts the number for the area.

Hmm, maybe there's more to tweak to get it work for all the areas? It's a shame it only works for the first one...

If I wanted to get rid of the numbers altogether, besides changing the values in the form "area" select field, how should I modify the arrays?
[CODE]n[1] = new Array(11011,101,"Torino");[/CODE]

Thanks

Cyrus
Copy linkTweet thisAlerts:
@SrWebDeveloperDec 15.2009 — Maybe n[area]=array(City1,City2...) as the new proposed format - requiring a rewrite of much of your code, of course. But it might be worth it, much easier to do the matching more efficient than n[x] where x jumps all over the place like you have it now, i.e. x=1,2,45,53 and so on in your GetCityCode function.

You will need to debug the blank city issue in your original code, start by making sure ClearCity does what it's supposed to be doing. I'm not a big fan of your approach which is looping through that huge n array each time. If you switched to my proposed array format in GetCityCode your ClearCity should only null that data, i.e. match to n[area] is made based on current area and clear those cities only. Much more efficient. Up to you how much work you want to put into this.

-jim
Copy linkTweet thisAlerts:
@cyrus999authorDec 16.2009 — Thank you for the input... yes that indeed seems a more efficient approach to the whole thing.

Another thing I came up with yesterday was going with this function:

[CODE]function fillSelect(nValue,nList){

nList.options.length = 1;
var curr = city[nValue];
for (each in curr)
{
var nOption = document.createElement('option');
nOption.appendChild(document.createTextNode(curr[each]));
nOption.setAttribute("value",curr[each]);
nList.appendChild(nOption);
}
}[/CODE]


and then put in variables like this:

[CODE]var city = [];
city["Piemonte"] = ["Torino","Biella"][/CODE]



That would require a rewrite of much of my code as well...

I'll try both things anyway.

Thanks again!

Cyrus
Copy linkTweet thisAlerts:
@SrWebDeveloperDec 16.2009 — Great job coming up with the new code. Looks good so far.

I suggested that approach off the top of my head, didn't intend to make you do a re-write, but this is a positive approach to optimizing code, i.e. improving upon the n[x]=array(x,x,x,x) data format. When you're all done feel free to post it if you wish and I'll check it out, or post a link to your site if it's working there. But it's not necessary, and looks like you're on your way.

Thanks for being open to suggestions. Cheers.

-jim
Copy linkTweet thisAlerts:
@cyrus999authorDec 22.2009 — Sorry for the delay in replying, I was away for the weekend.

Anyway I just wanted to tell you I used the code I mentioned in my previous post as it is, because I was kind of running late finishing the job and that code worked well without any tweaking.

So it's exactly how i posted it, of course with all the cities names added (would be too long to post it here).

Anyway thanks again for your help!

Have a nice day

Cyrus
×

Success!

Help @cyrus999 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...