Jquery Post + führe php-Datei aus > Formular ausblenden > Nachricht anzeigen

Question

Hier ist mein Code zum Thema jQuery-Post. Ich kann es irgendwie nicht zum Laufen bringen. Ich habe Stunden damit verbracht :( Was fehlt hier?! Wenn ich den Code ausführe, lädt er die gleiche Seite :(

Ich möchte, dass der PHP-Code unter query.php ausgeführt wird, das Kontaktformular ausblendet und eine "Danke!"-Nachricht anzeigt, wenn auf die Senden-Schaltfläche geklickt wird. (ohne Seitenladen)

Vielen Dank für eure Hilfe!

---

PHP-Formular

        Vollständiger Name: *

---

SKRIPT

$(function() {

    $("#btnsend").click(function() {
        var dataString = 'fullname='+ escape(full_name);
        $.ajax({
            type: "POST",
            url: "query.php?act=contact",
            data: dataString,
            success: function() {
            $('#contact-form').hide();
        $('#contact-form').html("Danke!")
        .fadeIn(1500, function() {$('#contact-form').append("");});
       } 

    });

    return false;
    });
 });

Answer 1

Sie können auf den Klick auf die Schaltfläche preventDefault oder auf das Ereignis des Absendens des Formulars false zurückgeben:

$(function() {
    $("#btnsend").click(function(e) {
            e.preventDefault();
            var full_name = $('input["name=full_name"]').val();
            var dataString = 'fullname='+ full_name;
            $.ajax({
              type: "POST",
              url: "query.php?act=kontakt",
              data: dataString,
              success: function() {
                    $('#contact-form').hide();
                    $('#contact-form').html("Danke!")
                                      .fadeIn(1500, function() {$('#contact-form').append("");});
               }
        });
    });
});

oder:

$('#commentForm').submit(function() {
    return false;
});

Answer 2

Ihr Problem liegt in: var dataString = 'fullname='+ escape(full_name);

Versuchen Sie: var dataString = 'fullname='+ escape(document.contact.full_name.value);

Zum Beispiel:

 Beispiel

  $(function() {
   $("#btnsend").click(function() {
    var dataString = 'fullname='+ escape(document.contact.full_name.value);

    $.ajax( {
     type: "POST",
     url: "query.php?act=contact",
     data: dataString,
     success: function() {
      $('#contact-form').hide();
      $('#contact-form').html("<p>Danke!</p>").fadeIn(1500, function() { 
       $('#contact-form').append("");
      });
       }  
    });

    return false;
   });
  });

   Vollständiger Name: *

Vergewissern Sie sich, dass query.php existiert, da andernfalls die Rückruffunktion bei Erfolg nicht ausgeführt wird.

Stellen Sie auch sicher, dass Sie auf die Schaltfläche klicken und nicht die EINGABETASTE drücken, da dies das Formular normal übermitteln wird (Sie haben nur einen Ereignishandler für Klick definiert und nicht für Tastendruck).

Answer 3

Versuch es:

$(function() {

$("#btnsend").click(function() {

        $.ajax({
          type: "POST",
          url: "query.php?act=contact",
          data: { fullname: $('input[name=full_name]').val() },
          success: function() {
        $('#contact-form').hide();
                $('#contact-form').html("Danke!")
        .fadeIn(1500, function() {$('#contact-form').append("");});
           } 

    });

    return false;
});
});

Answer 4

Ich denke, dass du hier mindestens 3 Probleme hast. Erstens referenzierst du full_name, als wäre es eine Variable. Ich glaube, dass dies einen JavaScript-Fehler verursacht, der die Funktion abbricht und die Standardaktion (post) zulässt. Zweitens musst du wahrscheinlich ALLE Formparameter codieren, einschließlich act. Dies könnte dazu führen, dass eine ungültige URL gesendet wird und die Aktion anscheinend nicht aufgerufen wird - das kannst du überprüfen, indem du die Anfrage ansiehst, die mit Firefox/Firebug gesendet wird. Drittens versuchst du, den Inhalt einer Liste durch ein Absatz-Element zu ersetzen. Dies ist ungültiges HTML. Ich würde die gesamte Liste durch den Absatz ersetzen (und ich verstehe nicht, was das Anhängen eines leeren Strings am Ende bewirkt, also habe ich es weggelassen).

Beachte, dass ich dies so geändert habe, dass es auf das Absenden des Formulars reagiert - daher spielt es keine Rolle, wie es gesendet wird. Es ermöglicht mir auch etwas jQuery-Komfort, indem ich das Formular nicht erneut suchen muss.

 $('#commentform').submit(function() {
   var $this = $(this);
   $.ajax({
     url: "query.php",
     data:  { 'act': 'contact', 'full_name', $('input[name="full_name"]').val() },
     success: function() {
        $('#contact-form').remove();
        $this.hide().html("Danke!").fadeIn(1500);
     }  
  });
  return false;
}

Answer 5

Dies ist meine Methode, um eine PHP-Funktion direkt über jQuery aufzurufen

// in html file

  $.post("thisisphp.php",{ func:"true", varbl: 'value2' },function(data) {
    $('.thisdiv #subdiv').html(data);
  });    

PHP-Datei thisisphp.php

SelectQuery($q_appointment);

      while($r_appointment = mysql_fetch_array($s_appointment))
      {
        echo ''.$r_appointment['ap_title'].''; 
      }     
    }    

    /* Diese Funktion dient zur Positionierung des Tages */        
    switch($_POST['func']) {
      case 'true':
        getFunc1($_POST['varbl'], 'S0001', $db);
        break;
      default:
        getFunc2($_POST['varbl'], 'S0001', $db);        
    }    
?>