Several different factors

Question

Several different factors

I need to develop a form that allows users to edit existing comments. The form will display a textarea containing the old comment text and a submit button. My goal is to send the newComment data via ajax to another script. However, I am facing an issue where the alert message only shows the old comment instead of the new one. Can someone provide me with some insight on what might be causing this? It seems like the button is not properly submitting the data, as when I set it to type submit, the website reloads which is something I want to avoid.


function editComment(id, text){
    var commentId = "#" + id;
    $(commentId).replaceWith("<form>\n\
                             <textarea id='newComment'>" + text + "</textarea>\n\
                             <input type='button' id='submit' value='save'>\n\
                             </form>");
    
    $('#submit').click(function() {
        var newComment = document.getElementById('newComment').innerHTML;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
        });                     
    });
}

javascript ajax forms

Answer 1

Answer №1

Consider using .value in place of .innerHTML

function modifyText(id, content){
    var elementId = "#" + id;
    $(elementId).replaceWith("<form>\n\
                          <textarea id='newContent'>" + content + "</textarea>\n\
                          <input type='button' id='saveBtn' value='save'>\n\
                          </form>");

    $('#saveBtn').click(function() {
        var newContent =  document.getElementById('newContent').value;               
        alert(newContent);
        $.ajax({
            type: 'get',
            url: '/modifyContent',
            data: "newContent",
        });                     
    });
}

jsfiddle

Answer 2

Consider using .value in place of .innerHTML

function modifyText(id, content){
    var elementId = "#" + id;
    $(elementId).replaceWith("<form>\n\
                          <textarea id='newContent'>" + content + "</textarea>\n\
                          <input type='button' id='saveBtn' value='save'>\n\
                          </form>");

    $('#saveBtn').click(function() {
        var newContent =  document.getElementById('newContent').value;               
        alert(newContent);
        $.ajax({
            type: 'get',
            url: '/modifyContent',
            data: "newContent",
        });                     
    });
}

jsfiddle

Answer 3

Answer №2

To begin, you should prevent the form from submitting by stopping its default action. In your specific case, the code would appear like this:

$('#submit').on('click', function(e) {
        e.preventDefault();
        var newComment =  document.getElementById('newComment').innerHTML;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
        });                     
    });

Additionally, I suggest placing the code that displays the new comment within the success function of the ajax call. This way, if the call fails for any reason, the new comment will not be shown. Here's an example:

$('#submit').on('click', function() {
        var newComment =  document.getElementById('newComment').innerHTML;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
            success: function (data) {
                $(thisId).replaceWith("<form>\n\
                          <textarea id='newComment'>" + text + "</textarea>\n\
                          <input type='button' id='submit' value='save'>\n\
                          </form>");
            }
        });                     
    });

Furthermore, if you are utilizing jQuery, it makes sense to use it for all operations. For instance:

$('#newComment').val();

Answer 4

To begin, you should prevent the form from submitting by stopping its default action. In your specific case, the code would appear like this:

$('#submit').on('click', function(e) {
        e.preventDefault();
        var newComment =  document.getElementById('newComment').innerHTML;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
        });                     
    });

Additionally, I suggest placing the code that displays the new comment within the success function of the ajax call. This way, if the call fails for any reason, the new comment will not be shown. Here's an example:

$('#submit').on('click', function() {
        var newComment =  document.getElementById('newComment').innerHTML;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
            success: function (data) {
                $(thisId).replaceWith("<form>\n\
                          <textarea id='newComment'>" + text + "</textarea>\n\
                          <input type='button' id='submit' value='save'>\n\
                          </form>");
            }
        });                     
    });

Furthermore, if you are utilizing jQuery, it makes sense to use it for all operations. For instance:

$('#newComment').val();

Answer 5

Answer №3

$(document).on('click','#submit',function() {
        var commentText =  document.getElementById('newComment').innerHTML;               
        alert(commentText);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "commentText",
        });     
       return false;                
    });

Using the on event allows for dynamically creating a submit button, and using return false prevents the submit button from reloading the page.

Answer 6

$(document).on('click','#submit',function() {
        var commentText =  document.getElementById('newComment').innerHTML;               
        alert(commentText);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "commentText",
        });     
       return false;                
    });

Using the on event allows for dynamically creating a submit button, and using return false prevents the submit button from reloading the page.

Answer 7

Answer №4

To prevent the form from reloading, you can use the method of returning false at the end of the function. For example:

return false;

Here is an example:

 $('#submit').click(function() {
            var newComment =  document.getElementById('newComment').innerHTML;               
            alert(newComment);
              $.ajax({
                  type: 'get',
                  url: '/editComment',
                  data: "newComment",
              });
            return false;         
          });

Answer 8

To prevent the form from reloading, you can use the method of returning false at the end of the function. For example:

return false;

Here is an example:

 $('#submit').click(function() {
            var newComment =  document.getElementById('newComment').innerHTML;               
            alert(newComment);
              $.ajax({
                  type: 'get',
                  url: '/editComment',
                  data: "newComment",
              });
            return false;         
          });

Several different factors

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to retrieve an object based on a variable value?

Issue encountered while validating password using regex pattern?

Encountering an Unhandled Reference Issue while Using JavaScript and AJAX

Product pages created with PHP, such as displaying as: Page: [1] 2 3 4

Sending data via Ajax to a separate web page

Synchronize your store by utilizing cookies in the nuxtServerInit function of NuxtJS

Creating a JSON body using a JavaScript function

What is the best way to configure input fields as readonly, except for the one being actively filled by the user

Having trouble with adding the copy to clipboard feature

Implementing Dynamic CSS Styles in AngularJS

Opt for res.render() over res.send() when developing in Node.js

"Enhance Your Text Fields with Angular2 Text Masks for Added Text Formatting

View the selected radio buttons and checkboxes next to each other in real-time before finalizing and submitting

What is the best way to navigate to a specific location on a web page?

What could be causing the issue with retrieving HTTP requests in Nest.js even after configuring the controller?

GraphQL Shield throws an 'Unauthorized' error for a permitted mutation

Struggling to integrate pdfform.js into a React application

What methods can I use to toggle between different divs using navigation buttons?

I am utilizing jQuery's AJAX function with a datatype of HTML to extract a specific portion of the incoming data

The system displayed an 'Error' stating that the variable 'index' is defined in the code but is never actually utilized, resulting in the (no-unused-vars) warning