Несколько контактных форм на одной странице jQuery
У меня есть контактная форма с TMForm.js и MailHandler.php, которая работает хорошо.
Теперь я хочу добавить другую контактную форму на той же HTML-странице, и я хочу указать вторую форму в электронном письме, которое я получу от представления.
Проблема в том, что работает только первая форма. Как я могу решить проблему?
Это мой код:
HTML:
<form id="contact-form" method="post" action="bat/MailHandler.php">
<div class="success_wrapper">
<div class="success-message">Il messaggio è stato inviato
con successo. Sarai contattato al più presto.</div>
</div>
<label class="name"> <input placeholder="Nome*:" data-constraints="@Required @JustLetters"
type="text"> <span class="empty-message">*Questo campo è
obbligatorio.</span> <span class="error-message">*Nome
non valido. Inserisci un nome valido.</span> </label>
<label class="email"> <input placeholder="E-mail*:" data-constraints="@Required @Email"
type="text"> <span class="empty-message">*Questo campo è
obbligatorio.</span> <span class="error-message">*E-mail
non valido. Inserisci un e-mail valido.</span> </label> <label
class="phone"> <input placeholder="Telefono:" data-constraints="@Required @JustNumbers"
type="text"> <span class="empty-message">*Questo campo è
obbligatorio.</span> <span class="error-message">*Numero
di telefono non valido. Inserisci un numero valido</span>
</label> <label class="message"> <textarea placeholder="Messaggio*:"
data-constraints="@Required @Length(min=20,max=999999)" style="height: 72px"></textarea>
<span class="empty-message">*Questo campo è obbligatorio.</span>
<span class="error-message">*Il messaggio è troppo corto.</span>
</label>
<div>
<div class="btn"> <a class="def-btn btn1" href="#" data-type="submit">INVIA
RICHIESTA</a>
<p class="fields">*Campi
obbligatori</p>
</div>
</div>
</form>
Это TMform.js:
//TMForm
(function($){
$.fn.TMForm=function(opt){
return this.each(TMForm)
function TMForm(){
var form=$(this)
opt=$.extend({
okClass:'ok'
,emptyClass:'empty'
,invalidClass:'invalid'
,successClass:'success'
,onceVerifiedClass:'once-verified'
,mailHandlerURL:'bat/MailHandler.php'
,successShowDelay:'20000'
,stripHTML:true
},opt)
init()
function init(){
form
.on('submit',formSubmit)
.on('reset',formReset)
.on('focus','[data-constraints]',function(){
$(this).parents('label').removeClass(opt.emptyClass)
})
.on('blur','[data-constraints]:not(.once-verified)',function(){
$(this)
.addClass(opt.onceVerifiedClass)
.trigger('validate.form')
})
.on('keyup','[data-constraints].once-verified',function(){
$(this).trigger('validate.form')
})
if($('[data-constraints]',form).length!==0)
$('[data-constraints]',form)
.regula('bind')
.on('show.placeholder',function(){
fieldDesolation($(this))
})
.on('validate.form',fieldValidate)$('[placeholder]',form).TMPlaceholder()
$('[data-type=submit]',form)
.click(function(){
form.trigger('submit')
return false
})
$('[data-type=reset]',form)
.click(function(){
form.trigger('reset')
return false
})
}
function fieldValidate(el){
var el=$(this)
,result=el.regula('validate')
,isEmpty=false
,isInvalid=false
,isRequired=!!~el.data('constraints').indexOf('@Required')
$.each(result,function(){
if(this.constraintName==='Required')
isEmpty=true
else
isInvalid=true
})
if(!el.hasClass(opt.onceVerifiedClass)&&!isEmpty)
el.addClass(opt.onceVerifiedClass)
if(isEmpty)
el.parents('label').addClass(opt.emptyClass)
if(isInvalid&&!isEmpty&&isRequired)
el.parents('label')
.removeClass(opt.emptyClass)
.removeClass(opt.okClass)
.addClass(opt.invalidClass)
if(isInvalid&&!isRequired&&el.val())
el.parents('label')
.removeClass(opt.emptyClass)
.removeClass(opt.okClass)
.addClass(opt.invalidClass)
if(!result.length)
el.parents('label')
.removeClass(opt.invalidClass)
.removeClass(opt.emptyClass)
.addClass(opt.okClass)
}
function fieldDesolation(el){
el
.removeClass(opt.onceVerifiedClass)
.parents('label')
.removeClass(opt.invalidClass)
.removeClass(opt.emptyClass)
.removeClass(opt.okClass)
}
function getValue(el){
return el.val()||false
}
function formSubmit(){
$('[data-constraints]',form).trigger('validate.form')
if(!$('label.'+opt.invalidClass+',label.'+opt.emptyClass,form).length){
$.ajax({
type:"POST",url:opt.mailHandlerURL
,data:{
name:getValue($('label.name input'))
,email:getValue($('label.email input'))
,phone:getValue($('label.phone input'))
,fax:getValue($('label.fax input'))
,state:getValue($('label.state input'))
,message:getValue($('label.message textarea'))
,owner_email:opt.ownerEmail||'[email protected]'
,stripHTML:opt.stripHTML
}
,success: function(e){
form.addClass(opt.successClass)
setTimeout(function(){
form
.removeClass(opt.successClass)
.trigger('reset')
},opt.successShowDelay)
}
})
}
return false
}
function formReset(){
fieldDesolation($('[data-constraints]',form))
}
}
}
})(jQuery)
;(function($){
$.fn.TMPlaceholder=function(opt){
return this.each(function(){
var th=$(this)
,placeholder_text
,placeholder
opt=$.extend({
placeholderClass:'_placeholder'
,placeholderFocusedClass:'focused'
,placeholderHiddenClass:'hidden'
},opt)
init()
function init(){
placeholder_text=th.attr('placeholder')
placeholder=$(document.createElement('span'))
placeholder
.addClass(opt.placeholderClass)
.css({
left:th.prop('offsetLeft')
,top:th.prop('offsetTop')
,width:th.width()
,height:th.outerHeight()
})
.text(placeholder_text)
.appendTo(th.parent())
.click(function(){
th.focus()
return false
})
.on('contextmenu',function(){
th.trigger('hide.placeholder').focus()
})
th
.val('')
.removeAttr('placeholder')
.on('hide.placeholder',function(){
placeholder.addClass(opt.placeholderHiddenClass)
})
.on('show.placeholder',function(){
placeholder.removeClass(opt.placeholderHiddenClass)
})
.on('focus',function(){
placeholder.addClass(opt.placeholderFocusedClass)
})
.on('blur',function(){
var val=th.val()
if(val===''||val===placeholder_text)
th.val('')
,th.trigger('show.placeholder')
placeholder.removeClass(opt.placeholderFocusedClass)
})
.on('keydown',function(e){
if(e.keyCode===32||e.keyCode>46)
th.trigger('hide.placeholder')
})
.on('keyup',function(){
if(th.val()===''){
th.trigger('show.placeholder')
return false
}else{
th.trigger('hide.placeholder')
}
})
.parents('form').on('reset',function(){
th.trigger('show.placeholder')
})
}
})
}
})(jQuery)
//using suggested jQuery practice by passing jQuery into a function
//in order to have $ notation without conflicting with other libraries
//Author: Troy Ingram//HERE WAS SOME VALIDATION CODE THAT I CANCELLED IN THIS PAGE
regula.custom({
name:'JustLetters'
,validator:function(){
return /^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/.test(this.value)
}
})
regula.custom({
name:'JustNumbers'
,validator:function(){
return /^\+?(\d[\d\-\+\(\) ]{5,}\d$)/.test(this.value)
}
})
$(window).load(function(){
$('#contact-form').TMForm({
ownerEmail:'[email protected]'
})})
И это PHP:
<?php
$owner_email = $_POST["owner_email"];
$headers = 'From:' . $_POST["email"] . "\r\n" . 'Reply-To: ' . $email . "\r\n" . 'Content-Type: text/plain; charset=UTF-8' . "\r\n";
$subject = 'NEW MESSAGE ' . $_POST["name"];
$messageBody = "";
if($_POST['name']!='nope'){
$messageBody .= '<p>Nome: ' . $_POST["name"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['email']!='nope'){
$messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}else{
$headers = '';
}
if($_POST['state']!='nope'){
$messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['phone']!='nope'){
$messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['fax']!='nope'){
$messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['message']!='nope'){
$messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";
}
if($_POST["stripHTML"] == 'true'){
$messageBody = strip_tags($messageBody);
}
try{
if(!mail($owner_email, $subject, $messageBody, $headers)){
throw new Exception('mail failed');
}else{
echo 'mail sent';
}
}catch(Exception $e){
echo $e->getMessage() ."\n";
}
?>
Решение
Для отправки Btn формы № 1 -> использовать
name="formFirst"И для подачи Btn формы № 2 -> использовать
name="formSecond"И в проверке PHP кода
if(isset($_POST['formFirst'])){
//Your code for 1st Form submit.
}
else if (isset($_POST['formSecond'])){
//Your code for 2nd
}
Другие решения
С TMForm вам нужно присвоить каждой форме уникальный идентификатор (путем изменения <form id="form"> строка в вашем HTML, чтобы сказать <form id="form1"> для первой формы и <form id="form2"> для вашей второй формы. Затем вы должны указать TMForm, чтобы они искали оба идентификатора.
Для этого перейдите к концу файла TMForm.js и замените его.
$(window).load(function(){
$('#form').TMForm({
ownerEmail:'#'
})
})
с
$(window).load(function(){
$('#form1').TMForm({
ownerEmail:'#'
})
})
$(window).load(function(){
$('#form2').TMForm({
ownerEmail:'#'
})
})
Вы не публиковали какой-либо CSS, но если вы используете шаблон, похожий на тот, который я делал, вы можете столкнуться с проблемами, которые неправильно отображаются на странице. Это потому, что form.css использует #form почти для всего, и вы просто изменили этот идентификатор на две разные вещи.
Самым простым решением, которое я нашел, было найти&-Заменить все экземпляры #form в файле CSS с .tmform
Затем в своем HTML-коде сделайте так, чтобы ваш идентификатор выглядел так:
<form id="form" class="tmform">