title: get text input after submit button or press enter from search bar
body: <p>I want to know how get an input from search bar</p>
  
  <p>and how to replace image in div</p>
  
  <p>I try to create a simple website to get the picture and then show up because i don't want to download each picture and merge in photoshop</p>
  
  <p>This is i have try.</p>
  
  <p>p.s. It's my free time to explore how to use html css and javascript.
  P.s. No need to read my css. i just want some suggestion to get data by using javascript
  Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getInput() {
    var input_symbol = get input from search bar
    var input_symbol = input_symbol.concat(*BK);
    
  /***** after that use the value to get data from this website
  ****** by 5 periods 30min 120min day week month 
  http://www.investorz.com/investorzChart.php?
  mode=pc
  &amp;Provider=DDC
  &amp;symbolnsources=input_symbol
  &amp;Size=1200*1080
  &amp;End=20170124
  &amp;Start=
  &amp;period=Monthly //weekly //daily //Minutely
  &amp;interval=1 //120 and 30 (for Minutely period)
  &amp;Cycle=MONTH1 //WEEK1 DAY1 //MINUTE120 MINUTE30 (for Minutely period)
  &amp;Type=3
  &amp;ticket=1
  &amp;Scale=0
  &amp;EMA=5;10;25;50;75;200
  &amp;MA=
  &amp;OVER=;;;;
  &amp;IND=RSI(7);MACD(12,26,9);;;
  &amp;COMP=
  &amp;ShowBar=100
  &amp;max=400
  &amp;Skin=InvestorLight
  &amp;Layout=2Line;Default;Price;HisDate
  &amp;Width=1
  &amp;TimeStamp=21;50;1485183010.73 //current time
  *************************************************** then replace all of 5 divs /
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
    padding: 3px 3px 3px 3px;
  
    background-color: #d8dbe2;
  
    font-family: Verdana, sans-serif;
    font-size: 11pt;
    text-align: center;
  }
  #custom-search-input {
    margin:0;
    margin-top: 10px;
    padding: 0;
  }
  
  #custom-search-input .search-query {
    padding-right: 3px;
    padding-right: 4px \9;
    padding-left: 3px;
    padding-left: 4px \9;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
  
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  
  #custom-search-input button {
    border: 0;
    background: none;
    /** belows styles are working good */
    padding: 2px 5px;
    margin-top: 2px;
    position: relative;
    left: -28px;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #000000;
  }
  
  .search-query:focus + button {
    z-index: 3;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 2px solid #ddd;
  }
  
  th, td {
    text-align: left;
    padding: 8px;
  }
  
  img {
    max-width: 800px;
    height: auto;
    width: auto\9; /* ie8 */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;body&gt;
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;
                &lt;div id="custom-search-input"&gt;
                    &lt;div class="input-group col-md-12"&gt;
                        &lt;input type="text" class="  search-query form-control" placeholder="ADD SYMBOL" /&gt;
                        &lt;span class="input-group-btn"&gt;
                          &lt;button class="btn btn-danger" type="button" onclick="getInput();"&gt;
                              &lt;span class=" glyphicon glyphicon-search"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;div id="img1"&gt;&lt;img src="img1.png"&gt;&lt;/div&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;div id="img2"&gt;&lt;img src="img2.png"&gt;&lt;/div&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;div id="img3"&gt;&lt;img src="img3.png"&gt;&lt;/div&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;div id="img4"&gt;&lt;img src="img4.png"&gt;&lt;/div&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;div id="img5"&gt;&lt;img src="img5.png"&gt;&lt;/div&gt;
                &lt;/td&gt;
  
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>