jQuery append() / remove

I currently have a dropdown box full of a country listing, to allow for multiple countries to be selected and thus submitted on the form I am using jQuery to add or remove a selected drop down item using the append or remove statement.  My current code is listed here:
                $('#addCountry').click(function(){
                    var selectedCountryID = $('#countrySelection option:selected').val();
                    var selectedCountryName = $('#countrySelection option:selected').text();
                    if(selectedCountryID != "" & $('#'+selectedCountryID).length==0){
                        $('#countrySelection').append("<span class=\"countryName\"><input id=\""+selectedCountryID+"\" type=\"hidden\" name=\"countrySelection["+
                            i+"]\" value=\""+selectedCountryName+"\"/>"+selectedCountryName+"<img class=\"removeCountry\" id=\""+selectedCountryID+"\" src=\"/img/icons/badge-circle-minus-16.png\" alt=\"Remove Country\"/></span>");
                    }
                    i++;
                });
                $('.removeCountry').live('click',function(){
                    $(this).parent().remove();
                });

Open in new window


My question is, this will break the input from the form if a user adds 2 countries, removes the first country, then adds another country creating an array not only missing element[1] but also having a duplicate element[2].  I am currently at a loss for how to resolve this and have an array which does not break for form submission so the PHP file can parse the data within the array using a while loop.  Any suggestions would be most welcome!
PhillipsPlasticsAsked:
Who is Participating?
 
crazedsanityCommented:
@Ray: the numerically-indexed array is probably being generated by Javascript, though I can't say for sure.

@PhillipsPlastics: just loop through the array:
foreach($_POST['nameOfArray'] as $index=>$value) 
{
    echo "Index #". $index .", value=". $value ."\n";
}

Open in new window

0
 
jmgst116Commented:
Since there is no html can not really see what country selection is so I just made it a select
also so moved the append around to better see how works and changed hidden to text to see if insert remove working and so was easier to inspect element.

here is js fiddle should get you started
http://jsfiddle.net/KRpNC/2/

0
 
Ray PaseurCommented:
Whatever the client side of things produces and sends to the server in the request, you must validate the input on the server side.  One of the tools that is your best friend is the PHP function var_dump()
http://php.net/manual/en/function.var-dump.php

You can use var_dump($_REQUEST) to see the client variables that have been sent to the server.  Once you see the data, it should be obvious how to filter it.  So please add that statement to the action script, recreate the problem and post the output here.  Then we can begin to see whether we need to amend the action script or the jQuery stuff.  Thanks, ~Ray
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
crazedsanityCommented:
There's some stuff you can do on the front end to make it simple for the user, but the bottom line (which Ray hit on) is that you'll have to validate the input once it hits the server.  If an array is getting sent to the server, just have it remove empty values, and use array_unique() [http://php.net/array_unique] to make sure there are no duplicates in there.
0
 
PhillipsPlasticsAuthor Commented:
So I can essentially ignore where the how the array is indexed and just deal with it on the PHP side of things?  Because it is a dropdown coming from a database there is not a lot of validation that must be made since it is also not going back into the database just into an email.  But using the var_dump() or array_unique() should solve the issue correct?
0
 
Ray PaseurCommented:
Let's be clear about this part: var_dump() does not solve any issue.  It's like checking your bank balance.  How you earn and spend is up to you -- the ATM just tells you the consequences of your choices.  Var_Dump() simply creates a visual representation of the internal variables so the programmer can resolve the issue through programming.  I am not sure whether array_unique() is in play or not.  I would need to use var_dump() on a collection of request variables to see if array_unique() was something I wanted to use.  For this reason professionals generally create test data sets and run them against every build of the software.
0
 
crazedsanityCommented:
The most important aspect is the back-end (PHP script): make certain that the data is cleaned & validated there.  As long as that is done, it won't matter if the javascript isn't dealing with duplicates properly.

As far as var_dump()... that's not going to solve anything.  As Ray explained, var_dump() is a good way of seeing the data structure, but it has few real usages--most, if not all of them, are for debugging.
0
 
PhillipsPlasticsAuthor Commented:
Okay so the output on the PHP side of things using the vardump() is:
array(2) { [0]=> string(9) "Country 3" [1]=> string(9) "Country 1" }

Open in new window


How do you access it on the PHP server side then?
0
 
crazedsanityCommented:
I'm not exactly sure what you mean by "access it on the PHP server side"; wherever you put the var_dump() call is (I would think) where you would want to do filtering and validation.
0
 
PhillipsPlasticsAuthor Commented:
Yes so now that I know how the javascript is being fed into the PHP file I can output each of the array elements but am not sure how to do so.
0
 
Ray PaseurCommented:
Did you apply var_dump() to $_REQUEST?  If so, you might want to stop work on this and hire a professional to help you.  What you have in the post at ID:37030681 is a numerically indexed array and that should not occur in a commonsense GET or POST request.

However if you applied var_dump() to one of the named elements of the $_REQUEST, it is a different matter.  Let's say what we are looking at with ID:37030681 is the output of something like this:

var_dump($_REQUEST["selectedCountryName"]);

Then you might use something like this to access each of the elements in the array.

foreach ($_REQUEST["selectedCountryName"] as $x)
{
    var_dump($x);
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.