0

我一直在这里搜索，但还没有找到这样做的方法:(而且我无法调整适用于这个问题的现有答案。

我现在正在做的是：1）当用户点击一个按钮时，colorbox被触发并打开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-from-where -表格已发送）

<?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 提交表单，而不必将用户重定向到同一页面......或者......如果这不可能，至少能够给用户一个警报消息，即消息/邮件是否成功发送。

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

4

1 回答 1

0

如果你想通过 AJAX 提交表单，而不是提交和加载操作 url，你可以使用 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>
于 2013-01-18T13:54:08.463 回答