I need help in mapping the web app to google sprea

I need to create a web app which will read my google spreadsheet column and also record if the action is taken referencing to that cell.

I want a search field in the app where user can enter employee id and if it is mentioned in the list then app should proceed, else error "can't find".

If it is mentioned in the list, user will click on a button such as "Submit", and the details such as YES in Card issued, Date of issuance and in Issued By - email id should be automatically updated. This link should have access to all the users of specific domain and not public.

I have tried many codes available on many websites but I'm unable to get through it. I'm badly in need to complete this. Any help will be appreciated.

Here's my sheet: https://docs.google.com/spreadsheets/d/17ctc5KUeg8qzWN3CD442cSVYpT1gjG4L_6AsBffnhes/edit?usp=sharing

I need something like the attached picture.

enter image description here

This will give you a start. With a little effort on your part you should be able to complete the rest on your own.

To run this you will need to:

Copy code to script editor using the given files names. Save them. Run the showEmployeeSearchDialog() function and that will launch the html. As you progress you should be able to add a doGet function and deploy as a webapp.

Code.gs:

function goFind(id) 
{
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Master');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var found=false;
  var dA=[];
  for(var i=1;i<vA.length;i++)
  {
    if(vA[i][1]==id)
    {
      dA.push(vA[i][0],vA[i][1],vA[i][2],vA[i][3],vA[i][4],vA[i][5]);
    }
  }
  return dA;
}

function showEmployeeSearchDialog()
{
  var ui=HtmlService.createHtmlOutputFromFile('empsearchform');
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Employee Search Form')
}

empsearchform.html

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {

      });
    function goFind()
    {
      var id=$('#txt1').val();
      $('#notfound').css('display','none');
      google.script.run
        .withSuccessHandler(found)
        .goFind(id);
    }
    function found(dA)
    {
      if(dA.length>0)
      {
        $('#hdn1').val(dA[0]);
        $('#txt2').val(dA[2]);
        $('#txt3').val(dA[3]);
        $('#txt4').val(dA[4]);
        $('#txt5').val(dA[5]);
        $('#found').css('display','inline');
      }
      else
      {
        $('#notfound').css('display','inline');
      }
    }
    function goUpdate()
    {

    }
    console.log('MyCode');
    </script>
  </head>
  <body>
  <br /><input type="text" placeholder="Enter Employee ID" id="txt1" size="15" />
  <br /><input type="button" value="Find" onClick="goFind()" />  
  <div id="found" style="display:none;">
  <br />Mobile Number:<input type="text" value="" size="" id="txt2" />
  <br />Card Issued:<input type="text" value="" size="" id="txt3" />
  <br />Date:<input type="text" value="" size="" id="txt4" />
  <br />Issued By:<input type="text" value="" size="" id="txt5" />
  <br /><input type="hidden" value="" id="hdn1" />
  <br /><input type="button" value="Submit" onClick="goUpdate()" />
  </div>
  <div id='notfound' style="display:none;"><br /><br />Employee ID not found.  Reenter Employee ID and push Find to try again.</div>
  </body>
</html>

Here's what the dialog looks like at the present: