PHP-Kontaktformular mit Ajax (.load) Problem

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
ich hab jetzt schon einigemal .load oder.ajax für das dynamische laden von links verwendet und das hat auch bisher ganz gut funktioniert in dem ich da jeweils dashref ausgelesen habe und als Zieldatei eingetragen habe.
Nun steh ich aber vor dem Problem das ich ein PHP-Kontaktformualr habe welches mit Submit-Button abgeschickt wird und ich keine Ahnung habe wie ich hier an das Ziel komme um das JS-Script einzutragen?

Hiermal die Dateien:
Controller:
PHP:
<?php

return function($site, $pages, $page) {

  $alert = null;

  if(get('submit')) {

    $data = array(
      'name'  => get('name'),
      'email' => get('email'),
      'text'  => get('text')
    );

    $rules = array(
      'name'  => array('required'),
      'email' => array('required', 'email'),
      'text'  => array('required', 'min' => 3, 'max' => 3000),
    );

    $messages = array(
      'name'  => 'Please enter a valid name',
      'email' => 'Please enter a valid email address',
      'text'  => 'Please enter a text between 3 and 3000 characters'
    );

    // some of the data is invalid
    if($invalid = invalid($data, $rules, $messages)) {
      $alert = $invalid;

    // the data is fine, let's send the email
    } else {

      // create the body from a simple snippet
      $body  = snippet('contactmail', $data, true);

      // build the email
      $email = email(array(
        'to'      => '****@****.de',
        'from'    => 'website@******.de',
        'subject' => 'New contact request',
        'replyTo' => $data['email'],
        'body'    => $body
      ));

      // try to send it and redirect to the
      // thank you page if it worked
      if($email->send()) {
        go('contact/thank-you');
      // add the error to the alert list if it failed
      } else {
        $alert = array($email->error());
      }

    }

  }

  return compact('alert');

};
Das Formular:
PHP:
<form method="post">
      <?php if($alert): ?>
      <div class="alert">
        <ul>
          <?php foreach($alert as $message): ?>
          <li><?php echo html($message) ?></li>
          <?php endforeach ?>
        </ul>
      </div>
      <?php endif ?>
      <div class="field">
        <label for="name">Name <abbr title="required">*</abbr></label>
        <input type="text" id="name" name="name">
      </div>
      <div class="field">
        <label for="email">Email <abbr title="required">*</abbr></label>
        <input type="email" id="email" name="email" required>
      </div>
      <div class="field">
        <label for="text">Text <abbr title="required">*</abbr></label>
        <textarea id="text" name="text" required></textarea>
      </div>
        <button class="reset btn btn-red pull-left" type="reset" name="_reset" >Reset</button>   
        <button class="submitContact btn btn-green pull-right" type="submit" name="submit" value="Submit">Submit</button>
    </form>

Also ich muss irgendwie an die per Post übergebenen Daten kommen.

Mein Problem ist im Grunde das was bei einem normalen Link bei meinem Script in der variablen „contentToLoad“ steht.
Javascript:
$(function(){
    var mainContentBox    =    $('.maincontentbox'),
        submit            =    $('.submitContact');
   
    submit.click(function(ajaxSubmit){
        ajaxSubmit.preventDefault();
       
        var contentToLoad = $(this).attr('href');   
           
        if (mainContentBox.is(':empty')){
            mainContentBox.html('<div class="maincontent"><i class=\"icon-logo center-block text-center\" aria-hidden=\"true\"></i><div class=\"text-center\">Inhalt wird geladen.</div></div>');
            mainContentBox.load(contentToLoad, function() {
                mainContentBox.hide().fadeIn('slow');
            });
        }
        else {
            mainContent.fadeOut('slow');
            mainContentBox.html('<div class="maincontent"><i class=\"icon-logo center-block text-center\" aria-hidden=\"true\"></i><div class=\"text-center\">Inhalt wird geladen.</div></div>');
            mainContentBox.load(contentToLoad, function() {
                mainContentBox.hide().fadeIn('slow');
            });
       
        }
        history.pushState({}, '', contentToLoad);
    });
   
   
});

Viele Grüße
 
Wenn du ein Formular per JavaScript abschicken willst, ist das nur ein Zweizeiler ;)
Javascript:
var formData = new FormData( document.getElementById("my-form-id") );
xhr.send(formData);
(xhr ist ein XMLHttpRequest-Objekt)

Siehe auch diesen StackOverflow-Beitrag.

Ansonsten verstehe ich dein Problem nicht wirklich, insbesondere den folgenden Satz:
ich keine Ahnung habe wie ich hier an das Ziel komme um das JS-Script einzutragen?
Wo willst du das JS-Skript eintragen?
 

Neue Beiträge

Zurück