联系人表单-提交按钮不起作用
Contact form - submit button not working
我正在关注这篇内容广泛的文章(有来源),以便在网站上制作联系表格。然而,我需要一个稍微复杂一点的表单,有更多的字段,还有一个单选按钮组。
我只是在process.php和scripts.js文件中添加了我需要的额外字段。在我可能遇到的许多错误中,提交按钮根本不起作用。我点击它,什么也没发生。我是PHP和JS的新手,所以我不知道如何调试和了解问题所在。你能帮我找到它吗?
这是我的代码:
编辑:
这部分实际上不起作用,因为我得到了字符串中的一个空字段。知道吗?这些是非必填字段:
// ASCENSORI CONDOMINIO
if (empty($_POST["ascensoriCondominio"])) {
$ascensoriCondominio = "Valore non specificato";
} else {
$ascensoriCondominio = $_POST["ascensoriCondominio"];
}
// SCALE CONDOMINIO
if (empty($_POST["scaleCondominio"])) {
$scaleCondominio = "Valore non specificato";
} else {
$scaleCondominio = $_POST["scaleCondominio"];
}
// RISCALDAMENTO CONDOMINIO
if (empty($_POST["riscaldamento"])) {
$riscaldamento = "Valore non specificato";
} else {
$riscaldamento = $_POST["riscaldamento"];
}
HTML:
<!----------------------------- FORM CONDOMINI ---------------------------------------->
<form action="php/process.php" role="form" id="condominiForm" data-toggle="validator" class="col-xs-12 shake">
<div class="row">
<h3 class="col-xs-12">Referente</h3>
<div class="form-group col-sm-6">
<label for="name" class="h4 obbligatorio">Nome</label>
<input type="text" class="form-control" id="name" placeholder="Inserisci nome" required data-error="Inserire nome">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="cognome" class="h4 obbligatorio">Cognome</label>
<input type="text" class="form-control" id="cognome" placeholder="Inserisci cognome" required data-error="Inserire cognome">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="email" class="h4 obbligatorio">Email</label>
<input type="email" class="form-control" id="email" placeholder="Inserisci email" required data-error="Inserire email">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="telefono" class="h4 obbligatorio">Telefono/Cellulare</label>
<input type="text" class="form-control" id="telefono" placeholder="Inserisci recapito telefonico" required data-error="Inserire recapito telefonico">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Condominio</h3>
</div>
<div class="form-group col-sm-6">
<label for="nomeCondominio" class="h4 obbligatorio">Nome</label>
<input type="text" class="form-control" id="nomeCondominio" placeholder="Inserisci nome condominio" required data-error="Inserire nome condominio">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="indirizzoCondominio" class="h4 obbligatorio">Indirizzo</label>
<input type="text" class="form-control" id="indirizzoCondominio" placeholder="Inserisci indirizzo" required data-error="Inserire indirizzo condominio">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="comuneCondominio" class="h4 obbligatorio">Comune</label>
<input type="text" class="form-control" id="comuneCondominio" placeholder="Inserisci comune" required data-error="Inserire comune condominio">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="provinciaCondominio" class="h4 obbligatorio">Provincia</label>
<input type="text" class="form-control" id="provinciaCondominio" placeholder="Inserisci provincia" required data-error="Inserire provincia condominio">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="unitaCondominio" class="h4 obbligatorio">Numero unità</label>
<input type="text" class="form-control" id="unitaCondominio" placeholder="Inserisci numero unità" required data-error="Inserire numero unità">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="ascensoriCondominio" class="h4">Numero ascensori</label>
<input type="text" class="form-control" id="ascensoriCondominio" placeholder="Inserisci numero ascensori" data-error="Inserire numero ascensori">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="scaleCondominio" class="h4">Numero scale</label>
<input type="text" class="form-control" id="scaleCondominio" placeholder="Inserisci numero scale" data-error="Inserire numero scale">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<!--<label for="riscaldamentoCondominio" class="h4">Riscaldamento centralizzato</label>-->
<!--<input type="text" class="form-control" id="riscaldamentoCondominio" placeholder="Inserisci numero ascensori" data-error="Inserire numero ascensori">-->
<h4>Riscaldamento centralizzato</h4>
<label class="radio-inline"><input type="radio" name="riscaldamento">Sì</label>
<label class="radio-inline"><input type="radio" name="riscaldamento">No</label>
<!--<div class="help-block with-errors"></div>-->
</div>
</div>
<!--<button type="submit" id="form-submit" class="pulsante">Invia richiesta di preventivo!</button>-->
<!--<div class="col-sm-10 col-sm-offset-1">-->
<!--</div>-->
<input type="submit" id="form-submit" class="btn btn-success btn-lg pull-right">Submit</input>
<div id="msgSubmitCondomini" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
JS:
$("#condominiForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Hai completato correttamente i campi?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var cognome = $("#cognome").val();
var email = $("#email").val();
var telefono = $("#telefono").val();
var nomeCondominio = $("#nomeCondominio").val();
var indirizzoCondominio = $("#indirizzoCondominio").val();
var comuneCondominio = $("#comuneCondominio").val();
var provinciaCondominio = $("#provinciaCondominio").val();
var unitaCondominio = $("#unitaCondominio").val();
var ascensoriCondominio = $("#ascensoriCondominio").val();
var scaleCondominio = $("#scaleCondominio").val();
var riscaldamento = $("input[name=riscaldamento]:checked").val();
$.ajax({
type: "POST",
url: "php/process.php",
data: "name=" + name + "&cognome=" + cognome + "&email=" + email + "&telefono=" + telefono + "&nomeCondominio=" + nomeCondominio + "&indirizzoCondominio=" + indirizzoCondominio + "&comuneCondominio=" + comuneCondominio + "&provinciaCondominio=" + provinciaCondominio + "&unitaCondominio=" + unitaCondominio + "&ascensoriCondominio=" + ascensoriCondominio + "&scaleCondominio=" + scaleCondominio + "&riscaldamento=" + riscaldamento,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#condominiForm")[0].reset();
submitMSG(true, "Messaggio inviato!")
}
function formError(){
$("#condominiForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmitCondomini").removeClass().addClass(msgClasses).text(msg);
}
PHP
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// COGNOME
if (empty($_POST["cognome"])) {
$errorMSG .= "Cognome is required ";
} else {
$cognome = $_POST["cognome"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// TELEFONO
if (empty($_POST["telefono"])) {
$errorMSG .= "Telefono is required ";
} else {
$telefono = $_POST["telefono"];
}
// NOME CONDOMINIO
if (empty($_POST["nomeCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$nomeCondominio = $_POST["nomeCondominio"];
}
// INDIRIZZO CONDOMINIO
if (empty($_POST["indirizzoCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$indirizzoCondominio = $_POST["indirizzoCondominio"];
}
// COMUNE CONDOMINIO
if (empty($_POST["comuneCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$comuneCondominio = $_POST["comuneCondominio"];
}
// PROVINCIA CONDOMINIO
if (empty($_POST["provinciaCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$provinciaCondominio = $_POST["provinciaCondominio"];
}
// UNITA CONDOMINIO
if (empty($_POST["unitaCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$unitaCondominio = $_POST["unitaCondominio"];
}
// ASCENSORI CONDOMINIO
if (!empty($_POST["ascensoriCondominio"])) {
$ascensoriCondominio = $_POST["ascensoriCondominio"];
} else {
$ascensoriCondominio = "Valore non specificato";
}
// SCALE CONDOMINIO
if (!empty($_POST["scaleCondominio"])) {
$scaleCondominio = $_POST["scaleCondominio"];
} else {
$scaleCondominio = "Valore non specificato";
}
// RISCALDAMENTO CONDOMINIO
if (!empty($_POST["riscaldamento"])) {
$riscaldamento = $_POST["riscaldamento"];
} else {
$riscaldamento = "Valore non specificato";
}
$EmailTo = "alessandrocpr@gmail.com";
$Subject = "Nuova contatto da sito Abacond";
// prepare email body text
$Body = "REFERENTE";
$Body .= "'n";
$Body .= "Name: ";
$Body .= $name;
$Body .= "'n";
$Body .= "Cognome: ";
$Body .= $cognome;
$Body .= "'n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "'n";
$Body .= "Telefono: ";
$Body .= $telefono;
$Body .= "'n";
$Body .= "'n";
$Body .= "CONDOMINIO";
$Body .= "'n";
$Body .= "'n";
$Body .= "Nome: ";
$Body .= $nomeCondominio;
$Body .= "'n";
$Body .= "Indirizzo: ";
$Body .= $indirizzoCondominio;
$Body .= "'n";
$Body .= "Comune: ";
$Body .= $comuneCondominio;
$Body .= "'n";
$Body .= "Provincia: ";
$Body .= $provinciaCondominio;
$Body .= "'n";
$Body .= "Numero unità: ";
$Body .= $unitaCondominio;
$Body .= "'n";
$Body .= "Numero ascensori: ";
$Body .= $ascensoriCondominio;
$Body .= "'n";
$Body .= "Numero scale: ";
$Body .= $scaleCondominio;
$Body .= "'n";
$Body .= "Riscaldamento centralizzato: ";
$Body .= $riscaldamento;
$Body .= "'n";
var_dump($Body);
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Qualcosa è andato storto :(";
} else {
echo $errorMSG;
}
}
?>
表单操作是php/process.php
,ajax调用是php/process.php
。当您单击提交按钮时,表单的JS事件会被触发,但不会呈现备用页面并覆盖html的表单操作。我建议简化组件交互的步骤,以便更好地理解它们,然后再尝试掌握这里的复杂性。
我在localhost中复制了您的代码,如果删除validator()
函数,一切都很好:
$("#condominiForm").on("submit", function (event) {
如果没有这一点,jquery仍然可以防止提交空白输入,当所有输入都被填充时,ajax调用就会被执行,所有字段都会被发送,并且一切正常。
您可以在上看到:https://www.dropbox.com/s/eqc3vzxpwb0jmgj/test.png?dl=0
试着去掉那个零件。希望对你有帮助!
更新
此外,对于发送邮件,添加此部分以发送更好的电子邮件:
$reply = "your@mail.com";
$headers = "From: " . strip_tags($Subject) . "'r'n";
$headers .= "Reply-To: ". strip_tags($reply) . "'r'n";
$headers .= "MIME-Version: 1.0'r'n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1'r'n";
现在你可以使用html标签:
$Body = '<html><body>';
$Body .= '<your actual code with html tags>';
$Body .= '</body></html>';
更新2
您忘记设置无线电输入值:
<input .... value='0'>
或<input ... value='Si'>
$("#condominiForm").onclick(function (event) {
您应该使用点击事件来运行您的allj查询代码,这对您的项目有好处,因为提交时有一段时间不起作用
- JS动态添加字段-删除按钮不起作用
- 一键启动按钮不起作用
- 带有向下钻取的 Amchart 图表工作正常,但“后退”按钮不起作用
- 为什么不'这个HTML按钮不起作用
- 使用javascript后,提交按钮不起作用
- 镀铬延长件内部的聚合物纸按钮不起作用
- 我的提交按钮不起作用
- AngularJs:多次点击同一个按钮不起作用
- Ruby on Rails - 引导旋转木马按钮不起作用
- 为什么我的开关按钮不起作用
- 无法弄清楚为什么提交按钮不起作用
- 使用动画时Jquery后退按钮不起作用
- 禁用浏览器中的后退按钮不起作用
- 打印按钮不起作用
- jQuery-关闭按钮不起作用
- HTML按钮不起作用
- 清除Javascript/HTML中的画布按钮不起作用
- '有角度的靠背'返回页首按钮不起作用
- onclick() jQuery/JavaScript 显示饼图的按钮不起作用
- 网页Jquery下拉按钮不起作用