Анимация формы электронной почты PHP
0
Я пытаюсь создать форму электронной почты, которая скользит вверху внизу страницы, когда вы нажимаете на определенную кнопку. Если вы нажмете ее снова, она просто скатится вниз, но у меня возникают проблемы. Когда вы нажимаете "Отправить", она не проверяет, как он должен и также перезагружает страницу более одного раза, Heres the page: http://harryfelton.host56.com
Я уверен, что я что-то испортил в php. Вот весь индексный файл:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/primary.css"> <!--Address Using URL to prevent no styling when slash is typed-->
<link rel="shortcut icon" href="Images/tabIcon.ico">
<title>Harry Felton | Welcome</title>
</head>
<script>
function toggleAbout(){
if ($("#center").hasClass("up")) {
$("#about").slideToggle(500);
setTimeout(function() {
$("#center").css({
transform: 'translateY(10px)',
})
}, 500);
} else {
$("#center").css({
transform: 'translateY(-75px)',
})
setTimeout(function() {
$("#about").slideToggle(500);
}, 1000);
}
$($("#center").toggleClass("up"))
};
function toggleContact(){
$("#contactForm").toggleClass("hardHide");
$("#contactForm").toggleClass("hidden");
}
</script>
<body style="display:none;" class="pg-index">
<div class="overwrap">
<div id="centerNoY">
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a onclick="loadPage('portfolio', 'body');"><span>Portfolio</span><img src="Images/arrow.png"></a>
<ul>
<li class='has-sub'><a onclick="loadPage('programs', 'body');"><span>Programs</span></a>
<ul>
<li><a onclick="loadPage('SecuritySP', 'body');" ><span>HbombOS Security Suite</span></a></li>
<!--<li class='last'><a href='#'><span>Sub Product</span></a></li>-->
</ul>
</li>
<li class='has-sub'><a onclick="loadPage('projects', 'body');"><span>Projects</span></a>
<ul>
<li><a onclick="loadPage('HbombOS', 'body');"><span>HbombOS</span></a></li>
<li class='last'><a onclick="loadPage('IA', 'body');"><span>Industrial Advance</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a onclick="toggleAbout();"><span>About</span></a></li>
<li class='last'><a onclick="toggleContact();"><span>Contact</span></a></li>
</ul>
</div>
</div>
<div id="center">
<h1 id="title1">Welcome</h1>
<h2 id="title2">Harry Felton</h2>
<h2 id="subTitle">Auckland | New Zealand</h2>
<br><br><br><br>
<div id="about" style="display: none;">
<p>Hi, My name is Harry and I am an amateur programmer, I just do it as a hobby until I can actually take it as a course, I have created many programs, and love doing it, I am also into ComputerCraft which is a mod for Minecraft that adds programmable computers.<br><br>This website domain was initially created around September 2014, It took about a week to create, It was awesome, As it was the first time I had ever used HTML, CSS or JavaScript. On the 20th November I chose to completely recreate the website, So I deleted all files, And now... Here we are.<br><br>My absolute favorite thing to do in this world is code, I enjoy making, distributing and using my programs, And the feedback is always awesome, If you feel like leaving feedback, then click HERE</p>
</div>
</div>
<div id="contactForm" class="hidden hardHide">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<title>Contact Us</title>
<div id="mainPageCont">
<?php error_reporting(0); ?>
<?php if(isset($_POST['Email'])): ?>
<?php
// This is where you process the email and display the thank you page
$to = '[email protected]';
$subject = 'ALERT! Website Form Submission';
$message = 'Users Name: '.strip_tags($_POST['Name'])."\n";
$message .= 'Users Email: '.strip_tags($_POST['Email'])."\n";
$message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."\n";
$message .= 'Message Type: ';
$message .= ($_POST['Type'] !== 'Other')? $_POST['Type']."\n": strip_tags($_POST['option'])."\n";
$headers = 'From: [email protected]' . "\r\n" .
'Reply-To: '.strip_tags($_POST['Email']) . "\r\n";
// If the mail is successful, display thanks else display failed
?>
<?php if(mail($to, $subject, $message, $headers)): ?>
<?php
$replyTo = strip_tags($_POST['Email']);
$replySubject = 'Thank You For Leaving A Comment ';
$replySubject .= strip_tags($_POST['Name']);
$replyMess = 'Thanks for leaving a message on www.harryfelton.host56.com' . "\n\n";
$replyMess .= 'If you didnt use the email of: '.strip_tags($_POST['Email']) . ' then please contact us by replying to this email' ."\n\n";
$replyMess .= 'Although if you did then you can expect a reply to your comment in two working days if the comment requires a reply' ."\n";
$replyHeaders = 'From: [email protected]' . "\r\n" .
'Reply-To: ' . '[email protected]' . "\r\n";
mail($replyTo, $replySubject, $replyMess, $replyHeaders);
?>
<div id="comments_form">
<!--Message Sent! Slide Email Up! -->
<?php else: ?>
<div id="comments_form">
<!--There was an error, let then know that it couldnt be sent-->
<script>alert("Your message can not be sent at this time, Please try again later and ensure your internet connection is active");</script>
<?php endif ?>
</div>
<?php else: ?>
<form method="post" id="comments_form">
<h2>Please Leave Some Feedback, It Helps!</h2>
<div class="row">
<div class="label">
Your Name
</div>
<!--.label end-->
<div class="input">
<input type="text" id="fullname" class="detail" name="Name"
value="<?php echo isset($_POST['Name'])? $_POST['Name'] : ''; ?>" />
<?php if(in_array('Name', $validation)): ?>
<span class="error"><?php echo $error_messages['Name']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
e.g. John Smith or Jane Doe
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Email
</div>
<!--.label end-->
<div class="input">
<input type="text" id="email" class="detail" name="Email" value="<?php echo isset($_POST['Email'])? $_POST['Email'] : ''; ?>" />
<?php if(in_array('Email', $validation)): ?>
<span class="error"><?php echo $error_messages['Email']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
We wont spam you! We only need this to reply to questions you might pose
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Type Of Message
</div>
<!--.label end-->
<div class="input">
<input type="radio" name="Type" onChange="GetValue(this)" value="Feedback" checked="checked" />
Feedback <br />
<input type="radio" name="Type" onChange="GetValue(this)" value="Feature Request" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Feature Request')? 'checked="checked"' : ''; ?> />
Feature Request<br>
<input type="radio" name="Type" onChange="GetValue(this)" value="Bug Report" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Bug Report')? 'checked="checked"' : ''; ?> />
Bug Report<br>
<input type="radio" name="Type" onChange="GetValue(this)" value="Other" id="other" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Other')? 'checked="checked"' : ''; ?> />
Other<br />
<input type="text" style="display:none;" id="option" name="option" <?php echo (isset($_POST['option']))? $_POST['option']: ''; ?> />
<?php if(in_array('Type', $validation)): ?>
<span class="error"> <?php echo $error_messages['Type']; ?> </span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
This is to help us better respond to your message
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Message
</div>
<!--.label end-->
<div class="input2">
<textarea id="Comment" name="Comment" class="mess"><?php echo isset($_POST['Comment'])? $_POST['Comment'] : ''; ?></textarea>
<?php if(in_array('Comment', $validation)): ?>
<span class="error"><?php echo $error_messages['Comment']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
</div>
<!--.row end-->
<div class="submit">
<input type="submit" id="submit" name="Submit" value="Send Message" />
</div>
</form>
<?php endif; ?>
<script>
// This function just checks if the 'other' gets checked
function GetValue(ThisVal) {
var Writing = $(ThisVal).val();
// This just shows you what is happening via the feedback div
$('#feederback').html(Writing);
if (Writing == 'Other') {
// If other, disable the submit
$("#submit").prop("disabled", true);
// Fade in the message textarea
$('#option').fadeIn('fast');
// Check the message area to see if there is text in it already.
// If there is text enable the submit button
CheckVal();
} else {
// If not other, fade out the message
$('#option').fadeOut('fast');
// Enable the submit button
$('#submit').prop("disabled", false);
}
}
function CheckVal() {
var SetMess = $('#option').val();
$('#feedback').html(SetMess);
if (SetMess !== '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
}
// As one types, check that the message is not empty
$('#option').keyup(function () {
CheckVal();
});
// As one clicks into the field, see if it has content
$('#option').click(function () {
CheckVal();
});
$(document).ready(function() {
// validate form
$("#comments_form").validate({
// This will allow you to extend the validator functions
invalidHandler:
function(form, validator) {
// $("#get_online").val("CHECK");
},
rules: {
// For every named input that you want to validate,
// you create a little set of prefs
Name: {
required: true,
},
Email: {
required: true,
email: true
},
Type: { required: true },
Comment: { required: true },
},
messages: {
// Here are just the custom messages you can modify per field
Name: {
required: 'Please Enter Your Name',
},
Email: {
required: 'Please Enter An Email',
email: 'Email address not valid',
},
Type: { required: 'Please Select A Type' },
Comment: { required: 'Please Enter A Message'},
},
});
});
</script>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="JavaScript/element.js"></script>
<script type="text/javascript" src="JavaScript/pageNav.js"></script>
<script>
$(document).ready(function() {
fadeIn("body");
});
</script>
<script>changeWelcome("#title1");</script>
</body>
</html>
Вот файл CSS, который влияет на эту проблему:
p {
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
}
.pg-index #center {
transition: 1s transform;
position: absolute;
top: 25%;
width: 100%;
}
a.url{
text-decoration: underline;
color: #0FF;
cursor:pointer;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 20px;
}
a.url:hover {
color: #FFFFFF;
}
body, html{
background-color: #09F; /*Light Blue Color */
font-color: #FFF;
color: #FFF;
padding: 0;
margin: 0;
font-family: 'Nunito', sans-serif;
}
/*Dynamic Page Elements*/
#contactForm.hidden{
top: 100%;
margin-top: 20px;
opacity: 0;
}
#contactForm.hardHide{
display: none;
}
#contactForm {
position:absolute;
margin: 0 auto;
text-align: center;
border: medium solid #930;
z-index: 100;
}
#center {
text-align: center;
}
EDIT: я скорректировал код, он предотвращает перезагрузку. Хотя форма по-прежнему не позволяет проверять данные, она должна сказать мне, что мне нужно ввести ее...
Если у кого-то из вас есть предложения или еще что-то еще, исправьте, пожалуйста, дайте мне знать, спасибо.
1 ответ
0
Я знаю, что это не ответ, а только что-то, что я заметил, играя с вашим кодом. В разделе после спасибо за ваше сообщение.
function redirectPage() {
location.href="index.html"
};
У вас нет index.html на этой странице.
Daniel Peel
Поделиться
-
0Аааа, да, спасибо, я заметил, что вскоре после того, как я разместил вопрос, спасибо, хотя :)Harry
Ещё вопросы
- 0горячий, чтобы получить значение радио кнопки в группе
- 0AngularJS: вложенные директивы - передача данных не работает
- 1Как удалить файл, используя его путь на Android 7?
- 1PDFBox символов плохие символы в разговоре PDF в строку
- 1Как использовать модуль Python Mobilenium с селеном
- 0Проверка формы Zend2 с помощью плагина проверки формы jQuery
- 1Сбой Android Lint для скриптов Gradle на основе Kotlin
- 0Как можно эмулировать нажатие клавиатуры или мыши?
- 0развернуть и свернуть Просмотр функциональности в Angularjs
- 1Остановить RegEx каждый раз, когда находит определенную строку
- 1преобразовать гггг-дд-мм в гггг-мм-дд в Python
- 0эхо UPLOADPATH. $ row ['image'] не отображает имя файла
- 1Динамический запрос crm rest builder для отношения многих ко многим
- 0Как мне найти префикс в таблице MySQL?
- 1Telegram Bot Clickable Команда с параметрами
- 1Объект является нулевым, так как второй вызов метода
- 0В mysql Как узнать количество воскресений за месяц
- 1Как сделать SSH с одного компьютера на другой, используя Java
- 1Поиск большого массива по двум столбцам
- 1Не разрешать отправку формы Google в определенное время
- 0Сортировка массива структур
- 0угловой, как передать объект от контроллера к сервису
- 0нет пейджера с использованием ngtable и angularjs
- 0Цвет чередующихся строк для каждого нового элемента dom, добавленного в angularjs
- 0Вызов функции в операторе switch.
- 1запросы при загрузке веб-сайтов очень медленные
- 1Сбой экземпляра Python (obj, tpyes.GeneratorType)
- 0Транспортир возвращает объект вместо значения при обходе с использованием xpath в таблице
- 0Не удается заставить PHP password_hash api работать [дубликаты]
- 1Возврат значения переменной и вывод из блока кода PL / SQL в C #
- 0JavaScript не работает в WebView, загруженном из ресурса
- 1Bluetooth печать в C # Windows Mobile
- 0Прекращение загрузки файла Symfony2 с сервера Apache
- 0Угловой / Javascript поисковый массив для ключа объекта
- 1Проблемы с предсказанием движения снаряда по методу Эйлера
- 0Ошибка MySQL: 1251 не может добавить внешний ключ
- 1переадресация sshagent в jenkins не работает
- 0В PHP Crawler отсутствуют хиты и пустые хиты
- 0построить строку из регулярного выражения и результатов (обратное соответствие)
- 0Как сделать вставку PHP с использованием ключевого слова SQL «Default» для автоматического увеличения первичного ключа
- 0Частицы AngularJS в Jade с использованием логических атрибутов
- 0Как проверить данные эластичного поиска с данными sql после перехода с sql на эластичный поиск
- 1Высокая производительность в многозадачности внутри Tomcat
- 1Не удалось загрузить ресурс при загрузке изображения
- 1Кратчайший путь от города 0 до N (автомобильным / воздушным смешанным тарифом)
- 0Сбой команды «python setup.py egg_info» с кодом ошибки 1 в / tmp / pip-build-hg0dbjgz / mysqlclient /
- 0ClassNotFoundException Java JApplet
- 0Как сгруппировать данные из отношения 1-многие в одном запросе с использованием MySQL?
- 0Бесконечная петля записи строки
- 0PHP - сохранение сессии в запросе каждый раз, когда пользователь загружает запрос
