让div像表单提交按钮一样

Question

IM试图使Flipper div的作用类似于提交按钮。
一旦单击，将翻转（以某种非脚本样式显示），谢谢，提交表单，等待5秒钟，然后返回索引页面。我放置了一个警报脚本，以验证单击该脚本后脚本是否运行，但是当我将警报替换为

document.getElementById('msform').submit(); 

它的作用不像上方的“提交”按钮。 我可以将邮件程序脚本放在单独的页面上并使用

<form id="msform"   method="post" action="mailerscript.php"/>

但是我给人的印象是，用户将表格放在自己的网站上并以这种方式链接到我的邮件脚本的安全性较低。但是对此我有点陌生，所以我不知道这似乎合乎逻辑。.

那么为什么我的点击工作不会像“提交”按钮那样，它应该获取表单的ID并提交。重新加载页面，看看帖子已设置好并正确运行邮件脚本？

@import url(https://fonts.googleapis.com/css?family=Montserrat:400);


.flipper-container {
  text-align: center;
  margin-top: 40px;
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.flipper {
  display: inline-block;
  position: relative;
  text-decoration: none;
  font-family: 'Montserrat', arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  width: 11em;
  height: 4.5em;
  background-color: #282828;
  box-shadow: 0 3px 5px #282828;
  -moz-transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
  -o-transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
  -webkit-transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
  transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.flipper:target {
  -moz-transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

.front-face, .back-face {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-right: 70px;
  letter-spacing: 2px;
  line-height: 4.5em;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front-face:before, .back-face:before {
  content: attr(data-icon);
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 70px;
  border-radius: 0 2px 2px 0;
}

.front-face {
  background-color: #00BFFF;
  color: #fff;
  text-shadow: 0 1px 1px #007399;
  -moz-transform: rotateX(0deg) translateZ(2.25em);
  -ms-transform: rotateX(0deg) translateZ(2.25em);
  -webkit-transform: rotateX(0deg) translateZ(2.25em);
  transform: rotateX(0deg) translateZ(2.25em);
}
.front-face:before {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwODZiMyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMWU5MGZmIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMxZTkwZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMGJmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -moz-linear-gradient(45deg, #0086b3 0%, #1e90ff 50%, #1e90ff 50%, #00bfff);
  background-image: -webkit-linear-gradient(45deg, #0086b3 0%, #1e90ff 50%, #1e90ff 50%, #00bfff);
  background-image: linear-gradient(45deg, #0086b3 0%, #1e90ff 50%, #1e90ff 50%, #00bfff);
}

.back-face {
  background-color: #77BD42;
  color: #53842e;
  -moz-transform: rotateX(-90deg) translateZ(2.25em);
  -ms-transform: rotateX(-90deg) translateZ(2.25em);
  -webkit-transform: rotateX(-90deg) translateZ(2.25em);
  transform: rotateX(-90deg) translateZ(2.25em);
}
.back-face:before {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzODQyZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNzZiYzQyIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM3ZGJkNGMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3N2JkNDIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -moz-linear-gradient(45deg, #53842e 0%, #76bc42 50%, #7dbd4c 50%, #77bd42);
  background-image: -webkit-linear-gradient(45deg, #53842e 0%, #76bc42 50%, #7dbd4c 50%, #77bd42);
  background-image: linear-gradient(45deg, #53842e 0%, #76bc42 50%, #7dbd4c 50%, #77bd42);
}

<?php
session_start();
$token= md5(uniqid());
$_SESSION['delete_customer_token']= $token;
session_write_close();
?>

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>title.</title>



<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $.mask.definitions['~'] = "[+-]";
        $("#phone").mask("1 (999) 999-9999");
        

        $("input").blur(function() {
            $("#info").html("Unmasked value: " + $(this).mask());
        }).dblclick(function() {
            $(this).unmask();
        });
    });

</script>



</head>
<body>

    
<form id="msform"   method="post" action="javascript:alert( 'success!' );"/>
<input type="hidden" name="token" value="<?php echo $token; ?>"/>
<input type="hidden" name="miles" value=""/>


<h2 class="fs-title">form</h2>


<div id="formwrap">
<div id="ftx1">input1</div>
<input type="text" name="fname" class="box" maxlength="40" min="9" max="40"placeholder=""/>
</div>


<div id="formwrap">
<div id="ftx1">input2</div>
<input type="text" name="lname" class="box" maxlength="40" min="9" max="40"placeholder=""/>
</div>




<div id="formwrap">
<div id="ftx1">input3:</div>
<input id="busname" name="busname" class="element text medium" type="text" maxlength="40" value="" placeholder="">
</div>




<div id="formwrap">
<div id="ftx1">input4:*</div>
<input id="bustype" type="bustype" name="bustype" size="" maxLength="64"
          placeholder=""
          title="Please provide only a email address" >
</div>


<div id="formwrap">
<div id="ftx1">input5: *</div>
<input id="email" type="email" name="email" size="" maxLength="64"
          placeholder=""
          title="Please provide only a email address" required>
</div>



<div id="formwrap">
<div id="ftx1">PHONE NUMBER: *</div>
<input id="phone" name="phone" class="element text medium" maxlength="" value="" placeholder="PHONE NUMBER" type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" title="Phone Number Format:1 (614) 000-0000" required/>
</div> 


<br><br>


<input id="submit" class="button_text" type="submit" name="submit" value="button below to act like this button" />
<br><br>

<a href="#id" class="flipper-container"  onclick="timeis();">
  <div id="id" class="flipper">
    <div class="front-face" data-icon="&#x27B2;"><span data-hover="Clicked">
Submit</span></div>
    <div class="back-face" data-icon="&#10003;">Thank You</div>
  </div>
</a>


<h2> will contact you within 24h. Thank You!</h2>


<script type="text/javascript">
    function timeis () {
   alert("timeis was activated");
} 
   


</script>


</form>

   
   


</body>
</html>

<?php

//values to be inserted in database table

$fname = $_POST['fname'] ;
$lname = $_POST['lname'] ;
$email = $_POST['email'] ;
$phone = $_POST['phone'] ;
$busname = $_POST['busname'] ;
$bustype = $_POST['bustype'] ;
$IP = $_SERVER['REMOTE_HOST'] ?: gethostbyaddr($_SERVER['REMOTE_ADDR']);


if (isset($_POST['submit'])){

//cleans the data
$_POST = preg_replace("/[^-,A-Za-z0-9,@,')','(','.' ]/", "",$_POST);


//connect to db

$db = new mysqli('localhost','database','pass','table');
//MySqli Insert Query
$insert_row = $db->query("INSERT INTO `solid`(`fname`,`lname`,`email`,`phone`,`IP`) VALUES ('$fname','$lname','$email','$phone','$IP')");
$token = $_SESSION['delete_customer_token'];
unset($_SESSION['delete_customer_token']);
session_write_close();

//check if post form was submitted
if(isset($_POST)){

//check if hidden value was used
if(isset($_POST['miles']) && trim($_POST['miles']) !=''){
die('THERE WAS AN ERROR');
}
//implode all the post data and check against bad words in a text file
$my_bad_file = "inc/words.txt"; //make a new file and insert any bad items one per line, Phrases work as well
if(!file_exists($my_bad_file)){
die("Can't find $my_bad_file");
}
$check_content = implode(",", $_POST);
$bad_content_array = array_map('rtrim', file($my_bad_file));
foreach ($bad_content_array as $bad_content) {
$bad_content = strtolower($bad_content);
if (strpos(strtolower($check_content), $bad_content) !== false) {
die('THERE WAS A BAD ERROR');
}}
}






require 'inc/PHPMailer/PHPMailerAutoload.php';



// PHPmailer settings
$mail = new PHPMailer();  // create a new object
$mail->Issmtp(); // enable SMTP
$mail->SMTPDebug = false;
$mail->do_debug = 0;
$mail->SMTPAuth = true;  // authentication enabled
$mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for GMail
$mail->Host = 'smtp.gmail.com';
$mail->Port = 465; 
$mail->Username = "email@website.com"; // SMTP username
$mail->Password = "password"; // SMTP password
$mail->FromName = "$name"; 
$mail->SetFrom = "email@website.com";
$mail->addReplyTo('$email');
$mail->AddAddress('email@website.com');
$mail->Priority = 1;
$mail->WordWrap = 50;   // set word wrap
$mail->IsHTML(true);   // send as HTML
$mail->Subject  =  "Solid Insurance | Business Quote";	
$mail->AltBody  =  "This is the text-only body";



 // defines how message looks in email
$mail->Body="
<html>
<head>
</head>
<body>
<center>

<span style='color:red;'>Lets not keep him waiting!</span>
<div style='width:750px;text-align:center;'>



<span style='font-size:px;'><b>Personal Info</b><br></span>
<br>
<span style='font-size:px;'>---------------<br></span>
<br>
<span style='font-size:px;'><span style='font-size:px;color:red;'>input1: </span>$fname, $lname<br></span>
<br>
<span style='font-size:px;'><span style='font-size:px;color:red;'>input2:/span> $phone<br></span>
<br>
<span style='font-size:px;'><span style='font-size:px;color:red;'>input3:</span> $email<br></span>
</div>
<br>
<span style='font-size:px;'><span style='font-size:px;color:red;'>input4:</span> $busname<br></span>
<br>
<span style='font-size:px;'><span style='font-size:px;color:red;'>input5:*</span> $bustype<br></span>
<br>









</div>
</center>
</body>
</html> 


";




// looks good in your inbox
$mail->FromName = "$name"; 
$mail->AddReplyTo("$email","$name");
$mail->SetFrom('$email', '$name');



//send the message, check for errors
if (!$mail->send()) {
    echo "Mailer Error:" . $mail->ErrorInfo;
} else {
  echo '<meta http-equiv="refresh" content="10;url=http://www.website.com/index.php">';
}}



?>