"Enhance Your Form with Ajax Submission using NicEdit

Currently, I am utilizing nicEditor for a project and aiming to submit the content using jQuery from the plugin. Below is the code snippet:

<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor().panelInstance('txt1');
});
</script>


<script>
$(document).ready(function()
{
    $('#submit-form').on('submit', function(e)
    {
        e.preventDefault();
        $('#submit').attr('disabled', ''); // disable upload button
        //show uploading message

        $(this).ajaxSubmit({
        target: '#output-login',
        success:  afterSuccess //call function after success
        });
    });
});

function afterSuccess()
{
    $('#submit-form').resetForm();  // reset form
    $('#submit').removeAttr('disabled'); //enable submit button
    $('#loadding').html('');
}
</script>


<form id="submit-form" action="submit.php" method="post">

<input type="text" id="title" name="title" />

<textarea id="txt1" name="txt1" ></textarea>

<input type="submit" id="submit" value="Submit"/></div>

</form>

Utilizing

jQuery from plugin: http://malsup.com/jquery/form/

nicEdit:

All functions correctly except that anything in the nicEdit doesn't appear to be posting. If I remove the nicEdit text area, it will post normally. Could anyone point out the issue? Your assistance is highly appreciated.

Answer №1

Give this a shot:

// Extract data from NICEditors
$('textarea').each(function () {
    var id_nic = $(this).attr('id');
    var nic = nicEditors.findEditor(id_nic);
    if (nic) nic.saveContent();
});             

Answer №2

My suggestion is to encode the HTML of the contenteditable div using nicEdit before passing it to the textarea for form submission.

$(document).ready(function()
{
    $('#submit-form').on('submit', function(e)
    {
        e.preventDefault();
        $('#submit').attr('disabled', ''); // disable submission button
        //show message indicating upload in progress

        var encodedHTML = String($('.nicEdit-main').html())
                .replace(/&/g, '&amp;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');

        $('#txt1').val(encodedHTML);

        $(this).ajaxSubmit({
            target: '#output-login',
            success: afterSuccess //execute function after successful submission
        });
    });
});

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

Is there a way to retrieve the response body in Express framework?

In my NodeJS API using Express, I am attempting to save the response body of a request. To achieve this, I have created two middleware functions. app.use((req, res,next) => { res.status(404).json({ errors: [{ field: "url", ...

Tips for creating a unit test for a React Component utilizing the useEffect hook and asynchronous fetch

Starting from a basic create-react-app setup, I am diving into the world of unit testing to enhance my skills. The goal is to update the main App component to fetch data from a local node API and display it as a string response. However, I'm encounter ...

Adding div elements using checkbox switch

In this code snippet, my aim is to display costs based on checkbox selection and generate corresponding totals in the bottom row when the checkboxes are toggled. The goal is to allow users to choose relevant items and have the total cost calculated accordi ...

Looping through a sequence and calling createDocumentFragment() each time

Is the createDocumentFragment() function being utilized in this code snippet? I'm currently trying to understand and modify this code. However, I'm unclear on how it operates as the for loop doesn't seem to reference tableFrag. Any thoughts ...

Insert an HTML element or Angular component dynamically when a specific function is called in an Angular application

Currently, I am working on a component that contains a button connected to a function in the .ts file. My goal is to have this function add an HTML element or make it visible when the button is clicked. Specifically, I would like a dynamic <div> elem ...

A guide on converting a Javascript datetime to a C# DateTime parameter

In a previous question that I asked on StackOverflow, I mentioned that I was able to retrieve my values successfully as the object was no longer null. The object contains a DateTime property named CreatedOn, which I am sending from JavaScript using new Dat ...

The process of rendering children elements in React

I have a question about managing children components in React. While there are resources available explaining this concept, I believe a more detailed explanation would be helpful. Let's consider the structure of my React component tree, which looks l ...

AJAX request stops functioning once the page is reloaded

As a beginner in JavaScript, I am facing an issue with my AJAX call. I have set up the call to process a back-end function when a button is clicked and expect to receive a response once the function is completed. However, whenever I refresh the page whil ...

I'd like to know how to retrieve the start and end dates of a specific month using JavaScript

How can I retrieve the start and end date of the current month? const currentDate = new Date(); const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); const endOfMonth = new Date(currentDate.getFullYear(), currentD ...

Steps to transfer extra files such as config/config.yaml to the .next directory

I have the following folder structure for my NextJS project: _posts/ components/ hooks/ config/ <--- includes config.yaml file for the server pages/ public/ .env.local ... yarn build successfully copies all dependencies except for the config/ folder. ...

Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code. Currently, I'm working on replicating a website for practice. I have created a nav bar and a drop ...

PHP Email Request Denied with 500 Internal Server Error Response

I am currently working on designing a contact form for a website. I have implemented a jQuery .click() function for an HTML button and utilized ajax to invoke the email.php code. However, when I click the button, the console shows the error message: 500 ( ...

Transforming Angularjs into Vuejs

I am currently transitioning a chat application from AngularJS to VueJS, but I am facing some challenges as I am not very familiar with AngularJS. Unfortunately, there is a lack of comprehensive resources available for me to gain a better understanding of ...

Checking the length of user input with JavaScript

To ensure that the user enters at least 4 letters in a text box and show an error if they don't, I need help with the following code. It is partially working but currently allows submission even after showing the error message. I want to prevent subm ...

Enhancing ajax requests with headers in Ember.js

My goal is to configure request headers for my emberjs application. However, when setting it up in the initializer, the client_id appears as [object Object] instead of the actual value. This is the initializer that runs when the application starts. Apikey ...

Differences in behavior of multiple select with track by in Angular versions above 1.4.x

I recently upgraded my product from Angular 1.2.x to 1.4.x. Since updating to angularjs 1.4.x, I've encountered an issue: What I have: I included code snippets for both angular 1.2.0 and 1.4.8. You can check out the comparison on JSFIDDLE. Explanat ...

What is the process of transferring information from one window to another window?

Is there a way to transfer data between two windows? In my parent window, I have a button that redirects to another page with a success button. When the success button is clicked on the child window, I want to display "success" text on the parent window. ...

Using the `implode()` function in PHP to concatenate values for a MySQL query

Recently, I ran into an issue while using the implode function in PHP. <?php $insertValues[] = "(default,'{$y}', '{$p}', '{$o}', '{$i}', '{$u}','AMM-40','test')"; $query_status = ...

Embed the Facebook Share Button using iFrames

I currently have a website that showcases news articles in a list format using PHP and MySQL. You can check it out here: My goal is to incorporate a Facebook share button/link on each article so that users can easily share individual posts on their own Fa ...

What is the process for obtaining a list of login stems for specified backends using python-social-auth?

I am currently working on a Django project that is using django-rest-framework as the backend for a BackboneJS application. My goal is to incorporate python-social-auth for authentication via AJAX. My next step involves sending a list of possible login UR ...