Visualforce not reading variables below element - salesforce

Question

Ok so the title is confusing and the question will likely be too as Im new to this whole VF/Apex thing and dont know proper terminology.
The idea is when the user selects one of the options ("other") then the controller will concatenate the value of the textbox (!otherString) into the custom object.
The issuse is I want the input textbox to go below the select menu but if I put it below the menu the user input is no longer readable.
This works:
<apex:inputText value="{!otherString}" id="otherText" />
<apex:selectCheckboxes layout="PageDirection" value="{!other}" id="standardMap" required="true">
<apex:selectOptions value="{!shareTypes}" />
</apex:selectCheckboxes>
Output: "Other: Model" ("Model" being whatever the user typed)
This doesnt work:
<apex:selectCheckboxes layout="PageDirection" value="{!other}" id="standardMap" required="true">
<apex:selectOptions value="{!shareTypes}" />
</apex:selectCheckboxes>
<apex:inputText value="{!otherString}" id="otherText" />
Output: "Other: null" (null being because it couldnt read the textbox)
Relevant Controller Code:
List<String> other = new List<String>{};
public String otherString{get;set;}
public List<String> getOther() {
return other;
}
public void setOther(List<String> other) {
Set<String> mySet = new Set<String>();
mySet.addAll(other);
if (mySet.Contains('Other'))
{
String result = String.join(other, ', ' );
control.Share_Types__c = result + ': ' +otherString;
}
else
{
String result = String.join(other, ', ' );
control.Share_Types__c = result;
}
}

Answer 1

but if I put it below the menu the user input is no longer readable
Your code kind of relies on the order in which getter and setter methods will execute (if you'll enable debug logging or fire up developer console you'll see that the order of get/set statements kind of matches the order in which expressions appear on the page... but there's a chance you'll see something firing more than once!).
Salesforce recommends not relying on the order in which get/set fire and your application shouldn't care if setOther is called once or 10 times (so you shouldn't have complex queries as side-effects in setters for example).
I assume you already have some action method (something that's bound to apex:commandButton or apex:commandLink) - you should move this logic from the setter to that method instead. Do you have our own method or are you using StandardController's {!save} for example?
Some further reading:
https://www.salesforce.com/us/developer/docs/pages/Content/pages_controller_methods.htm (check the warnings with red exclamation marks)
https://salesforce.stackexchange.com/questions/9167/getter-setter-confused (a shameless plug :P)
http://www.tehnrd.com/getter-method-order-and-visualforce-pages/
Edit - you've mentioned you're looking into some submitting without user having to click any button. Check if something like this is close to what you need.
public class Checkboxes{
public List<SelectOption> options {get;private set;}
public List<String> selected {get;set;}
public Boolean otherSelected {get; private set;}
public String otherOption {get;set;}
public transient String output {get; private set;}
public Checkboxes(){
options = new List<SelectOption>{
new SelectOption('Apex', 'Apex'),
new SelectOption('JavaScript', 'JavaScript'),
new SelectOption('Visualforce', 'Visualforce'),
new SelectOption('Other', 'Other')
};
selected = new List<String>();
otherSelected = false;
}
public void skillsChanged(){
try{
Set<String> temp = new Set<String>();
temp.addAll(selected);
otherSelected = temp.contains('Other');
if(otherSelected){
output = 'Other : ' + (String.isBlank(otherOption) ? '<not specified>' : otherOption);
} else {
output = String.join(selected, ', ');
}
System.debug(output);
} catch(Exception e){
ApexPages.addMessages(e);
}
}
}
<apex:page controller="Checkboxes" tabStyle="Account">
<apex:pageMessages />
<apex:form>
<apex:pageblock id="block">
<apex:pageBlockButtons location="top">
<apex:actionStatus id="status">
<apex:facet name="start"><img src="/img/loading.gif" alt="Loading" title="Loading"/></apex:facet>
</apex:actionStatus>
</apex:pageBlockButtons>
<apex:pageBlockSection title="input" columns="1">
<apex:selectCheckboxes label="Your skills" value="{!selected}" required="true">
<apex:selectOptions value="{!options}" />
<apex:actionSupport action="{!skillsChanged}" event="onchange" status="status" rerender="messages, block"/>
</apex:selectCheckboxes>
<apex:inputText label="Please Specify" value="{!otherOption}" rendered="{!otherSelected}">
<apex:actionSupport action="{!skillsChanged}" event="onchange" status="status" rerender="messages, text"/>
</apex:inputText>
</apex:pageBlockSection>
<apex:pageBlockSection title="output">
<apex:outputText value="{!output}" id="text"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>