title: Transfer the calculate value from pop menu to main form
body: <p>I am trying to create form wherein I calculate(sum) the value in popup which I then need to transfer it to main form. It calculates value correctly but doesnt transfer over the value. Can you please help me in establishing where am  gong wrong 
  The code is:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Popup contact form&lt;/title&gt;
  &lt;link href="1.css" rel="stylesheet"&gt;
  &lt;script src="popup.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function findTotal(){
      var arr = document.getElementsByName('qty');
      var tot=0;
      for(var i=0;i&lt;arr.length;i++){
          if(parseInt(arr[i].value))
              tot += parseInt(arr[i].value);
      }
      document.getElementById('total').value = tot;
  }
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;!-- Body Starts Here --&gt;
  &lt;body id="body" style="overflow:hidden;"&gt;
  &lt;div id="abc"&gt;
  &lt;!-- Popup Div Starts Here --&gt;
  &lt;div id="popupContact"&gt;
  &lt;!-- Contact Us Form --&gt;
  &lt;form action="#" id="form" method="post" name="form"&gt;
  &lt;img id="close" src="images/3.png" onclick ="div_hide()"&gt;
  &lt;h2&gt;Contact Us&lt;/h2&gt;
  &lt;hr&gt;
  Qty1 : &lt;input onblur="findTotal()" type="text" name="qty" id="qty2"/&gt;&lt;br&gt;
  Qty2 : &lt;input onblur="findTotal()" type="text" name="qty" id="qty2"/&gt;&lt;br&gt;
  Qty3 : &lt;input onblur="findTotal()" type="text" name="qty" id="qty3"/&gt;&lt;br&gt;
  Qty4 : &lt;input onblur="findTotal()" type="text" name="qty" id="qty4"/&gt;&lt;br&gt;
  Qty5 : &lt;input onblur="findTotal()" type="text" name="qty" id="qty5"/&gt;&lt;br&gt;
  Qty6 : &lt;input onblur="findTotal()" type="text" name="qty" id="qty6"/&gt;&lt;br&gt;
  Qty7 : &lt;input onblur="findTotal()" type="text" name="qty" id="qty7"/&gt;&lt;br&gt;
  Qty8 : &lt;input onblur="findTotal()" type="text" name="qty" id="qty8"/&gt;&lt;br&gt;
  &lt;br&gt;
  Total : &lt;input type="text" name="total" id="total"/&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button id="submit" onclick="div_hide()"&gt;Send&lt;/button&gt;
  
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;!-- Popup Div Ends Here --&gt;
  &lt;/div&gt;
  &lt;!-- Display Popup Button --&gt;
  &lt;h1&gt;Fees&lt;/h1&gt;
  &lt;label&gt;Hostel Charges&lt;label&gt;
  Total : &lt;input type="text" name="total" id="total"/&gt;
  &lt;br&gt;
  &lt;button id="popup" onclick="div_show()"&gt;Hostel Fees Charges&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;!-- Body Ends Here --&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The JavaScript code for Popmenu is </p>
  
  <pre><code>function div_show() {
  document.getElementById('abc').style.display = "block";
  }
  //Function to Hide Popup
  function div_hide(){
  document.getElementById('abc').style.display = "none";
  }
  </code></pre>
  
  <p>css file is </p>
  
  <pre><code>@import "http://fonts.googleapis.com/css?family=Raleway";
  /*----------------------------------------------
  CSS settings for HTML div Exact Center
  ------------------------------------------------*/
  #abc {
  width:100%;
  height:100%;
  opacity:.95;
  top:0;
  left:0;
  display:none;
  position:fixed;
  background-color:#313131;
  overflow:auto
  }
  img#close {
  position:absolute;
  right:-14px;
  top:-14px;
  cursor:pointer
  }
  div#popupContact {
  position:absolute;
  left:50%;
  top:17%;
  margin-left:-202px;
  font-family:'Raleway',sans-serif
  }
  form {
  max-width:300px;
  min-width:250px;
  padding:10px 50px;
  border:2px solid gray;
  border-radius:10px;
  font-family:raleway;
  background-color:#fff
  }
  h2 {
  background-color:#FEFFED;
  padding:20px 35px;
  margin:-10px -50px;
  text-align:center;
  border-radius:10px 10px 0 0
  }
  hr {
  margin:10px -50px;
  border:0;
  border-top:1px solid #ccc
  }
  input[type=text] {
  margin-top:20px;
  border:1px solid #ccc;
  font-size:15px;
  }
  #submit {
  text-decoration:none;
  width:100%;
  text-align:center;
  display:block;
  background-color:#FFBC00;
  color:#fff;
  border:1px solid #FFCB00;
  padding:10px 0;
  font-size:20px;
  cursor:pointer;
  border-radius:5px
  }
  </code></pre>