0

私はここで検索してきましたが、これを行う方法を見つけていません:(そして、この問題に対して利用可能な既存の回答を適応させることはできません.

私が今行っていることは次のとおりです。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-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

アクション URL を送信してロードする代わりに、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>

これにより、新しい URL をロードせずに、AJAX 経由でフォーム フィールドが送信されます。

送信後に成功通知を表示するようなことをしたい場合は、これを行うことができます:

<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 に答える