What's new

Google form html?

L

loktoy

Eternal Poster
Joined
Oct 20, 2014
Posts
1,168
Solutions
2
Reaction
103
Points
497
Age
30
patulong naman po pano lagyan ng code na ganito po na mag wawarning sya na double name, employee, etc...para di sya tumuloy na mag fill up po

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function AddRow()
{
var EmployeeID = document.getElementById("EmployeeID").value;
var FirstName = document.getElementById("FirstName").value;
var MiddleName = document.getElementById("MiddleName").value;
var LastName = document.getElementById("LastName").value;
var EmailAddress = document.getElementById("EmailAddress").value;
var Password = document.getElementById("Password").value;
if (EmployeeID==""|| FirstName==""|| MiddleName==""|| LastName==""|| EmailAddress==""|| Password=="") {
return false;
}
else {
google.script.run.AddRecord(EmployeeID,FirstName,MiddleName,LastName,EmailAddress,Password);
document.getElementById("page2_id1").className = "page2_id1-off";
document.getElementById("page3_id1").className = "page3_id1";

}
}
function LoginUser()
{
var EmployeeID = document.getElementById("EmployeeID").value;
var Password = document.getElementById("Password").value;
google.script.run.withSuccessHandler(function(output)
{
if(output == 'TRUE')
{
document.getElementById("displayusername").innerHTML = EmployeeID;
document.getElementById("page1_id1").className = "page1_class1-off";
document.getElementById("page4_id1").className = "page4_id1";
}
else if(output == 'FALSE')
{
document.getElementById("errorMessage").innerHTML = "Invalid data";
}
}).checkLogin(EmployeeID, Password);
}

function function1(){
document.getElementById("page1_id1").className = "page1_class1-off";
document.getElementById("page2_id1").className = "page2_id1";
}

function function3(){
document.getElementById("page3_id1").className = "page3_id1-off";
document.getElementById("page1_id1").className = "page1_id1";
}

</script>
<style>
/page1/
.page1_class1-off{
display: none;
}

/page2/
.page2_class1{
display: none;
}
.page2_id1-off{
display:none;
}
/page3/
.page3_class1{
display:none;
}
.page3_id1-off{
display:none;
}
/page4/
.page4_class1{
display:none;
}
.page4_id1-off{
display:none;
}
input[type=text]:hover{
border-bottom:2px solid black;
}
input[type=number]:hover{
border-bottom:2px solid black;
}
input[type=password]:hover{
border-bottom:2px solid black;
}
.user{
display: inline-block;
width: 75px;
height: 75px;
border: 8px solid black;
border-radius: 50%;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
/the head//
.user::before{
content: '';
display: inline-block;
width: 24px;
height: 24px;
background: black;
border-radius: 50%;
position: absolute;
left: calc(50% - 11px);
top: 10px;
}
/the body/
.user::after{
content: '';
display: inline-block;
width:50px;
height:40px;
background: black;
border-radius: 50%;
position: absolute;
left: calc(50% - 24px);
top: 39px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<br><br>
<!--page1-->
<center>
<div class="page1_class1" id="page1_id1" style="background:none;border:2px solid gray;border-radius: 20px;width: 250px;padding-top: 10px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;">
<h1>Login Form</h1>
<br>
<input type="text" id="EmployeeID" placeholder="Employee ID" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;font-weight:bold;"/><br>
<br>
<input type="Password" id="Password" placeholder="Password" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;font-weight:bold;"/>
<br><span id="errorMessage" style="color: red" ></span><br>
<input type="submit" value="Login" onclick="LoginUser()" style="float: right;padding-top: 1px;padding-bottom: 1px;padding-left: 10px;padding-right: 10px;font-size: 0.9em;font-weight:bold;" /><br>
<br>
<b>If you don't have an account,</b><input type="button" onClick="function1()" value="Create New" style="margin-top: 5px;font-weight:bold;" />
</div>
<!--page2-->
<div class="page2_class1" id="page2_id1" style="background:none;border:2px solid gray;border-radius: 20px;width: 250px;padding-top: 10px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;">
<h1>Create Account</h1>
<input type="text" id="EmployeeID" placeholder="Employee ID" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;font-weight:bold;"/><br>
<br>
<input type="First Name" id="FirstName" placeholder="First Name" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size: 0.9;width: 50%;font-weight:bold;" /><br>
<br>
<input type="Middle Name" id="MiddleName" placeholder="Middle Name" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size: 0.9;width: 50%;font-weight:bold;" /><br>
<br>
<input type="Last Name" id="LastName" placeholder="Last Name" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size: 0.9;width: 50%;font-weight:bold;" /><br>
<br>
<input type="text" id="EmailAddress" placeholder="Email Address" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;font-weight:bold;"/><br>
<br>
<input type="Password" id="Password" placeholder="Create password" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size: 0.9;width: 50%;font-weight:bold;" /><br><br>
<b style="color:red;">Password must contain letters and numbers. It will not work without letters and numbers.</b><br><br>
<input type="submit" value="Create" onclick="AddRow()" style="float: right;padding-top: 0px;padding-bottom: 1px;padding-left: 10px;padding-right: 10px;font-size: 0.9em;font-weight:bold;" />
</br>

</div>
<!--page3-->
<div class="page3_class1" id="page3_id1" style="background:none;border:2px solid gray;border-radius: 20px;width: 250px;padding-top: 10px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;"><center>
<h2> Your account has been successfully created. Login to your account</h2>
<input type="submit" onClick="function3()" value="Login" style="font-weight:bold;"><br>
</div>
<!--page4-->
<div class="page4_class1" id="page4_id1" style="background:none;border:2px solid gray;border-radius: 20px;width: 250px;padding-top: 10px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;" ><center>
<br>
<h2>Hi <b id="displayusername" style="color:red;"></b>!</h2>
<div class="user"></div>
<h2> You are successfully logged in.</h2>
<h2>**************</h2>
<br>
</div>
</center>
</body>
</html>
 
To add a warning for double name or employee, you need to check if the name or employee ID already exists in the database before allowing the user to add a new record. Here's a modified AddRow() function that includes this check:

Code: 
function AddRow() {
  var EmployeeID = document.getElementById("EmployeeID").value;
  var FirstName = document.getElementById("FirstName").value;
  var MiddleName = document.getElementById("MiddleName").value;
  var LastName = document.getElementById("LastName").value;
  var EmailAddress = document.getElementById("EmailAddress").value;
  var Password = document.getElementById("Password").value;
  if (EmployeeID == "" || FirstName == "" || MiddleName == "" || LastName == "" || EmailAddress == "" || Password == "") {
    return false;
  } else {
    google.script.run.withSuccessHandler(function(allRecords) {
      // check if name already exists
      var nameExists = allRecords.some(function(record) {
        return record['First Name'] == FirstName && record['Middle Name'] == MiddleName && record['Last Name'] == LastName;
      });
      // check if employee ID already exists
      var employeeIDExists = allRecords.some(function(record) {
        return record['Employee ID'] == EmployeeID;
      });
      if (nameExists) {
        alert('The name ' + FirstName + ' ' + MiddleName + ' ' + LastName + ' already exists.');
      } else if (employeeIDExists) {
        alert('The employee ID ' + EmployeeID + ' already exists.');
      } else {
        google.script.run.AddRecord(EmployeeID, FirstName, MiddleName, LastName, EmailAddress, Password);
        document.getElementById("page2_id1").className = "page2_id1-off";
        document.getElementById("page3_id1").className = "page3_id1";
      }
    }).getAllRecords();
  }
}

In this modified function, we first call the getAllRecords() function to get all existing records in the database. We then use the some() method to check if the name or employee ID already exists in the database. If either one exists, we display an alert message and stop the function from adding a new record. If neither one exists, we proceed with adding the new record as before.
 

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development error help how html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 1
    Replies
  • 216
    Views
  • 2
    Participants
Last reply from:
🤖

New Topics

Popular On This Forum

Online statistics

Members online
1,146
Guests online
2,981
Total visitors
4,127
Back
Top