We Keep Coding

How to pass an array from javascript to php

So i've been asked to remake some registration forms. The way its supposed to work is, that an interpreter chooses X amount of languages in the first select box. Then based on the selections of languages, the user must specify from which languages they can translate from/to.
I want to store this data in a key/value array, with the key being "LanguageFrom" and Value being another array, of "LanguagesTo". This is how i have solved this:
function btnTest() {
var fromArray = $('.freelancerLanguagesFrom').map(function() {
return $(this).val();
}).get();
var toArray = $('.freelancerLanguagesTo').map(function() {
return $(this).val();
}).get();
var tempArray = {};
tempArray[fromArray] = toArray;
}
This method is being called with an "onclick" function in the html part. The user should specify which languages he can translate to for each of the chosen languages in the first box,
I am aware that this probably isn't the ideal approach, but im still an inexperienced developer, and i'd love to hear your take on another approach.
Now comes my problem:
1) How do i make it so the array wont overwrite the existing array with each button click, and instead just add to the array?
2) How do i process this array on the server side (php), so that i can store the values in my database?
3) Is it possible to skip the flow where the user has to press the save(gem) button after each language he has chosen?
edit: Question 1 and 3 are now solved, my only problem is accessing the array i made in js, on the php side

1) tempArray exists only in the scope of the btnTest() function. Declare it outside (in the global scope), initialize it as {} and don't reset it every time you click the button. The way you get the fromArray variable may require some tweaking depending on whether the "from" list can accept a multiple selection or not.
2) Ajax may help. Create a php endpoint to receive the request and call it using ajax. You can work on the array using JSON. Send your data using JSON.stringify(tempArray) and read it using json_decode() in your php script, or simply set the request headers as "application/json" to have it done automatically for you.
3) I personally wouldn't automate this process. Let's say I have 4 languages, Italian, English, French and Chinese.
I have selected a desirable state of languages I can handle:
Italian -> English, French
But I also know how to translate French in Italian so I click, in the from list, French, and I get
French -> English
Which is an undesirable state, for me, because I don't know how to do that. Especially if I were to select many languages, I'd get, inbetween 2 states I want to save, an indefinite amount of states I don't want to save.
If you still want to do so, you need to move the even listener from the button to the list(s), with the onchange event.
I'd also suggest you do your event binding trough jQuery, if you aren't already.
Hope this helped.

xPath in selenium with multiple premises in multiple node layers

I am having a little problem with xpath in seleniumdriver.
I would like an xpath locator to narrow down its selection via two variables using exact matching at different points of the node hiearchy. This part is done.
You may imagine my case as addressing a two dimensional array in the xml with xPath, with each dimension being given as the two variables I have in it(they are standard text searches via js variables, not xpath variables).
What I'm struggling with is the resulting construction does not tell the difference between the elements of the first dimension, so as long as the given variable value is one of the dimensions, it will address every element in the second dimension fine. I can not assume they are unique or they are in any order. I am using it for testing so this is not acceptable.
How can I form an expression that will not doesn't do the same mistake?
I have tried the 'and' expression but both selenium and xpath tools say the value is '1' for 'found' but it doesn't give me a node locator to work with.
Example, my structure looks similar, so addressing it properly by x1/y1 for example looks fine.
//x1//y1
//x1//y2
//x2//y3
//x2//y4
//x3//y5
//x3//y6
Should work, works ok.
//x1x//y1
//x1x//y2
//x2x//y3
//x2x//y4
//x3x//y5
//x3x//y6
(Giving nonexistent input as 1st dimension.) My input is not fault tolerant, I look for exact value so the tests fail here as they should.
//x2//y1
//x2//y2
//x3//y3
//x3//y4
//x1//y5
//x1//y6
DING, the locator finds y values here when it should not(the y vales are on different leaves of the node tree). I need help with this.
Here is the locator in question:
return element(by.xpath(".//div[#name='typeList']//div[.//text()='" + moduleName + "']//div[./text()='" + typeName + "']")).getText();
TypeList is the name of the owner element, it does not make any differnece if I remove it, but please keep it in mind when giving me examples.

In the end, it was indeed a syntactical problem, before the text keywords.
I was trying this
//div[./text()='Zero']//div[./text()='Number']
Instead, I needed something like this.
//div[.//text()='Zero']/div[.//text()='Number']
Apparently the first one does looks for 'Number' regardless the value of the first constraint as long as every is defined in my file(does not have to be in its upward xnode path.)
As a final note, I advise against using the chrome xpath helper as its behavior is near random, it gives different results after deleting and replacing the same expression. Ugh. The only other one for chrome is adware... I figured my result out by trial and error with the firefox xpath checker tool.
1, I ended up needing to additionally add an node upwards for the element for angular select ui tool(we use selectize.js, a searchable select box), else it was confused what to return, but this is unrelated to the original question as I tried that before with the original expression.
2, I also had to add a node between the first and second text search, else it would look for the second expression in the first one too, eg. looking for Number in Zero, and treat it like a valid value if found. The problem still occurs the other way around, this can be fixed too by applying additional type/name constraints in the first one(not in final example to save space).
So this is what I ended up with:
.//div[#name='typeList']//div/div[.//text()='Zero']/div/div/div[.//text()='Number']

Why won't my function follow my if/else conditions?

Here's the fiddle: http://jsfiddle.net/K5dsh/
I'm trying to make a simple calculator that evaluates the difference between the numbers its given, and gives an answer based on that. It has two problems:
1.) The answer my script gives is always the result of my 2nd else if statement, even if the input matches the conditions before it.
2.) The answer does not change even when there's a new input that should give a different result.
Does anyone see what the problems are? Thank you.

As Ivan pointed out, you're never updating the values of high, low and common with the values entered into the textboxes. You should be assigning the values inside the calculate function. See updated fiddle.
Also, you may want to invest some time into learning a framework like Knockout.js. It makes data-binding HTML form elements to JavaScript view models incredibly simple.

Your variables are defined only once. You should change it so that every time your button is clicked, it grabs the new variables. Here is an example: http://jsfiddle.net/Vd8n4/

Your values aren't being updated.
Here's how I would go about it. I'd change your function so that it starts off like this. That way, every time it is called, it updates the high, low, and common values.
function calculate() {
var high = document.getElementById('highRi').value;
var low = document.getElementById('lowRi').value;
var common = document.getElementById('comm').value;

Two drop down option lists in a form using javascript

I have a problem with two drop down lists ( options ) in a form. They both work separately but together they don't work at all. It's like they are canceling each other out or something. If anyone can help me then I'll be truly grateful. Here's the code with the problem... JS fiddle - http://jsfiddle.net/wemdragon/3Uz/

There are a couple problems. First off, .val() gets a string rather than an int, so if ('0') will return true. Therefore, options 2! is always emitted no matter what you have selected for the second option. You need to update that conditional to check if (second.val() != 0) (this will coerce '0' and 0 and return true -- you can also get more specific or simply use an empty string as the value instead, which is probably preferred).
Second of all, your calculation code is never reached since it is the else in the chain of ifs that cover all possible combination of selections. You need some other flag to check that the calculation should be done, or make it a function that is called when a valid selection is made.

Whats the best way to resolve name conflicts in javascript?

I recently wrote some javascript code that filled a drop down list based on some XML, pretty simple stuff. The problem was I had to write similar code to do almost the same thing on a different page.
Because the code was almost identical I named most of the functions the same, thinking that they would never be included in the same page. However, naming conflicts arose because both javascript files were eventually included in the same HTML page.
When I had to go back and change the names I simply added first_ or second_ to the method's names. This was a pain and it doesn't seem very elegant to me. I was wondering if there is a better way to resolve name conflicts in javascript?

Try the JavaScript module pattern (or namespaces) used in various libraries.
Try to be DRY (don't repeat yourself) so you can avoid name collisions. If the code is almost the same you better avoid code duplication by creating a function which can handle both cases. The function can take two parameters: which dropdown to populate and with what data. This helps maintainability as well.
update: I assume that you take the XML from an AJAX request. In this case you can create on-the-fly anonymous functions with the appropriate parameters for callback inside a loop.

I would look at how I could merge the two pieces of code (functions?) into a single function. If you need to populate a list box, then pass the list box id into the function, so you are not hard-coded to operate on one single control only...
I did this on my rocket business's web site where I sold rocket motors with different delay values, but in essence, they were the same product, just a different delay value.
Perhaps this might try and explain what I'm trying to say... I use this if an image file happens to be missing, it will display a "no image" image in place of the real image.
function goBlank(image)
{
if(image) {
var imgobj = document[image];
imgobj.src="/images/blank.png";
}
}
In this case, you call it with:
<img src="/images/aerotech.png" name="header" onError="goBlank('header');">
If you need more example with things like list boxes used, let me know. Perhaps even post some sample code of yours.

Another option (if possible) is to carefully tie the code to the element itself.
e.g.
<input type="text" name="foo" id="foo" value="World" onchange="this.stuff('Hello ' + this.value);"/>
<script>
document.getElementById('foo').stuff = function(msg){
//do whatever you want here...
alert('You passed me: ' + msg);
};
</script>