Пол здесь. У меня есть 2 формы:
простой ввод «Подписаться на новости» для электронной почты и кнопка.
форма «Контакты» с именем, электронной почтой, сообщением. У меня также есть флажок, чтобы разрешить подписку на новости из этой формы.
Вы можете увидеть их здесь, на странице под названием test: http://butterflyepidemic.com/test/.
Я не уверен, как настроить логику для флажка, чтобы обе формы вели себя сами. Если подписчик использует форму регистрации, а затем хочет отправить нам сообщение, контактная форма просто не позволит ему продолжить:
«этот адрес электронной почты уже зарегистрирован»
. В идеале я думаю, что мы должны просто принять сообщение независимо от предыдущей регистрации или состояния флажка. В отзывах всегда будет что-то положительное:
'Ваше сообщение получено'
or
'Ваше сообщение получено. Ваша электронная почта уже зарегистрирована здесь'
, если бы не два положительных сообщения:
"ваше сообщение получено и вы подписаны"
Я новичок в адаптивных формах. Первоначально я основывал свою разработку на этом руководстве:
http://net.tutsplus.com/tutorials/javascript-ajax/building-a-sleek-ajax-signup-form/
который использует JS, jQuery, PHP, MySQL, JSON. Но теперь у меня есть 2-й класс с большим количеством вещей. Мне удалось заставить обе формы успешно проверять обе таблицы для обоих полей, но теперь логика обратной связи неверна. (изменить: я имею в виду PHP для контактной формы)
HTML для формы регистрации:
<form id="newsletter-signup" action="?action=signup" method="post">
<label for="signup-email">Sign up for news & events:</label>
<input type="email" name="signup-email" id="signup-email" placeholder="Your email here..."></input>
<input type="submit" name="signup-button" id="signup-button" value="Sign Me Up!"></input>
<p id="signup-response"></p>
</form>
и HTML для контактной формы:
<form id="contact-form" action="?action=contact" method="post">
<legend>Contact us:</legend>
<label for="email">Your email: *</label>
<input type="email" name="contact-email" id="contact-email" placeholder="Your email here..." required></input>
<label for="name">Your Name: *</label>
<input type="name" name="contact-name" id="contact-name" placeholder="Your name here..." required></input>
<label for="message">Your Message: *</label>
<textarea id="contact-textarea" name="contact-textarea" placeholder="Type your message here..." rows = "8" cols = "35" required></textarea>
<label for="checkbox">Subscribe to Newsletter?</label>
<input type="checkbox" name="contact-checkbox" id="contact-checkbox" value="1"></input>
<p id="contact-response"></p>
<input type="submit" name="contact-button" id="contact-button"></input>
</form>
Вот PHP для формы регистрации:
<?php
//form 1 - signup
//email signup ajax call
if(isset($_GET['action'])&& $_GET['action'] == 'signup'){
mysql_connect('***','***','***');
mysql_select_db('***');
//sanitize data
$email = mysql_real_escape_string($_POST['signup-email']);
//validate email address - check if input was empty
if(empty($email)){
$status = 'error';
$message = 'You did not enter an email address!';
}
else if(!preg_match('/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/', $email)){ //validate email address - check if is a valid email address
$status = 'error';
$message = 'You have entered an invalid email address!';
}
else {
$existingSignup = mysql_query("SELECT * FROM `signups`, `contact` WHERE signup_email_address='$email' OR contact_email_address='$email'");
if(mysql_num_rows($existingSignup) < 1){
$date = date('Y-m-d');
$time = date('H:i:s');
$insertSignup = mysql_query("INSERT INTO signups (signup_email_address, signup_date, signup_time) VALUES ('$email','$date','$time')");
if($insertSignup){
$status = 'success';
$message = 'you have been signed up!';
}
else {
$status = 'error';
$message = "Oops, there's been a technical error! You have not been signed up.";
}
}
else {
$status = 'error';
$message = 'This email address has already been registered!';
}
}
//return JSON response
$data = array(
'status' => $status,
'message' => $message
);
echo json_encode($data);
exit;
}
и PHP для контактной формы:
/*Contact Form*/
//ajax call
if(isset($_GET['action'])&& $_GET['action'] == 'contact'){
mysql_connect('***','***','***');
mysql_select_db('***');
//sanitize data
$email = mysql_real_escape_string($_POST['contact-email']);
//validate email address - check if input was empty
if(empty($email)){
$status = 'error';
$message = 'You did not enter an email address!';
}
else if(!preg_match('/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/', $email)){ //validate email address - check if is a valid email address
$status = "error";
$message = "You have entered an invalid email address!";
}
else {
$existingContact = mysql_query("SELECT * FROM `signups`, `contact` WHERE signup_email_address='$email' OR contact_email_address='$email'");
if(mysql_num_rows($existingContact) < 1){
//mysql_free_result($existingContact);
//database insert code
if ( isset($_POST['contact-checkbox']) ) {
$checkbox = $_POST['contact-checkbox'];
}
else {
$checkbox = 0;
}
$message = $_POST['contact-textarea'];
$name = $_POST['contact-name'];
$date = date('Y-m-d');
$time = date('H:i:s');
$insertContact = mysql_query("INSERT INTO contact (contact_email_address, contact_date, contact_time, contact_name, contact_message, contact_checkbox) VALUES ('$email','$date','$time','$name','$message','$checkbox')");
if($insertContact){
$status = 'success';
$message = 'your message has been received';
}
else if ($insertContact && $checkbox = $_POST['contact-checkbox']){
$status = 'success';
$message = "your message has been received and you have been signed up";
}
else {
$status = 'error';
$message = "Oops, there's been a technical error!";
}
}
else {
$status = 'error';
$message = 'This email address has already been registered!';
}
}
//return the JSON response
$data = array(
'status' => $status,
'message' => $message
);
echo json_encode($data);
exit;
}
?>
JS для формы регистрации:
$(document).ready(function(){
$('#newsletter-signup').submit(function(){
//check the form is not currently submitting
if($(this).data('formsstatus') !== 'submitting'){
//setup variables
var form = $(this),
formData = form.serialize(),
formUrl = form.attr('action'),
formMethod = form.attr('method'),
responseMsg = $('#signup-response');
//add status data to form
form.data('formsstatus','submitting');
//show response message - waiting
responseMsg.hide()
.addClass('response-waiting')
.text('Please Wait...')
.fadeIn(200);
//send data to server to be validated
$.ajax({
url: formUrl,
type: formMethod,
data: formData,
success:function(data){
//setup variables
var responseData = jQuery.parseJSON(data),
klass = '';
//response conditional
switch(responseData.status){
case 'error':
klass = 'response-error';
break;
case 'success':
klass = 'response-success';
break;
}
//show reponse message
responseMsg.fadeOut(200,function(){
$(this).removeClass('response-waiting')
.addClass(klass)
.text(responseData.message)
.fadeIn(200,function(){
//set timeout to hide response message
setTimeout(function(){
responseMsg.fadeOut(200,function(){
$(this).removeClass(klass);
form.data('formsstatus','idle');
});
},3000)
});
});
}
});
}
//prevent form from submitting
return false;
});
})
и, наконец, JS для формы «контакт» (почти такой же, как для «регистрации»):
$(document).ready(function(){
$('#contact-form').submit(function(){
//check the form is not currently submitting
if($(this).data('formsstatus') !== 'submitting'){
//setup variables
var form = $(this),
formData = form.serialize(),
formUrl = form.attr('action'),
formMethod = form.attr('method'),
responseMsg = $('#contact-response');
//add status data to form
form.data('formsstatus','submitting');
//show response message - waiting
responseMsg.hide()
.addClass('response-waiting')
.text('Please Wait...')
.fadeIn(200);
//send data to server
$.ajax({
url: formUrl,
type: formMethod,
data: formData,
success:function(data){
//setup variables
var responseData = jQuery.parseJSON(data),
klass = '';
//response conditional
switch(responseData.status){
case 'error':
klass = 'response-error';
break;
case 'success':
klass = 'response-success';
break;
}
//show reponse message
responseMsg.fadeOut(200,function(){
$(this).removeClass('response-waiting')
.addClass(klass)
.text(responseData.message)
.fadeIn(200,function(){
//set timeout to hide response message
setTimeout(function(){
responseMsg.fadeOut(200,function(){
$(this).removeClass(klass);
form.data('formsstatus','idle');
});
},3000)
});
});
}
});
}
//prevent form from submitting
return false;
});
})
Вот и все для кода. Я хотел бы узнать, как я могу настроить логику, чтобы дать соответствующую обратную связь, как в идеальных примерах выше кода, пожалуйста. Я буду рад любым ключевым словам/ссылкам/примерам того, что мне может понадобиться для исследования. Спасибо, Пол.
