|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
|
<!– Special version of Bootstrap that only affects content wrapped in .bootstrap-iso –> |
|
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> |
|
|
|
<!– Inline CSS based on choices in "Settings" tab –> |
|
<style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color: #54787c}.bootstrap-iso form button, .bootstrap-iso form button:hover{color: #ffffff !important;}.bootstrap-iso .form-control:focus { border-color: #e9666c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 108, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 108, 0.6);} .asteriskField{color: red;}.bootstrap-iso form .input-group-addon {color:#555555; background-color: #f7efef; border-radius: 4px; padding-left:12px}</style> |
|
|
|
<!– HTML Form (wrapped in a .bootstrap-iso div) –> |
|
<div id="app"> |
|
<p v-if="errors.length" style="color:red"> |
|
<b>Please correct the following error(s):</b> |
|
<ul> |
|
<li v-for="error in errors">{{ error }}</li> |
|
</ul> |
|
</p> |
|
<div class="bootstrap-iso"> |
|
<div class="container-fluid"> |
|
<div class="row"> |
|
<div class="col-md-6 col-sm-6 col-xs-12"> |
|
<!– Start Your Name Field–> |
|
<div class="form-group "> |
|
<label class="control-label " for="name"> |
|
Your Name * |
|
</label> |
|
<input class="form-control" id="name" name="name" type="text" v-model="name"/> |
|
</div> |
|
<!– End Your Name Field–> |
|
|
|
<!– Start phone Field–> |
|
<div class="form-group "> |
|
<label class="contrl-label " for="phone"> |
|
Office Phone |
|
</label> |
|
<input class="form-control" id="phone" name="phone" type="text" v-model="officePhone"/> |
|
</div> |
|
<!– End phone Field–> |
|
|
|
<!– Start location Field–> |
|
<div class="form-group "> |
|
<label class="control-label " for="location"> |
|
Location |
|
</label> |
|
<input class="form-control" id="location" name="location" type="text" v-model="location"/> |
|
</div> |
|
<!– End location Field–> |
|
|
|
<!– Start email Field–> |
|
<div class="form-group "> |
|
<label class="control-label " for="email"> |
|
Email |
|
</label> |
|
<input class="form-control" list="siteUerEmails" id="email" name="email" type="text" v-model="email"/> |
|
<datalist id="siteUerEmails"> |
|
<option v-for="email in siteEmails" v-bind:value="email.Email"></option> |
|
</datalist> |
|
</div> |
|
<!– End email Field–> |
|
|
|
<!– Start requestType Field–> |
|
<div class="form-group "> |
|
<label class="control-label " for="requestType"> |
|
Request Type |
|
</label> |
|
<select class="select form-control" id="requestType" name="requestType" v-on:change="showRequestType" v-model="requestType"> |
|
<option selected="selected" value=""> |
|
</option> |
|
<option value="Laptop"> |
|
Laptop |
|
</option> |
|
<option value="Mobile"> |
|
Mobile |
|
</option> |
|
</select> |
|
</div> |
|
<!– End requestType Field–> |
|
|
|
<!– Start description Field–> |
|
<div class="form-group "> |
|
<label class="control-label " for="textarea"> |
|
Description |
|
</label> |
|
<textarea class="form-control" cols="40" id="textarea" name="textarea" rows="10" v-model="description"></textarea> |
|
</div> |
|
<!– End description Field–> |
|
|
|
<!– BEGIN TEMPLATE –> |
|
<!– BEGIN MOBILE SECTION –> |
|
<template v-if="boolMobile"> |
|
<!– Start mobilePhone Field–> |
|
<div class="form-group "> |
|
<label class="control-label " for="mobilePhone"> |
|
Mobile #: |
|
</label> |
|
<input class="form-control" id="mobilePhone" name="mobilePhone" type="text" v-model="mobileNum" /> |
|
</div> |
|
<!– End mobilePhone Field–> |
|
|
|
<!– Start phoneBrand Field–> |
|
<div class="form-group "> |
|
<label class="control-label " for="select1"> |
|
Phone brand |
|
</label> |
|
<select class="select form-control" id="select1" name="select1" v-model="phoneBrand"> |
|
<option selected="selected" value=""> |
|
</option> |
|
<option value="Apple"> |
|
Apple |
|
</option> |
|
<option value="Google"> |
|
Google |
|
</option> |
|
<option value="Nokia"> |
|
Nokia |
|
</option> |
|
<option value="LG"> |
|
LG |
|
</option> |
|
<option value="Samsung"> |
|
Samsung |
|
</option> |
|
</select> |
|
</div> |
|
<!– End phoneBrand Field–> |
|
|
|
<!– Start Mobile Operating System Field–> |
|
<div class="form-group "> |
|
<label class="control-label "> |
|
Mobile Operating System |
|
</label> |
|
<div class=""> |
|
<div class="radio"> |
|
<label class="radio"> |
|
<input name="radio" type="radio" value="Android" v-model="mobileOS" v-on:click="showHideMobileModel"/> |
|
Android |
|
</label> |
|
</div> |
|
<div class="radio"> |
|
<label class="radio"> |
|
<input name="radio" type="radio" value="iPhone" v-model="mobileOS" v-on:click="showHideMobileModel"/> |
|
iPhone |
|
</label> |
|
</div> |
|
</div> |
|
</div> |
|
<!– End Mobile Operating System Field–> |
|
|
|
<!– BEGIN ANDROID Model –> |
|
<div class="form-group" v-if="boolAndroidModel"> |
|
<label class="control-label " for="androidModels"> |
|
Android Models |
|
</label> |
|
<select class="select form-control" id="androidmodels" name="androidmodels" v-model="androidmodels"> |
|
<option selected="selected" value=""> |
|
</option> |
|
<option value="Google Pixel 3"> |
|
Google Pixel 3 |
|
</option> |
|
<option value="Samsung Galaxy"> |
|
Samsung Galaxy |
|
</option> |
|
</select> |
|
</div> |
|
<!– END ANDROID Model –> |
|
|
|
<!– BEGIN iPHONE Model –> |
|
<div class="form-group " v-if="booliPhoneModel"> |
|
<label class="control-label " for="select4"> |
|
iPhone Models |
|
</label> |
|
<select class="select form-control" id="select4" name="select4" v-model="iphonemodels"> |
|
<option selected="selected" value=""> |
|
</option> |
|
<option value="iPhone 7"> |
|
iPhone 7 |
|
</option> |
|
<option value="iPhone 6"> |
|
iPhone 6 |
|
</option> |
|
</select> |
|
<!– END iPHONE Model –> |
|
</div> |
|
</template> |
|
<!– END MOBILE SECTION –> |
|
<!– END TEMPLATE –> |
|
|
|
<!– BEGIN TEMPLATE –> |
|
<!– BEGIN LAPTOP SECTION –> |
|
<template v-if="boolLaptop"> |
|
<div class="form-group "> |
|
<label class="control-label " for="laptopBrand"> |
|
Laptop Brands |
|
</label> |
|
<select class="select form-control" id="laptopBrand" v-model="laptopBrands">{{laptopBrands}} |
|
<option selected="selected" value=""> |
|
</option> |
|
<option value="Lenovo"> |
|
Lenovo |
|
</option> |
|
<option value="HP"> |
|
HP |
|
</option> |
|
<option value="Microsoft"> |
|
Microsoft |
|
</option> |
|
<option value="Dell"> |
|
Dell |
|
</option> |
|
</select> |
|
</div> |
|
<div class="form-group "> |
|
<label class="control-label "> |
|
Laptop OS |
|
</label> |
|
<div class=""> |
|
<div class="radio"> |
|
<label class="radio"> |
|
<input name="LaptopOS" type="radio" value="Windows 7" v-model="laptopOS" />{{laptopOS}} |
|
Windows 7 |
|
</label> |
|
</div> |
|
<div class="radio"> |
|
<label class="radio"> |
|
<input name="LaptopOS" type="radio" value="Linux" v-model="laptopOS" /> |
|
Linux |
|
</label> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="form-group " v-if="boolLaptopSerial"> |
|
<label class="control-label " for="text3"> |
|
Laptop Serial # |
|
</label> |
|
<input class="form-control" id="text3" name="text3" type="text"/> |
|
</div> |
|
</template> |
|
<!– END LAPTOP SECTION –> |
|
<!– END TEMPLATE –> |
|
|
|
<div class="form-group"> |
|
<div> |
|
<button class="btn btn-primary btn-sm" name="submit" type="button" v-on:click="submitForm"> |
|
Submit |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
<script src="/sites/SharePointSaturdays/SPSaturday/webpart/helpdesk/helpdesk.js"></script> |