0

JQuery Post スクリプトで問題が発生しています。(ポップアップ)フォームを送信するためにJqueryを使用しています。この機能を無効にすると、すべてがスムーズに実行されます。(フォームページを離れたくないだけです)。

私のフォーム入力の一部(いくつかのラジオボタン)

<label><input type="radio" name="algemene_rating" id="algemene_rating" value="zeer_slecht" />1</label>
<label><input type="radio" name="algemene_rating" id="algemene_rating" value="slecht" />2</label>
<label><input type="radio" name="algemene_rating" id="algemene_rating" value="matig" />3</label>
<label><input type="radio" name="algemene_rating" id="algemene_rating" value="goed" />4</label>
<label><input type="radio" name="algemene_rating" id="algemene_rating" value="zeer_goed" />5</label>

私のフォーム入力の一部(いくつかのチェックボックス)

<input type="checkbox" name="suggestie_dienstverlening" value="true" style="float:left; margin-bottom:5px;"/><div class="FeedbackCheckbox">Dienstverlening</div>
<input type="checkbox" name="suggestie_opmaak" value="true" style="float:left"/><div class="FeedbackCheckbox">Opmaak</div>
<input type="checkbox" name="suggestie_functionaliteit" value="true" style="float:left; margin-bottom:5px;"/><div class="FeedbackCheckbox">Functionaliteit</div>
<input type="checkbox" name="suggestie_site_inhoud" value="true" style="float:left; margin-bottom:5px"/><div class="FeedbackCheckbox">Site inhoud</div>
<input type="checkbox" name="suggestie_anders" value="true" style="float:left"/><div class="FeedbackCheckbox">Anders...</div>

私のフォーム入力の一部(テキスト(エリア))

<input type="text" name="url_van_foutpagina" style="font-size:9px; width:275px">
<input id="e-mail" type="text" value="" name="email" />

JQuery がなくても、この PHP スクリプトを使用すると、すべてがスムーズに実行されます。

<?php

//collect vals
$algemene_rating = htmlspecialchars($_POST['algemene_rating']);
if ($_POST['suggestie_dienstverlening'] == "true")  {$sugestie_onderwerp .= "<li> Dienstverlening </li>";}
if ($_POST['suggestie_opmaak'] == "true")           {$sugestie_onderwerp .= "<li> Opmaak </li>";}
if ($_POST['suggestie_functionaliteit'] == "true")  {$sugestie_onderwerp .= "<li> Functionaliteit </li>";}
if ($_POST['suggestie_site_inhoud'] == "true")      {$sugestie_onderwerp .= "<li> Site inhoud </li>";}
if ($_POST['suggestie_anders'] == "true")           {$sugestie_onderwerp .= "<li> Anders.. </li>";}
$url_van_foutpagina = htmlspecialchars($_POST['url_van_foutpagina']);

//Collect 'Emailadres'
$email = htmlspecialchars($_POST['email']);

// Collect: 'Attributes'
$tijd = time();
$datum = strftime("%d/%m/%y %H:%M", $tijd);
$ip = getenv("REMOTE_ADDR");

// Collect 'Mail info'
$headers = 'MIME-Version: 1.0' . "\r\n"; 
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; 

// Het bericht voor de ontvanger 
$message = '<html><body>';
$message .= '<table rules="all" style="background-color:#F8F8F8; width:600px; font-family:arial; font-size:11px; valign:top">';
$message .= '<table rules="all" border="1px solid #666666" style="background-color:#F8F8F8; width:600px; font-family:arial; font-size:11px;">';
$message .= '<td style="width:200px;"  /></td>';
$message .= "<tr><td><strong></strong> </td><td><h3>Feedbackformulier Multihout.nl</h3></td></tr>";
// 'Attributes'
$message .=  "<tr><td><hr/></td><td><hr/></td></tr>";
$message .=  "<tr><td><strong>Feedback datum:</strong> </td><td>        " . $datum . "</td></tr>";
$message .=  "<tr><td><strong>Feedback e-mailadres:</strong> </td><td>  " . $email . "</td></tr>";
$message .=  "<tr><td><strong>Feedback IP-adres:</strong> </td><td>     " . $ip . "</td></tr>";
// 'Algemeen'
$message .=  "<tr><td><hr/></td><td><hr/></td></tr>";
$message .=  "<tr><td><strong>Algemene rating van de site:</strong> </td><td>" . $algemene_rating . "</td></tr>";
$message .=  "<tr><td><hr/></td><td><hr/></td></tr>";
$message .=  "<tr><td><strong>Feedback over URL:</strong> </td><td>" . $url_van_foutpagina . "</td></tr>";
$message .=  "<tr><td><hr/></td><td><hr/></td></tr>";
$message .=  "<tr><td><strong>Onderwerp suggestie:</strong> </td><td>" . $sugestie_onderwerp . "</td></tr>";
$message .= "</table>";
$message .= "</body></html>"; 

// Gedeelte voor het verzenden van het bericht
$mailadres = "test@test.nl";
$message = str_replace ("<br>","\n", $message);
$headers .= "From: Test <test@test.nl>" . "\r\n";
mail("$mailadres", "Nieuw bericht via mailformulier", $message, $headers); 

?>
<!--Display a thankyou message in the callback -->
<div id="mail_response">
    <h3>Thank you <?php echo $name ?>!</h3><br />
    <p>I will answer your message soon as possible.</p><br /><br /><br />
    <h5>Message sent on: </h5>
    <p><?php echo $todayis ?></p>
</div>    

しかし、この JS スクリプト (送信/投稿部分) を使用すると、メールやテーブルに未定義の値が表示されます。

   //submission scripts
  $('.contactForm').submit( function(){
        //statements to validate the form   
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var email = document.getElementById('e-mail');
        if (!filter.test(email.value)) {
            $('.email-missing').show();
        } else {$('.email-missing').hide();}
        //if (document.cform.name.value == "") {
        //  $('.name-missing').show();
        //} else {$('.name-missing').hide();}   
        //if (document.cform.message.value == "") {
        //  $('.message-missing').show();
        //} else {$('.message-missing').hide();}        
        if 
        //((document.cform.name.value == "") || 
        (!filter.test(email.value)) 
        //|| (document.cform.message.value == ""))
        {
            return false;
        } 

        if 
        //((document.cform.name.value != "") && 
        (filter.test(email.value)) 
        //&& (document.cform.message.value != "")) 
        {
            //hide the form
            $('.contactForm').hide();

            //show the loading bar
            $('.loader').append($('.bar'));
            $('.bar').css({display:'block'});

            //send the ajax request
            $.post('mail.php',{
                            algemene_rating:$('#algemene_rating').val(),
    url_van_foutpagina:$('#url_van_foutpagina').val(),
    sugestie_onderwerp:$('#sugestie_onderwerp').val(),
    email:$('#email').val()},

            //return the data
            function(data){
              //hide the graphic
              $('.bar').css({display:'none'});
              $('.loader').append(data);
            });

            //waits 2000, then closes the form and fades out
            setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);

            //stay on the page
            return false;
        } 
  });
    //only need force for IE6  
    $("#backgroundPopup").css({  
        "height": document.documentElement.clientHeight 
    });  
});

問題はここにあると思います:

//send the ajax request
                $.post('mail.php',{
algemene_rating:$('#algemene_rating').val(), url_van_foutpagina:$('#url_van_foutpagina').val(),
sugestie_onderwerp:$('#sugestie_onderwerp').val(), email:$('#email').val()},

しかし、jqueryで正しくPOSTする方法がわかりません。または、正しい方法で取得して .html メールに入れます。フォーム全体を .serialize しようとしましたが、これを「unserialize」して、html-mail を正しく入力できるようにする方法がわかりません。

皆さんが私を助けてくれることを願っています..これを自分で解決するために、今長い間探して試しています..:)

4

1 に答える 1

0

あなたが探しているのは ajax リクエストだと思います。ページを更新せずにデータを送信したい。

http://api.jquery.com/jQuery.ajax/

于 2012-04-23T12:13:49.963 に答える