Question

我一直在这里搜索，但还没有找到办法:(而且我无法调整现有的答案来解决这个问题。

我现在正在做的是： 1）当用户点击按钮时，颜色框会被触发并打开href属性，在本例中为“contact-form.html”

<a href="contact-form.html" class="contacto"><span class="button green">19.999 € (kit)</span></a>

$('a.contacto').colorbox({
href:function(){ return $(this).attr('href'); }, 
width:function(){ 
    if (window.innerWidth > 750) {return '60%';} 
    else if (window.innerWidth > 481) {return '75%';} 
    else {return '90%';}},
onComplete:function(){
    var ruta = document.location.protocol + "//" + document.location.host + document.location.pathname;
    $('input[name=web]').val(ruta);
}
});

2）表格显示在颜色框

中

<div id="contactForm">
    <h4>Póngase en contacto con nosotros</h4>
    <form name="formulario" id="formulario" method="post" action="contact-form.php">
        <inputs>........
        <input type="reset" name="reset" id="resetbtn" class="resetbtn button" value="Limpiar datos">
        <input type="submit" name="submit" id="submitbtn" class="submitbtn button green macro" tabindex="7" value="Enviar consulta!">
        <br>
    </form> 
</div><!--Fin del contactForm-->

3）一旦用户完成表单并点击提交，触发contact-form.php（一些验证，邮件发送自己。最后我插入一个标题（“Location：”+ original-pathname-从-其中-的外形被发送的）

<?php
$errors = ''; /*Para comprobar si ha habido errores*/

/*Retrieve variables from $_POST.......*/

if (empty($emailField)) { 
    $errors .= "\n Error: Se requiere un correo electrónico"; 
}
if (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", $emailField)) {
    $errors .= "\n Error: Correo electrónico inválido";
}

$header = /*Prepare the MAIL HEADERS TO BE SENT*/

$mensaje = /*Prepare the MESSAGE........*/

if (empty($errors)) /*Some validation*/
{
    if (mail($mi_email, $asuntoEmail, utf8_decode($mensaje), $header)) {
        header("Location: $pageRefresh");
    }
    else {
        echo '<script type="text/javascript">';
        echo 'alert("Ha habido algun error en el envio. Por favor, vuelva a intentarlo")';
        echo '</script>';
    }
}
else
{
    echo '<script type="text/javascript">';
    echo 'alert("Ha habido algun error en el envio:'.$errors.'")';
    echo '</script>';
    echo '<p>Ha habido algun error:' .$errors. '</p>';
}
?>

一切正常，直到这个点正确完成。邮件被发送到我的帐户，所有变量都被正确填写，用户被重新定位到打开表单（颜色框）的原始页面。

我无法做到的是：

我希望通过AJAX提交表单，而不是必须将用户重定向到同一页面......或者......如果不可能，至少能够给用户提供警报消息/邮件已成功发送的消息。

非常感谢帮助！如果这是一个重复的问题再次抱歉，但我无法自己适应/解决这个问题：（

Answer 1

如果你想通过AJAX提交表单，而不是提交和加载动作网址，你可以使用jQuery的序列化功能来完成。

对您的代码进行一些更改。首先，您需要摆脱提交按钮。通过将其类型更改为按钮来执行此操作：

<input type="button" name="button" id="submitbtn" class="submitbtn button green macro" tabindex="7" value="Enviar consulta!">

接下来，我们需要代码通过AJAX提交表单：

<script type="text/javascript">
$('#submitbtn').click(function() {
  $.post('contact-form.php', $('#formulario').serialize());
});
</script>

这将通过AJAX提交表单字段，而无需加载新的URL。

如果你想在提交后做一些成功通知，你可以这样做：

<script type="text/javascript">
    $('#submitbtn').click(function() {
      $.post('contact-form.php', $('#formulario').serialize(), function(){
 // Anything here is executed if the post is successful
 alert('success');
 }

 );
 });
</script>

colorbox提交/发送邮件表格并在同一颜色框中确认（ajax？）

1 个答案: