Problem z formularzem i Ajaxem Opcje

[maryjan]

Witam,

buduję stronę opartą na Bootstrap 3. Podpiąłem do niego plugin bootstrapValidator, który działa super. Posiada on również integrację z Ajaxem jednak mam problem ze spięciem go z formularzem w php.

Czy znajdzie się dobra dusza, która pomoże mi dopiąć formularz? Nie jestem biegły w ajaxie i js'ach uczę się na własnych błędach jednak stanąłem w miejscu i od 2 dni nie mogę nic w tej materii wykminić.

Chodzi o przesłanie ajaxem informacji z formularza i wysłanie ich poprzez php bez przeładowania strony.

HTML

[HTML] pobierz, plaintext 
<form class="modalFormContainer">
					<div class="form-group">
						<input type="text" class="form-control input-lg" id="inputSubjectModal" name="url" placeholder="Your website URL" value="">
					</div>
					<div class="form-group">
						<input type="text" class="form-control input-lg" id="inputSubjectModal" name="email" placeholder="Your Email address" value="">
					</div>
					<div class="form-group">
						<input type="text" class="form-control input-lg" id="inputSubjectModal" name="name" placeholder="Your name (optional)" value="">
					</div>
					<div class="row">
						<div class="form-group">
							<div class="col-md-6 control-label"><p>Number of pageviews monthly:</p></div>
							<div class="col-md-6 selectContainer">
								<select name="reach" class="form-control">
									<option value="">Select Traffic</option>
									<option value="upto500000">Up to 500 000</option>
									<option value="500000-1000000">500 000 - 1 000 000</option>
									<option value="1000000-2000000">1 000 000 - 2 000 000</option>
									<option value="2000000-5000000">2 000 000 - 5 000 000</option>
									<option value="over5000000">over 5 000 000</option>
								</select>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<button type="submit" class="btn btn-default input-lg" id="submit">Send Message</button>
						</div>
						<div class="col-md-6"></div>
					</div>
				</form>
[HTML] pobierz, plaintext 

PHP

[PHP] pobierz, plaintext 
<?php
if($_POST)
{
    require_once('class.translation.php');
    $lang       = (isset($_POST["lang"]) && $_POST["lang"] != "") ? $_POST["lang"] : "en";
    $translate  = new Translator($lang);
 
    $to_Email   = "pawel.slomka@adtaily.com";
    // $to_Email   = "jarek@adtaily.pl";
 
 
    //check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
 
        //exit script outputting json data
        $output = json_encode(
        array(
            'type'=>'error', 
            'text' => 'Request must come from Ajax'
        ));
 
        die($output);
    } 
 
    //check $_POST vars are set, exit if any missing
    if(!isset($_POST["name"]) || !isset($_POST["email"]) || !isset($_POST["subject"]) || !isset($_POST["message"]))
    {
        $output = json_encode(array('type'=>'error', 'text' => $translate->__('error-empty-field')));
        die($output);
    }
 
    //Sanitize input data using PHP filter_var().
    $user_Name = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
    $user_Email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
    $user_Subject = filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
    $user_Message = filter_var($_POST["message"], FILTER_SANITIZE_STRING);
    $user_Checked = $_POST["send_copy"];
 
    //additional php validation
    if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
    {
        $output = json_encode(array('type'=>'error', 'text' => $translate->__('error-email-wrong')));
        die($output);
    }
 
    //proceed with PHP email.
    $headers = 'From: '.$user_Email.'' . "\r\n" .
    'Reply-To: '.$user_Email.'' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();
 
    $body .= 'Imię: '.$user_Name."\r\n\r\n";
    $body .= 'E-mail: '.$user_Email."\r\n\r\n";
    $body .= 'Temat: '.$user_Subject."\r\n\r\n";
    $body .= 'Wiadomość: '.nl2br($user_Message)."\r\n\r\n";
    $body .= 'Wiadomość wysłana z formularza kontakowego na stronie YieldBird';
 
 
        // send mail
    $sentMail = @mail($to_Email, $user_Subject, $body, $headers);
    if( $user_Checked == true )
        $sentCopy = @mail($user_Email, $user_Subject, $body, $headers);
 
    if(!$sentMail)
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
        die($output);
    }else{
        $output = json_encode(array('type'=>'message', 'text' => $translate->__('success-sent')));
        die($output);
    }
}
?>
[PHP] pobierz, plaintext 

AJAX

[HTML] pobierz, plaintext 
$(document).ready(function() {
		$('.contactForm')
			.bootstrapValidator({
				feedbackIcons: {
					valid: 'glyphicon glyphicon-ok',
					invalid: 'glyphicon glyphicon-remove',
					validating: 'glyphicon glyphicon-refresh'
				},
			fields: {
				name: {
					message: 'The username is not valid',
					validators: {
						notEmpty: {
							message: 'The username is required'
						},
					}
				},
				email: {
					validators: {
						notEmpty: {
							message: 'The email is required'
						},
						emailAddress: {
							message: 'The input is not a valid email address'
						}
					}
				},
				subject: {
					validators: {
						notEmpty: {
							message: 'The subject is required'
						}
					}
				},
				message: {
					validators: {
						notEmpty: {
							message: 'The message is required.'
						}
					}
				}
			}
		})
		.on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();
			ga('send', 'event', 'Message', 'Sent', 'Messages has been sent successfully');
            // Get the form instance
            var $form = $(e.target);
 
            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
 
            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                $.ajax({
					type: 'POST',
					url: 'lib/contact.php',
					data: $('.contactForm').serialize(),
					success: function () {
					  alert('form was submitted');
					},
					dataType: 'json'
				})
            }, 'json');
        });
});
[HTML] pobierz, plaintext 

[amii]

1. Co to za konstrukcja .on('success.form.bv' tu nie powinien być submit ?
2. ga('send', 'event', 'Message', 'Sent', 'Messages has been sent successfully'); - tą funkcję masz zdefiniowaną ? (bo na listingu jej nie ma)
3. Do obiektu formularza odwołujesz się w różny sposób nie masz w nim zdefiniowanej akcji ale przede wszystkim NIE masz w ogóle klasy .contactForm do której się odwołujesz się z poziomu JS.
4. Jeśli po poprawieniu powyższych punktów nie będzie działać to uruchamiasz konsolę i sprawdzasz błędy w zakładkach network i konsola

[maryjan]

1. konstrukcja ta jest wymagana przez skrypt walidacyjny bootstrapValidator

Rozwiązanie znalezione: problem z ajaxem rozwiązany i poprawnie kod powinien wyglądać następująco

[HTML] pobierz, plaintext 
.on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();
			ga('send', 'event', 'Message', 'Sent', 'Messages has been sent successfully');
            // Get the form instance
            var $form = $(e.target);
 
            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
 
            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
			alert('form was submitted');
            }, 'json');
        });
[HTML] pobierz, plaintext 

2. funkcja "ga" odwołuje się do google analytics, który stwierdziłem, że nie ma sensu tu wklejać. Jest to zdarzenie wywoływane po poprawnym zwalidowaniu formularza, które odnotowuje konwersję.
3. Rzeczywiście, w htmlu dałem zły formularz (ten, który wkleiłem odnosił się do modalowego formularza).
4. rozwiązaniem jest kod, który wkleiłem powyżej, którym podmieniłem błędny JS.

Ten post edytował maryjan 31.10.2014, 10:10:20