title: How to display customized output based on field values
body: <p>So my aim is to create a pop up modal where one could click to enter their regional school code in a text or number field to see if they are eligible for the files posted or not.</p>
  <p>for example, if your code is 11002, you should get the <em><strong>recommended message</strong></em> else the <em>apology message</em> also I would like to have a button that can prompt user to go back and enter a new code if the last one is not accepted. This should all be on the same page.</p>
  <p>Below is my code so far but I wish to display the result in a span as plain text not as in a field.</p>
  <pre><code>&lt;style&gt;
  #result {
    width: 100%;
  }
  #btn1 {
    float: right;
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  function locationlookup() {
    var result = document.getElementById(&quot;areacode&quot;).value;
    var schooling;
    if (result == 11002) {
      schooling = &quot;Great! Your school is eligible for this course&quot;;
    } else if (result == 11003) {
      schooling = &quot;Great! Your school is eligible for this course&quot;;
    } else if (result == 11004) {
      schooling = &quot;Your school is eligible but you need good conduct certificate&quot;;
    } else {
      schooling = &quot;Sorry. we currently do not serve in your entered location&quot;;
    }
    document.getElementById(&quot;result&quot;).value = schooling;
  }
  &lt;/script&gt;
  
    &lt;table  align=&quot;center&quot;&gt;
        &lt;tr&gt;
          &lt;th&gt;School Area code: &lt;input type=&quot;text&quot; name=&quot;areacode&quot; id=&quot;areacode&quot; &gt;
            &lt;button onclick=&quot;locationlookup()&quot; id=&quot;btn1&quot;&gt;Lookup&lt;/button&gt;
          &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;
          &lt;input type=&quot;text&quot; name=&quot;result&quot; id=&quot;result&quot; readonly&gt;&lt;/th&gt;
          &lt;!-- I wish to change the above field to a span so no limitations. but stuff don't 
  work for me --&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>