Question

我创建了具有视差滚动的页面，联系人框位于最后一部分。如果我使用简单的html + php联系人框，页面将刷新到第一部分，因此用户必须滚动回联系部分才能看到结果。为了纠正这个问题，我正在尝试制作将不重新加载页面而发送电子邮件的脚本。（由Jquery提供）

这就是它的样子：

HTML：

<form method="post" enctype="multipart/form-data" id="formularz">
        <label  for="name">Imię</label><input type="text" name="name" id="formularz_name"/></br></br>
        <label  for="email">Email</label><input type="text" name="email" id="formularz_email"/></br></br>
        <label  for="phone">Telefon</label><input type="text" name="phone" id="formularz_phone"/></br></br>
        <label  for="enquiry">Zapytanie</label><textarea name="enquiry" cols="20" rows="10" id="formularz_text"></textarea></br></br>
        <input type="submit" id="contact_button" value="Wyślij" />
        </form>

Jquery的：

$('#contact_button').click(function () {


    var name = $('#formularz_name').val();
    var email = $('#formularz_email').val();
    var phone = $('#formularz_phone').val();
    var text = $('#formularz_text').val();

          $.ajax({
            url: 'inc/contact.php',
            data: {'name': name, 'email': email, 'phone': phone, 'text': text},
            type: 'POST',
            success: function(odp){
                alert(odp);
            }

           });

});

PHP：

<?php





    if (!$name || !$email || !$phone || !$text) {
        $problem = TRUE;
       echo("<br><p>Musisz wypełnić wszystkie pola.</p>");
    }       

    if (!$problem){


    $data = date("d.m.y");


    $message = "
    <p>Name: $name</p>
    <p>Phone: $phone</p>
    <p>Email: $email</p>
    <br>
    <p>Enquiry: $text</p>";


$od = "$email";
$content = $message;
$header = "From: $od \r\n";
$header  .= 'MIME-Version: 1.0' . "\r\n";
$header .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
 (mail('lethysek@gmail.com', 'New message from website Angelzena', $content, $header));



                     echo("<br><p>Wiadomość została wysłana.</p>");

    }else{
          echo("<p>Spróbuj ponownie</p>");
         }                    



?>

为什么它不起作用？当我点击提交时，页面会刷新，没有任何反应。

Answer 1

第一

使用button代替submit来阻止刷新。

更改<input type="submit" id="contact_button" value="Wyślij" /> 至<input type="button" id="contact_button" value="Wyślij" />

Answer 2

尝试序列化表单数据以避免不必要的geting输入值并阻止表单（提交）的默认操作。

$("form").on("submit", function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    $.ajax({
        url: 'inc/contact.php',
        data: formData,
        type: 'POST',
        success: function(odp){
            alert(odp);
        }
    });
});

Answer 3

尝试删除标记周围的包装器（你已经对POST调用jquery ajax（））并添加$ _POST ['name']作为其他提到的实际初始化你的php变量。

Answer 4

您需要停止在jquery中提交表单。试试这个：

$('#formularz').submit(function ( e ) {


    var name = $('#formularz_name').val();
    var email = $('#formularz_email').val();
    var phone = $('#formularz_phone').val();
    var text = $('#formularz_text').val();

          $.ajax({
            url: 'inc/contact.php',
            data: {'name': name, 'email': email, 'phone': phone, 'text': text},
            type: 'POST',
            success: function(odp){
                alert(odp);
            }

           });

    e.preventDefault();
});

Answer 5

删除表单标记...它强制您的页面刷新。它将适合您。

通过表单发送电子邮件而不刷新

5 个答案: