Link to home
Start Free TrialLog in
Avatar of PhillipsPlastics
PhillipsPlastics

asked on

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!
Avatar of jmgst116
jmgst116

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/

SOLUTION
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Avatar of PhillipsPlastics

ASKER

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?
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.
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.
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?
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.
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.
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);
}
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial