Question

IM пытается заставить div флиппера действовать как кнопка отправки.
Если щелкнуть мышью, произойдет переворот (со стилем, не относящимся к сценарию), чтобы поблагодарить вас, отправьте форму, подождите 5 секунд и вернитесь на страницу индекса.Я разместил сценарий оповещения, чтобы проверить, запускается ли сценарий при нажатии, но когда я заменяю оповещение на

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

, оно не действует как кнопка отправки над ним.Я мог бы разместить скрипт почтовой программы на отдельной странице и использовать

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

, но у меня сложилось впечатление, что это менее безопасно: пользователь может разместить форму на своем веб-сайте и просто ссылаться на свой почтовый скрипт таким образом.,Но я вроде как новичок в этом, так что я не знаю, что это просто кажется логичным ..

Так почему же мой щелчок не работает, как кнопка отправки, он должен получить идентификатор формы и отправить. Перезагрузить страницу см. Этот постisset и запустить почтовый скрипт правильно?

@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">';
}}



?>

Сделать div, чтобы действовать как кнопка отправки формы

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 0 ]

Сделать div, чтобы действовать как кнопка отправки формы

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 0 ]

Похожие темы