Troubleshooting a problem with Ajax code

Check out the following code snippet:

function add_post() {
    if (document.getElementById("blogTitle").value.trim() == "") {
        alert("Don't forget to insert a Blog Title!");
        return;
    }

    if(CKEDITOR.instances.editor1.getData() == "") {
        alert("Please include some details in your blog post");
        return;
    }

    var data = new FormData(document.getElementById("file_add"));
    var xhr = new XMLHttpRequest();
    var de=CKEDITOR.instances.editor1.getData();  
    xhr.open("POST", "upload.php", false)
    xhr.send(data + "&de=" + de);

    if (xhr.status == 200) { 
        alert(xhr.responseText);
        if(xhr.responseText == 2) {
            document.getElementById("res").innerHTML="Remember to Upload The File";     
        }

        if(xhr.responseText == 1) {
            document.getElementById("res").innerHTML="Your Blog has been Created!"; 
            document.getElementById("blogTitle").value="";
            document.getElementById("editor1").value="";   
        }
    }
    else {
        output.innerHTML += "An error with status " + xhr.status + " occurred during file upload.<br />";
    }  
}

I am utilizing CKEDITOR within a textarea to capture formatted text input. By using

CKEDITOR.instances.editor1.getData()
, I can retrieve the value entered into the textarea. Additionally, I chose to use FormData for uploading forms and files via AJAX. While attempting to send the data, there were difficulties in successfully transmitting it. To address this issue, I have stored the textarea value in the variable de.

Answer №1

It's crucial to remember that your form data object is not a string and cannot be concatenated with additional data using +.

Make the following substitution:

xhr.send(data+"&de="+de);

with

data.append("de", de);
xhr.send(data);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause. Below is the content of my app.js file: import './App.css'; import {BrowserRouter as Router, Routes, Route} from ...

Bulma Steps failing to advance to the next step despite clicking submit

I am currently working on implementing Buefy Steps in a Vue project. The Buefy steps are functioning correctly, but I am facing an issue where the 'Submit' button does not progress to the next step (e.g., from "Account" to "Profile"). App.vue: & ...

The seamless interchange of data between Vue.js components

Seeking a dynamic library or hook for loosely-coupled data exchange between related components. I envision something along the lines of: const { info, setInfo } = utilizeStorage('any.unique-identifier') I anticipate 'info' to be a ref ...

Employing a combination of Mysql and Ajax to dynamically fill out a form based on the values entered

I am facing a challenge in populating a fairly extensive form with around 40 fields with data from a MySQL database. Generating the JSON array from the query is not an issue for me. echo json_encode($row); The objective I aim to accomplish seems to be u ...

Unleash the power of jQuery by incorporating the Ajax functionality with a hover option to enhance user interactivity. Utilize the .ajax

On my website, I have a calendar displayed with dates like "11/29/2014" stored in an attribute called "data-date". The goal is to check the server for a log file corresponding to that date and change the CSS of the div on mouse hover. Here is the current ...

What is the most efficient method for delivering a script along with the initial index.html file?

Currently, I have my JavaScript code inline in the index.html file, but I want to move it to a separate file. <script> ... my code </script> After doing some research, I found that there are server side includes which seem outdated. There are ...

Tips for sending a file via Ajax using the POST method?

While there is no shortage of information on this topic, I am interested in discussing the process of uploading a file to a server using Ajax or a similar method. # HTML <form method="post" id="Form" enctype="multipart/form-data"> {% csrf_token %} ...

Employ select elements with the table sorter plugin and set a default value

When my table is loaded, I want to display the default selection in the drop-down boxes. Here's the code I have so far: //get info for defect dropdown var myselectoptions = ''; for(y=0;y<data.defect2.length; y++) ...

The Vue-i18n global method this.$t is not functioning within a function

Global vue-I18n Definition: Vue.use(VueI18n); export default new VueI18n({ locale: process.env.VUE_APP_I18N_LOCALE || 'cs', fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'cs', messages: loadLocaleMessages(), }); Th ...

Incorporating a new button into the edit menu of a SharePoint 2010 webpart

Can a link or button be included in the menu that pops up when the top left corner of a web part in sharepoint 2010 is clicked on? ...

Verifying the presence of JSON data loaded directly from the server to decide whether the factory should initiate a request to retrieve the same data if it is not already available

I am currently developing an Angular application that is designed to load a JSON object from the server on page load, either freshly or if it doesn't already exist. I'm wondering how one could use a service or factory to check for the presence of ...

JavaScript - Issues with Cookie Setting

I created a function for setting cookies: function storeCookie(cname, cvalue, exdays){ var d = new Date(); d.setTime(d.getTime() + (1000*60*60*24*exdays)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + ...

Can someone confirm if a user has administrator privileges?

Is it feasible to determine if members of a discord server possess administrator privileges in a looping structure? I am aiming to prohibit individuals who hold a role below my bot in the server that belongs to me and my companions. How can I achieve this? ...

What is the best way to determine which <li> element was clicked in JQuery?

Having trouble with jQuery Ajax as I try to add a piece of HTML code on the page. Here is an example of the code: <ul id="income"> <li id="1"><p>a1</p></li> <li id="2"><p>a2</p></li> <li id="3"> ...

Utilizing npm scripts to compress all HTML files within a directory, including its subdirectories

I am looking for a way to compress all the files with a .html extension in a particular folder, including any subfolders, using a script called npm run. Ideally, I would like the original .html files to be replaced with the minified versions, but creating ...

Encountering a react error following the installation of FontAwesome via npm

I successfully installed fontawesome by visiting their official website and following the steps below: 1. npm i --save @fortawesome/fontawesome-svg-core 2. npm install --save @fortawesome/free-solid-svg-icons 3. npm install --save @fortawesome/react-fon ...

Steps to Delete a Table Row With a Cell Containing Certain Text

Here is the markup I am working with that includes SPAN >> Table >> TR >> TD: https://i.sstatic.net/MnTCa.png Now, I am looking to target and remove any TR element that contains a TD with the word "Question" inside a <nobr> tag. C ...

Unable to fetch data using getJSON method

objecten.js var objectData = [ { image: 'gallery/objecten/bear.jpg', thumb: 'gallery/objecten/bear.jpg', title: 'my first image', description: 'Lorem ipsum caption&apos ...

Issue with reverseKey functionality in VueJS

Currently, I am referencing the reverseKey documentation available at enter link description here Below is the code in question: <div class="one-table-row row-with-data row" v-for="message in messages | orderBy orderKey reverse |filterBy searchKey | o ...

I am facing an issue with my if statement not functioning properly when verifying a radio input

Trying to validate radio input to confirm if it's the correct answer, but encountering an issue where it skips the line if (answer == allQuestions[q].correctAnswer). Here is the complete code: https://jsfiddle.net/alcatel/sopfmevh/1/ for (let k = 0; ...