title: read value editbox in ssjs in a custom control
body: <p>I have a custom control with an editbox in a modal:</p>
  
  <p><code>&lt;xp:inputText id="inputText1"&gt;&lt;/xp:inputText&gt;</code></p>
  
  <p>In the onclick event of a button , I would like to read the value of this editbox</p>
  
  <pre><code>var demo = getComponent("inputText1").getValue();
  </code></pre>
  
  <p>Of course this doesn't work in a custom control, since he doesn't has a handle to inputText1. How can this be done ?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Herewith I'm posting my 'whole' code.
  Even with a scoped variable it isn't working .... :(</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;xp:view xmlns:xp="http://www.ibm.com/xsp/core"&gt;
  
  &lt;xp:this.resources&gt;
      &lt;xp:styleSheet href="bootstrap-modal.css"&gt;&lt;/xp:styleSheet&gt;
      &lt;xp:script src="/bootstrap-modalmanager.js" clientSide="true"&gt;&lt;/xp:script&gt;
      &lt;xp:script src="/bootstrap-modal.js" clientSide="true"&gt;&lt;/xp:script&gt;
      &lt;xp:script src="/JQueryXSnippet.js" clientSide="true"&gt;&lt;/xp:script&gt;
  &lt;/xp:this.resources&gt;
  
  &lt;div id="Modal1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;"&gt;
  
  &lt;div class="modal-header"&gt;
  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
  &lt;h4 class="modal-title"&gt;Modal One&lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;div class="modal-body"&gt;
  &lt;p&gt;Modal 1 &lt;/p&gt;
  &lt;div class="form-group"&gt;
      &lt;label for="inputText1"&gt;First Name:&lt;/label&gt;
          &lt;xp:inputText id="inputText1" value="#{viewScope.input1}"&gt;
              &lt;xp:this.attrs&gt;
                  &lt;xp:attr name="class" value="form-control"&gt;&lt;/xp:attr&gt;
                  &lt;xp:attr name="data-tabindex" value="1"&gt;&lt;/xp:attr&gt;
              &lt;/xp:this.attrs&gt;
          &lt;/xp:inputText&gt;
  &lt;/div&gt; 
  
  &lt;xp:button value="Demo" id="button2"&gt;
      &lt;xp:eventHandler event="onclick" submit="true"
          refreshMode="partial" refreshId="demoPanel"&gt;
          &lt;xp:this.action&gt;&lt;![CDATA[#{javascript:viewScope.message = "input1 = "+viewScope.input1;}]]&gt;&lt;/xp:this.action&gt;
      &lt;/xp:eventHandler&gt;
  &lt;/xp:button&gt;
  
  &lt;xp:panel id="demoPanel"&gt;
      &lt;xp:text escape="true" id="computedField1"
          value="#{viewScope.message}"&gt;
      &lt;/xp:text&gt;
  &lt;/xp:panel&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
  &lt;button type="button" data-dismiss="modal" class="btn btn-primary"&gt;Close&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;xp:scriptBlock id="scriptBlock1"&gt;
  &lt;xp:this.value&gt;&lt;![CDATA[
  $(document).ready(function(){
  x$("#{id:button1}").click(function(){
  x$("#{id:Modal1}").modal(
  {backdrop: true,
  keyboard: false,
  show: true
  }
  );
  });
  });
  ]]&gt;&lt;/xp:this.value&gt;
  &lt;/xp:scriptBlock&gt;
  
  &lt;xp:button value="Login" id="button1" styleClass="btn btn-info btn-lg"&gt;
  &lt;/xp:button&gt;
  
  &lt;/xp:view&gt;
  </code></pre>