<ask> wp_mail issue duplicate blog didalam element

Mau tanya mas,

saya sedang membuat widget contact form menggunakan wp_mail. Untuk proses data saya mengunakan ini:

PHP:

<?php /*
Widget Name: Contact Form
*/

if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
    $to = 'my@email.com';
    $name = $_POST['bynname'];
    $email = $_POST['bynemail'];
    $subject = "Message from $name <$email>";
    $headers = 'Reply-to: ' . $_POST['bynname'] . ' <' . $_POST['bynemail'] . '>' . ':';
    $message = $_POST['bynmessage'];

    if(wp_mail($to,$subject,$message,$headers)) {
        echo 'Your email was sent successfully.';
    } else {
        echo 'There was a problem sending your email.';
    }
}

Sedangkan formnya seperti ini:

PHP:

                        <form action="<?php the_permalink(); ?>" method="post" name="bynCForm" id="contact_form">
                            <span class="err"></span><div class="clear"></div>
                            <ul class="forming">
                                <li><input placeholder="Name" class="required" type="text" name="bynname" id="name" tabindex="1" /></li>
                                <li><input placeholder="Email" class="required" type="text" name="bynemail" id="email" tabindex="2" /></li>
                                <li><textarea placeholder="Message" class="required" cols="40" rows="8" name="bynmessage" id="message" tabindex="3"></textarea></li>
                            </ul>
                            <div id="loader"><input type="submit" class="submit" value="Submit" /></div>
                        </form>

Proses submit dilakukan oleh jQuery-ajax pada halaman yang sama. Jadi tidak perlu ngeload page untuk proses pengiriman content pada contact form. Pada dasarnya form ini bekerja, Masalahnya setelah submit data dan terkirim seluruh halaman ikut terload kembali dibagian widget itu. Jadi didalam widget ada seperti iframe yang isinya semua halaman blog. Berikut jQuery yang saya gunakan:

Code:

jQuery(document).ready(function($){
	$('#contact_form').submit(function(e){
		// Set variables to validate the Email address:
		var x=document.forms["bynCForm"]["email"].value;
		var atpos=x.indexOf("@");
		var dotpos=x.lastIndexOf(".");
		
		// Set variable to check if fields are empty
		var errors;
		
		// Execution
		$('.required').each(function(){
			var val = $(this).val()
			if( ! val ) {   
				errors = true;
			}
		});
		
		// Well...lets go
		if( errors ) {
			e.preventDefault();
			$('.err').empty().text('<?php echo get_option('byn_wi-emptyform'); ?>').css({'display': 'block'});
		} else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
			$('.err').empty().text('<?php echo get_option('byn_wi-emailerror'); ?>').css({'display': 'block'});
			return false;
		} else {
			e.preventDefault();
			var form = $(this);
			var post_url = form.attr('action');
			var post_data = form.serialize();
			$('.err').css({'display': 'none'});
			$('#loader', form).html('Please Wait...');
			$.ajax({
				type: 'POST',
				url: post_url, 
				data: post_data,
				success: function(msg) {
					$(form).fadeOut(500, function(){
						form.html(msg).fadeIn();
				});
				}
			});
		}
	});
	});

Ini solusinya bagaimana ya?
Terima kasih sebelumnya.

 

coba ajaxnya di modif gini

Code:

$.ajax({
	type: 'POST',
	url: post_url, 
	data: post_data,
	beforeSend: function(){
		$('#loader').html('Please Wait...');
	},
	complete: function(){
		$('#loader').html('<input type="submit" class="submit" value="Submit" />');
	},				
	success: function(msg) {
		console.log(msg);
	}
});

 

Bekerja bro tapi tidak ada pesan konfirmasi yang muncul setelah pesan terkirim. Berdasarkan skenario php diatas saat pesan terkirim akan muncul pesan "Your email was sent successfully", dan jika error "There was a problem sending your email". Yang ini bagaimana ya?

Btw, terima kasih bantuannya.

 

saya sarankan buat handle ajax response pake bawaan wp aja http://codex.wordpress.org/AJAX_in_Plugins

itu nanti kalo sukses, form buat input ilang cuma ganti ajax response kan?

kalo iya masukin formnya di div, katakanlah

Code:

<div id="ccForm">
<form.....
</div>

PHP:

            $.ajax({
                url: "<?php echo admin_url('admin-ajax.php'); ?>",
                type: 'POST',
                data: {
                    action: 'byncform',
                    byncform:post_data
                },
                dataType: 'html',
                beforeSend: function(){
                    $('#loader').html('Please Wait...');
                },
                success: function(msg) {
                    $('#ccForm').html(msg);
                }
            });


buat handle ajax response

PHP:

add_action('wp_ajax_byncform', 'byncform');
add_action('wp_ajax_nopriv_byncform', 'byncform');

function byncform() {
    if ( $_POST['byncform'] ) {
        $to = 'my@email.com';
        $name = $_POST['bynname'];
        $email = $_POST['bynemail'];
        $subject = "Message from $name <$email>";
        $headers = 'Reply-to: ' . $_POST['bynname'] . ' <' . $_POST['bynemail'] . '>' . ':';
        $message = $_POST['bynmessage'];

        if(wp_mail($to,$subject,$message,$headers)) {
            echo 'Your email was sent successfully.';
        } else {
            echo 'There was a problem sending your email.';
        }
    }
    die();
}
 

 

Saya coba dulu mas. Terima kasih bantuannya.