GlideDialogWindow to take input from user and set Values on form ServiceNow

Client Script:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
          return;
    }
 var gdw = new GlideDialogWindow('ui_page_name',false, 600, 300);
      gdw.setTitle('Working Code');
     gdw.setPreference('sysparm_oldValue', 'oldValue');
      gdw.render();
}

UI page : ui_page_name

HTML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <j:set var="jvar_renew_contact" value="${RP.getWindowProperties().get('sysparm_oldValue')}" />
<div>
 <p><h1 style="color:#14213D !important;text-align:center">User Input Form</h1></p>
 <div class="row">
      <div class="col-md-6">
        <label style="color:#14213D !important">First Name</label><span class="required-mark" style="color:red">*</span>
    <input type="text" class="form-control" placeholder="enter last name (limit 75 chars)"  id="first_name" onchange="firstNameValidation()" />
         </div>
       <div class="col-md-6">
        <label style="color:#14213D !important">Last Name</label><span class="required-mark" style="color:red">*</span>
        <input  class="form-control" type="text" placeholder="enter last name (limit 75 chars)" id="last_name" onchange="lastNameValidation()"/>
        </div>
      </div>
              <div class="row">
      <div class="col-md-6">
        <label style="color:#14213D !important">Email Address</label><span class="required-mark" style="color:red">*</span>
           <input  class="form-control" type="text" id="email1" placeholder="enter email address; format joe@domain.com"/>
        </div>
            <div class="col-md-6">
        <label style="color:#14213D !important">Phone Number</label><span class="required-mark" style="color:red">*</span>
        <input  class="form-control" type="text" id="phone_number" placeholder="Enter Phone Number" />
        </div>
           </div>
          <button type="button"  onclick="cancelpop1()" style="color:white;background:#14213D !important">Submit</button>
  <button type="button" onclick="cancelpop('${jvar_renew_contact}')" style="background-color: red;color:white">Cancel</button>
   </div></j:jelly>

Client Script:

function cancelpop(val) {
    var gdw = GlideDialogWindow.get();
    g_form.setValue("start_date", val);
    gdw.destroy();
}
 function cancelpop1() {
  g_form.setValue("first_name",gel('first_name').value);
 g_form.setValue("last_name",gel('last_name').value);
 g_form.setValue("email1",gel('email1').value);
 g_form.setValue("phone_number",gel('phone_number').value);
    var gdw = GlideDialogWindow.get();
    gdw.destroy();
}