Clicking the Close button will submit the form to Lcar.php.
The goal is to hide the CSS and remain on the current page after clicking the button.
The issue of the form being submitted to Lcar.php when the Close button is clicked arises despite the fact that the only function within the button includes "document.getElementById("myForm").style.display = "none";".
Is there a way to click the Close button without submitting the form?
<html>
<head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
body {background-repeat: no-repeat; background-image:url(https://illustratedmaps.info/wp-content/uploads/2017/06/hong-kong-skyline-pen2.jpg)}
* {box-sizing: border-box;}
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
left: 28px;
width: 280px;
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
left: 15px;
boder: 3px solid #f1f1f1;
z-index: 9; }
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
.form-container-input {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1; }
.form-container-input-focus{
background-color: #ddd;
outline: none;
}
.form-container-btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
.form-container-cancel {
background-color: #FF0000;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
</style>
</head>
<body>
<div id="myForm" class="form-popup">
<form action="Lcar.php" method="post" class="form-container">
Your Name: <BR>
<input type="text" value="Enter Your Name" name="aname" class="form-container-input" >
<br>
Your Contact Number
<input type="text" value="Enter Your Contact Number" name="anum" class="form-container-input">
<br>
What is your preferred time for us to call you?
<br>
Anytime
<INPUT TYPE="radio" NAME="atime" VALUE="at" CHECKED>
<br>
Mon-Fri 9am-9pm
<INPUT TYPE="radio" NAME="atime" VALUE="wd">
<br>
Sat 9am-1pm
<INPUT TYPE="radio" NAME="atime" VALUE="we">
<br>
(except public holidays)
<br><br>
Shuttle Services:
<br>
<SELECT NAME="services" SIZE=4>
<OPTION VALUE="1">Limousine</OPTION>
<OPTION VALUE="2" SELECTED>Luxury Minivans</OPTION>
<OPTION VALUE="3">Sedans</OPTION>
<OPTION VALUE="4">SUV</OPTION>
</SELECT>
<br><br>
<INPUT TYPE="submit" class="form-container-btn" value="Send">
<button class="form-container-cancel" onclick="closeForm()">Close</button>
</form>
</div>
<button class="open-button" onclick="openForm()">Contact Us</button>
<script>
function openForm() {document.getElementById("myForm").style.display = "block";}
function closeForm(){document.getElementById("myForm").style.display = "none"; }
</script>
</body>
</html>