JQuery Serialized Data Getting Old Form Value

Question

I'm using summernote html text editor and its Insert Image feature. (When user enter an image, I'm sending it to my backend and replace user's img url with mine)

Example:

User input: http://example.com/image.jpg -> upload this image to Amazon S3 -> Update summernote text area's img src="" (mydomain.com/blabla.jpg).

Above logic working well. There is no problem here.

Then I want to send this texarea to my backend php script for db stuff.

But When I serilize and submit form. Ajax sending user's image url. Not replaced image url.

IMAGE UPLOAD

/*GET USER'S IMAGE URL AND SEND IT TO BACKEND. UPLOAD IT, THEN RAPLACE IT'*/
/*THIS PART IS WORKING CORRECTLY */
$('button[data-original-title="Picture"]').click(function(){
    // Set handler on Inset Image button when dialog window is opened
    $('.modal-dialog .note-image-btn').on('click', function(e) {
        var imageUrl = $('.modal-dialog .note-image-url').val();
        var currentTitle = $("#title").val().trim();
        if(currentTitle.length == 0){
            currentTitle = "";
        }
        $.ajax({
            url: "upload.php",
            data: "url="+encodeURIComponent(imageUrl)+"&title="+encodeURIComponent(currentTitle),
            type: "POST",
            dataType: 'json',
            success: function(data) {
                if (typeof data[0] === 'string') {
                    $('img[src="' + imageUrl + '"]').attr('src', data);
                } else {
                    // What to do if image downloading failed
                    window.alert('oops');
                }
            },
            error: function () {
               /* console.log("error");*/
            }
        });
    });
});

FORM SUBMIT WITH AJAX (PROBLEM IS HERE I THINK)

/* SEND SERIALIZED FORM DATA TO BACKEND */
/* PROBLEM IS HERE. $("#form").serialize() CAN'T GET replaced IMAGE URL. */ 
$("#submitButton").on("click",function () {
   $.ajax({
        url: "save-article.php",
        data: $("#form").serialize(),
        type: "POST",
        success: function(data) {
           if(data === "success"){
               $(".messageBox").html('<div class="alert alert-success ic">Thanks, you are redirecting</div>');
           }else if(data === "fail"){
               $(".messageBox").html('<div class="alert alert-danger ic">There was an error</div>');
           }
        },
        error: function (e) {
            console.log(e);
        }
    });*/
});

How can I get changed summernote text area's value and serialize it?

What does the HTML look like? Have you tried replacing the textarea's value with the new value? or using a hidden form field to store the new value? — xadhix
Html part is looking good. I can see replaced image on HTML text editor. It's correct and img src="" contains my domain's value. But when I serialize and submit form which contains summernote textarea, on my backend, I can not see replaced src value. @xadhix — hakiko
Html part is looking good If we are supposed to take your word for that it may be a while before someone bothers to take a guess at this question. — RiggsFolly
@hakiko please try making a jsfiddle. Would make it easier for everybody :) — xadhix

Devel Devel · Accepted Answer · 2018-01-04T02:40:15

Summernote does NOT use the element that you initialise the editor on, it copies the data within that element into its own dynamically created interface. You need to either copy the data from Summernotes editing area (You can use the class target .note-editable). If you haven't already I urge you to check out the Summernote main site for an example of getting the code programmatically. https://summernote.org/getting-started/#get--set-code

JQuery Serialized Data Getting Old Form Value

IMAGE UPLOAD

FORM SUBMIT WITH AJAX (PROBLEM IS HERE I THINK)

1 Answers