Форма кнопки отправить без перенаправления
Давайте начнем с кода
PHP
<?php
$name = $_POST['name'];
$email = $_POST['EMAIL'];
$message = $_POST['Message'];
$subject = $_POST['subject'];
$to = 'email@example.com';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: EMAIL' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{
echo "Invalid Email, please provide an correct email.";
}
?>
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Responsive Bootstrap Landing Page Template">
<meta name="keywords" content="Bootstrap, Landing page, Template, Registration, Landing">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="author" content="Nick McNil">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="fonts/font-awesome.min.css" type="text/css" media="screen">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="css/material.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="navbar navbar-invers menu-wrap">
<div class="navbar-header text-center">
<a class="navbar-brand logo-right" href="javascript:void(0)"><img src="img/neslogo1.png" alt=""></i></a>
</div>
<ul id="navbar" class="nav navbar-nav main-navigation">
<ul id="navbar" class="nav navbar-nav main-navigation">
<li class="active"><a href="index.html"> </a></li>
<li><a href="#why"> </a></li>
<li><a href="past.html"> </a></li>
<li><a href="ceu.html"> </a></li>
<li><a href="arc.html"> </a></li>
<li><a href="current.html"> </a></li>
<li><a href="#contact"> </a></li>
</ul>
<button class="close-button" id="close-button">Close Menu</button>
</div>
<div class="content-wrap">
<header class="hero-area" id="home">
<div class="container">
<div class="col-md-12">
<div class="navbar navbar-inverse sticky-navigation navbar-fixed-top" role="navigation" data-spy="affix" data-offset-top="200">
<div class="container">
<div class="navbar-header">
<a class="logo-left " href="index.html"> </a>
</div>
<div class="navbar-right">
<button class="menu-icon" id="open-button">
<i class="mdi-navigation-menu"></i>
</button>
</div>
</div>
</div>
</div>
</header>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-6 wow fadeInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<h2 class="section-title">Contact Us</h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="info">
<div class="icon">
<i class="mdi-maps-map"></i>
</div>
<h4>Locations</h4>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="info">
<div class="icon">
<i class="mdi-content-mail"></i>
</div>
<h4>Email</h4>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="clear"></div>
<div class="col-md-6 col-sm-6">
<div class="info">
<div class="icon">
<i class="mdi-action-settings-phone"></i>
</div>
<h4></h4>
<p></p>
<p></p>
<h4></h4>
<p></p>
<h4></h4>
<p></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 wow fadeInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<h2 class="section-title">Love to Hear From You</h2>
<!-- Form -->
<form class="contact-form" method="post">
<i class="mdi-action-account-box"></i>
<input type="text" class="form-control" name="name" placeholder="Name">
<i class="mdi-content-mail"></i>
<input type="email" class="form-control" name="EMAIL" placeholder="Email">
<textarea class="form-control" placeholder="Message" rows="4"></textarea>
</form>
<!-- progress button -->
<div id="progress-button" class="progress-button">
<!-- button with text -->
<button><span>Submit</span></button>
<!-- svg circle for progress indication -->
<svg class="progress-circle" width="70" height="70">
<path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/>
</svg>
<!-- checkmark to show on success -->
<svg class="checkmark" width="70" height="70">
<path d="m31.5,46.5l15.3,-23.2"/>
<path d="m31.5,46.5l-8.5,-7.1"/>
</svg>
<!-- cross to show on error -->
<svg class="cross" width="70" height="70">
<path d="m35,35l-9.3,-9.3"/>
<path d="m35,35l9.3,9.3"/>
<path d="m35,35l-9.3,9.3"/>
<path d="m35,35l9.3,-9.3"/>
</svg>
</div>
<!-- /progress-button -->
</div>
</div>
</div>
</section>
<section id="footer">
<div class="container">
<div class="container">
<div id="footerimg" class="col-md-4 col-sm-4 wow fadeInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<img src="nesfoot.jpg" class="img-responsive" alt="">
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Navigation</h3>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="ceu.html">Ceu Courses</a>
</li>
<li><a href="arc.html">Arc Flash Services</a>
</li>
<li><a href="current.html">Current Projects</a>
</li>
</ul>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>About</h3>
<ul>
<li><a href="#">Team</a>
</li>
<li><a href="current.html">Current Projets</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Go to Top Link -->
<a href="#home" class="btn btn-primary back-to-top">
<i class=" mdi-hardware-keyboard-arrow-up"></i>
</a>
</section>
<section id="copyright">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="copyright-text">
Copyright Here
</p>
</div>
</div>
</div>
</section>
</div><script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.mmenu.min.all.js"></script>
<script src="js/count-to.js"></script>
<script src="js/jquery.inview.min.js"></script>
<script src="js/main.js"></script>
<script src="js/classie.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/smooth-on-scroll.js"></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/classie.js"></script>
<script src="js/uiProgressButton.js"></script><script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>
<script>
[].slice.call( document.querySelectorAll( '.progress-button' ) ).forEach( function( bttn, pos ) {
new UIProgressButton( bttn, {
callback : function( instance ) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
if( progress === 1 ) {
instance.stop( pos === 1 || pos === 3 ? -1 : 1 );
clearInterval( interval );
}
}, 150 );
}
} );
} );
</script>
</body>
</html>
Поэтому я недавно создал форму обратной связи для клиента, и вся форма была отправлена по электронной почте через php. Затем клиент решил, что ему нужна анимированная кнопка для подтверждения или отклонения представления. Мне удалось получить кнопку, чтобы продолжить отправлять php письмо. Моя проблема в том, что он не хочет, чтобы страница перенаправляла (в настоящее время она вызывает send.php) страницу php, а просто проверяет и подтверждает отправку анимированной кнопкой. Любое понимание будет оценено.
РЕДАКТИРОВАНИЕ **
Итак, я взглянул на многие предлагаемые изменения и до сих пор не могу понять это. Вот кнопка, которую клиент хочет использовать на сайте http://tympanus.net/Tutorials/CircularProgressButton/. Я следил за изменениями, предложенными всеми до сих пор, и когда я включаю изменения, моя кнопка прекращает работу. Я не могу разместить его в <form></form> теги, потому что он не будет вызывать скрипт и запускать. Мне кажется, что изменения заставляют страницу обновляться. Я изменил предоставленный HTML, чтобы включить всю страницу HTML. Я знаю, что это не чисто; У меня еще есть кое-что сделать.
итоги
клиент хочет, чтобы анимированная кнопка (svg animation) подтверждала (зеленая галочка) или отклоняла (красный X) отправку формы.
Нет перенаправления в файл send.php (но php отправляет ему письмо).
Ник
Решение
Я согласен, что это лучше всего достигается с AJAX. Вам не нужно много делать простой пост:
Добавьте в ваш HTML-файл:
<script type="text/javascript">
$(document).ready(function(){
// listen for the form submission
$('#form1').submit(function(event) {
// disallow browser form submissions
event.preventDefault();
// once submitted, put the form data into a serialized string
var formData = $('#form1').serialize();
$.ajax({
url: "php/send.php", // <-- your existing PHP file
type: 'POST',
data: formData,
success: function (data) {
// this is where you can initialize your animated button and feedback
$('#someElement').html(data); // <-- Your echoed PHP messages will be returned here
}
});
});
});
</script>
Этот пример использует jQuery, так как это самая простая реализация. Вам нужно будет добавить ссылку на библиотеку, если она еще не использовалась в вашем проекте.
Ваш PHP-файл
После того, как вы установили это в своем HTML-файле, вы можете просто настроить соответствующий PHP-файл для принятия данных POST. Это должно работать с сериализованными данными как таковыми:
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// set your variables from the post values
$name = $_POST["name"];
$email = $_POST["EMAIL"];
$message = $_POST["Message"];
// the rest of your php script goes here
}
Кроме того, кнопка отправки не находится внутри тегов формы и неправильно ссылается на форму. Вам нужно будет переместиться внутрь формы или добавить какой-нибудь дополнительный скрипт, чтобы сделать его работоспособным, т.е.
// inside the form
<button type="submit">Submit</button>
// outside the form
<button type="submit" id="sendMessage">Submit</button>
$("#sendMessage").click( function() {
$('#form1').submit();
});
Некоторые другие заметки и рекомендации
- Санируйте ваш пользовательский ввод должным образом
- Проверьте ввод формы с помощью JS / Jquery на стороне клиента и / или PHP
Другие решения
<script>
$(document).ready(function(){
$('#_btn').click(function() {
$('#_err').html(&&);
var e = $("#e").val;
var p = $("#p").val;
if(e == null || e == ''){
$('#_err').html('Email Required');
} else if(p == null || p == ''){
$('#_err').html('Password Required');
} else {
$.ajax({
type: "post",
url: "proccess.php",
data: $("#_form").serialize(),
success: function(response){
if(response == 'Success'){
$('#_err').html('Complete, Thank you!');
} else {
$('#_err').html('Error: '+response);
}
});
}
});
});
</script>
HTML
<form id="_form">
<input id="e" name="e" value="" placeholder="Email">
<input id="p" name="p" value="" placeholder="Password">
</form>
<button id="_btn">Send</button>
<div id="_err"></div>
<?php
$to = 'email@example.com';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: EMAIL' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
if(mail($to, $subject, $message, $headers);){
echo "Success"; // success message
} else {echo 'Connection Error';}
}else{
echo "Invalid Email, please provide an correct email.";
}
?>
Я добавил, чтобы проверить, была ли отправлена почта. Вы должны всегда проверять это также. Также я добавил пример, чтобы убедиться, что поле не пустое. это сэкономит ресурсы сервера. (Вы также должны проверить на сервере, есть способы редактирования на стороне клиента.)