Я уже писал в разделе ajax на этой самой плате, и мне посоветовали обратиться за помощью к некоторым php-гуру.
Основная проблема, с которой я столкнулся, заключается в том, что я не могу управлять переменными, заданными в контактной форме, и успешно отправлены мне по электронной почте. Поэтому в самом файле php должна быть ошибка, хотя это просто очень простой тестовый файл.
Важная часть моего JS выглядит так:
$("#submitQuote").live('click',function(){
var shirt_style = "shirt_style="+$(".dropdown[title=shirt_style] .dropdownValue").text();
var shirt_type = "&shirt_type="+$(".dropdown[title=shirt_type] .dropdownValue").text();
var cuffs = "&cuffs="+$(".dropdown[title=cuffs] .dropdownValue").text();
var chestpoket = "&chestpoket="+$(".dropdown[title=chestpoket] .dropdownValue").text();
var collar = "&collar="+$(".dropdown[title=collar] .dropdownValue").text();
var collar_buttons = "&collar_buttons="+$(".dropdown[title=collar_buttons] .dropdownValue").text();
var fastening = "&fastening="+$(".dropdown[title=fastening] .dropdownValue").text();
var cut = "&cut="+escape($(".dropdown[title=cut] .dropdownValue").text());
var Name = "&Name="+escape($("input[name=Name]").val());
var Email = "&Email="+escape($("input[name=Email]").val());
var Phonenumber = "&Phonenumber="+escape($("input[name=Phonenumber]").val());
var Address = "&Address="+escape($("input[name=Address]").val());
var Zipcode = "&Zipcode="+escape($("input[name=Zipcode]").val());
var City_country = "&City_country="+escape($("input[name=City_country]").val());
var Copy = "&Copy="+$(".checkbox[title=Copy]").hasClass("checkboxChecked");
var form_values1 = shirt_style+shirt_type+cuffs+chestpoket+collar+collar_buttons+fastening+cut;
var form_values2 = form_values1+Name+Email+Phonenumber+Address+Zipcode+City_country+Copy;
$.ajax({
type: "POST",
url: "http://www. .com/ajax/quote.php",
data: form_values2,
success: function() {
$('html,body').animate({scrollTop:290},1000);
$("#quoteStepContainer").html('');
$("#quoteStepContainer").html('<img src="http://www. ...com/img/sent.jpg" width="625" height="160" alt="Thanks" id="thanksImage" />');
$("#thanksImage").fadeIn(1000);
$("#quoteStepContainer").delay(1000).animate({"height": "190px"},1500);
}
});
return false;
});
импортируемая часть HTML выглядит следующим образом:
<form name="quoteForm" method="post" action="#">
<div id="quoteStep1" class="quoteStep">
<label>Shirt style</label>
<div class="dropdown" title="shirt_style"></div>
<label>Shirt type</label>
<div class="dropdown" title="shirt_type"></div>
<label>Collar</label>
<div class="dropdown" title="collar"></div>
<label>Collar Buttons</label>
<div class="dropdown" title="collar_buttons"></div>
<label>Cuffs</label>
<div class="dropdown" title="cuffs"></div>
<label>Chestpoket</label>
<div class="dropdown" title="chestpoket"></div>
<label>Fastening</label>
<div class="dropdown" title="fastening"></div>
<label>Cut</label>
<div class="dropdown" title="cut"></div>
<a href="#" title="To Step 2" class="nextStep"></a>
</div>
<div id="quoteStep2" class="quoteStep">
<p class="stepText">Phew, the last step!</p>
<label>Your name</label>
<input type="text" name="Name" class="required" />
<label>E-mail</label>
<input type="text" name="Email" />
<label>Phone number</label>
<input type="text" name="Phonenumber" />
<label>Address</label>
<input type="text" name="Address" />
<label>Zip-code</label>
<input type="text" name="Zipcode" />
<label>City & Country</label>
<input type="text" name="City_country" />
<label>Want a copy of the form?</label>
<div class="checkbox" title="Copy"></div>
<a href="#" title="To Step 1" class="prevStep"></a>
<a href="#" title="Submit your inquiry" id="submitQuote"></a>
</div>
</form>
элементы управления вводом определены для другого js:
jQuery.fn.dropmenu = function (options,width) {
var title = jQuery(this).attr('title');
jQuery(this).css('width',width);
jQuery(this).append('<div class="dropdownValue" title="'+title+'">'+options[0]+'</div>');
jQuery(this).append('<ul class="dropdownList" title="'+title+'">');
for(i=0; i<options.length; i++) {
jQuery(this).parent().find('.dropdownList[title='+title+']').append('<li>'+options[i]+'</li>');
}
jQuery(this).parent().find('.dropdownList').hide();
jQuery(this).parent().find('.dropdownList').css('width',width);
jQuery(this).find('.dropdownList li:first').addClass('first');
jQuery(this).find('.dropdownList li:last').addClass('last');
jQuery('.dropdownValue').toggle(function(){
jQuery(this).parent().find('.dropdownList[title='+title+']').animate({"height": "toggle", "opacity": "toggle"}, 200);
jQuery(this).addClass("dropdownValueClicked");
jQuery('.dropdownList').not('.dropdownList[title='+title+']').hide();
}, function() {
jQuery(this).parent().find('.dropdownList[title='+title+']').animate({"height": "toggle", "opacity": "toggle"}, 200);
jQuery(this).removeClass("dropdownValueClicked");
jQuery('.dropdownList').not('.dropdownList[title='+title+']').hide();
});
jQuery('.dropdownList li').live('mouseenter',function() {
jQuery(this).stop().addClass("hover");
}).live('mouseleave', function() {
jQuery(this).stop().removeClass("hover");
});
jQuery('.dropdownList[title='+title+'] li').live('mousedown',function(){
jQuery('.dropdownValue').removeClass("dropdownValueClicked");
var value = jQuery(this).html();
jQuery(this).parent().animate({"height": "toggle", "opacity": "toggle"}, 200);
jQuery(this).parent().parent().find('.dropdownValue[title='+title+']').html(value);
});
}
и тестовый php, который не работает, выглядит следующим образом:
<?php
$mail = $_POST['Email'];
$name = $_POST['Name'];
$to = "email@mydomain.com";
$message =" You received a mail from ".$mail;
$message .=" His name is : ".$name;
if(mail($to,$mail,$message)){
echo "mail successful send";
}
else{
echo "there's some errors to send the mail, verify your server options";
}
?>
Большое спасибо за все ваше время и усилия.
Aaron