jquery ajax nicht variable Einstellung POST

Question

Ich bin ratlos. Ich bin mit jQuery und Ajax einige Felder aus einem Formular in der Datenbank zu veröffentlichen.

Dies ist für eine „bearbeiten Form“ - so werden alle Felder mit Daten vorgefüllten sind vorhandene in der MySQL-Datenbank. Ich bin vorbei Eingabe von 4 Feldern, und es funktioniert nur für 2 von ihnen. Hier ist der HTML

<form id="editSubmit" method="post" name="editSubmit" action="" enctype="multipart/form-data">
                    <input type="hidden" id="newsID" name="newsID" value="<?=$newsID;?>">
                    <input type="hidden" id="authorID" name="authorID" value="<?=$news['editorID'];?>">
                    <label for="postTitle">Title</label><br />
                    <input type="text" name="postTitle" id="postTitle" class="text" size="20" value="<?=$postTitle;?>"/><br />
                    <label for="postText">Post Text</label><br />
                    <textarea name="postText" id="postText" class="textarea"><?=$postText;?></textarea>                 <br /><br />
                    <button type="submit">Submit Edit </button>
                    <input type="button" onClick="closeEdit()" value="Cancel">
</form>

Jetzt ist hier der Code, den ich dies auf der Seite schreiben bin mit.

$("form#editSubmit").submit(function() {

// we want to store the values from the form input box, then send via ajax below
var newsID     = $('#newsID').attr('value');
var postTitle     = $('#postTitle').attr('value');
var postText   = $('#postText').attr('value'); 
postText = postText.replace(/&/g,'%26');
var authorID  = $('#authorID').attr('value'); 

$.ajax({
        type: "POST",
        url: "news/editNews.php",
        data: "newsID="+ newsID + "&postTitle="+ postTitle + "&postText=" + postText + "&authorID=" + authorID,
        success: function(){
            $('form#editSubmit').fadeOut('slow');
            $('div.success').fadeIn();
            }
    }); // End .ajax function
return false;
}); //End submit function()

Dieser Code sendet erfolgreich über die authorID und NewSID, aber kein Glück mit dem postTitle oder postText. Ich kann nicht sehen, was ich falsch mache. Vielleicht bin ich etwas fehlt?

Auch ich bin ein total Neuling auf Ajax / jQuery - so würde ich irgendwelche Tipps zu schätzen wissen, wenn etwas im Code seltsam aussieht. Es ist schon eine Menge von Versuch und Irrtum so weit zu kommen.

Answer 1

Für Ihre Texteingaben und Textbereich, mögen Sie die val () -Methode verwenden anstelle von attr ( ‚value‘). Mit attr ( ‚value‘) ist korrekt für versteckte Eingänge. Noch besser ist, nur $ verwenden (diese) .serialize () als Datenparameter.

$("form#editSubmit").submit(function() {

    var $form = $(this);
    $.ajax({
                type: "POST",
                url: "news/editNews.php",
                data: $form.serialize(),
                success: function(){
                        $('form#editSubmit').fadeOut('slow');
                        $('div.success').fadeIn();
                        }
    }); // End .ajax function
    return false;
}); //End submit function()

Answer 2

Tun Sie dies:

$.ajax({
  type: "POST",
  url: "news/editNews.php",
  data: {
    newsID: newsID,
    postTitle: postTitle,
    postText: postText,
    authorID: authorID
  },
  success: function() {
    $('form#editSubmit').fadeOut('slow');
    $('div.success').fadeIn();
  }
});

Lassen Sie jQuery gegen das schwere Heben tun zu entkommen und so weiter. ein anonymes Objekt des data Feld Passing ist der bevorzugte Ansatz.

Auch dies zu tun:

$("...").val();

statt:

$("...").attr("value");

Schließlich statt:

<input type="button" onClick="closeEdit()" value="Cancel">

Je mehr "jquery way" ist:

<input type="button" id="cancel" value="Cancel">

mit:

$(function() {
  $("#cancel").click(closeEdit);
});

Answer 3

Sie dont‘müssen $('form#editSubmit') verwenden - $('#editSubmit') tut einfach gut. Sie können die Werte aus Ihren Feldern mit der val() Funktion abrufen:

var newsID     = $('#newsID').val();
var postTitle     = $('#postTitle').val();
var postText   = $('#postText').val();

Das andere, was ich bemerken ist, dass Ihre Datentyp nicht definiert. Wenn Sie dies als JSON-Objekt senden, würden Sie am besten sein, den Datentyp, content zu geben und Ihre aktuellen Daten als separate Objekteigenschaften darstellen:

$.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                url: "news/editNews.php",
                data: "{'newsID':" newsID + ",'postTitle':'"+ postTitle + "','postText':'" + postText + "','authorID':" + authorID + "}",
                success: function(){
                        $('form#editSubmit').fadeOut('slow');
                        $('div.success').fadeIn();
                        }
        });

Sie können auch die serialize() oder serializeArray() Funktionen suchen.