[SalesForce] Rerender inputfield using outputPanel, but display in one line

I was having a similar issue with IE11. I had a Visualforce form, and sections of the page were re-rendered. In IE11, some empty tags were problematic. This included tags used for clearing and <apex:inputTextarea>.

To correct the div, I inserted the html code for a space(&nbsp;). For example: <div class="clearer">&nbsp;</div>

To correct the apex:inputTextarea, I had to make sure that it was never rendered empty. In the controller, I added at least three blank spaces in the field used by the textarea when the field didn't contain text. The tag would then rerender showing one blank space. Adding only one or two spaces didn't work, not sure why. Before processing, I trimmed any left blanks.

Example apex: if (MyTextAreaField == null || MyTextAreaField.trim().length() == 0) MyTextAreaField = '   ';

The $Component notation is quite picky about the correct number of prefixes, so if your amount, lc1 elements are nested inside other Visualforce components (such as pageblocks, datatables, outputpanels) you need to include the full hierarchy to get the correct name. I used to build this up in baby steps starting with the outermost container and check the page source each time to see if the $Component rendered anything (meaning it was a valid path) or if it was blank (meaning invalid).

These days I use a JQuery selector to find the element that ends with the particular id - that way I don't have to worry about the location prefixes and I can move elements around the page without having to rebuild the "fully qualified" name.

I include JQuery from a CDN, but you could load it as a static resource :

<apex:includescript 
      value="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />

and then pass the id string literals to the JavaScript function :

<apex:outputLink value="javascript:compute('Amount', 'lc1',  ... etc);
  Compute
</apex:outputLink>

then build up JQuery selectors based on the literal ids:

<script>
    function compute(amount, lc1, lc2, lc3, lc4, lc5, lc6) {

       /* Compute the loan charges depending on the loan amount here */
          $('[id$=' + lc1 + ']').val(6);
          $('[id$=' + lc2 + ']').val(6);
         ... etc
    }
</script>

The key aspect of the selector is the '[id$=' + lc1 + ']' this translates to 'the element with an id that ends with the contents of the lc1 variable'. I've also used the JQuery val() method to set the value of the element.