Add extra information to a form in a Greasemonkey userscript upon submission using Ajax

In a previous thread that I linked to, I detailed my situation in depth. To save space, I won't repeat all the details here.

However, I have encountered an issue with the answer to my question.

    function form_submit (event) {

var form, bClickNotSubmit;

if (event  &&  event.type == 'click') {
    bClickNotSubmit = true;
    form            = document.getElementById ('quick_reply_form');
}
else {
    bClickNotSubmit = false;
    form            = event ? event.target : this;
}

var arTextareas = form.getElementsByTagName ('textarea');

for (var i = arTextareas.length - 1; i >= 0; i--) {
    var elmTextarea     = arTextareas[i];
    elmTextarea.value   = "[font=Tahoma][color=white]" + elmTextarea.value + "[/color][/font]";
}

if ( ! bClickNotSubmit ) {
    form._submit();
}
    }

    window.addEventListener ('submit', form_submit, true);
    document.getElementById ('quick_reply_submit').addEventListener ('click', form_submit, true);

    HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
    HTMLFormElement.prototype.submit = form_submit;

While this code works perfectly fine in Firefox, it seems there is a glitch in Chrome. The added text appears at the beginning and end of the input field as expected, but it does not happen quickly enough. This results in the form being submitted before the modifications are fully applied.

Does anyone know how to fix this timing issue?

Answer №1

While this code hasn't been tested, you may want to consider making the following change:

if ( ! bClickNotSubmit ) {
    form._submit();
}


Instead of the original, try this modification:

if ( ! bClickNotSubmit ) {
    form._submit();
}
else {
    event.preventDefault ();
    event.stopPropagation ();
    return false;
}

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

Managing the response from a dataless AJAX GET request

I find myself stuck on a seemingly simple issue. I am currently working on refining a basic AJAX GET request function that deals with response handling. There is no data being sent out with the request; instead, the data is managed through the GET URL. Whi ...

Pressing buttons activates key responses

My goal is to create buttons labeled "Correct" and "Incorrect" that trigger key presses of 'c' and 'i'. I am currently working with a jspsych plugin that only accepts key press responses. Although the buttons are displaying properly, I ...

How to send arrays through JSON?

I have some PHP code: $ids = array(1,2,3); $names = array("cat","elephant","cow"); $originalSettings = array ('ids'=>$ids,'names'=>$names); $jsonSettings = json_encode($originalSettings); echo $jsonSettings; Here ...

Show information in a text field from JSON in SAPUI5

How can I populate a text box with data from JSON using SAPUI5? // Sample JSON data var data = { firstName: "John", lastName: "Doe", birthday: {day:01,month:05,year:1982}, address:[{city:"Heidelberg"}], enabled: true }; // Create a JS ...

Efficiently handling large databases and complex data manipulation in Django

My function performs heavy database queries on multiple objects: def some_func(user): group1 = user.manytomanyfield1.all() allinstances = [] for item in group1: allinstances += group1.manytomanyfield2.all() After creating the 'al ...

What is the best way to create pages that showcase 10 posts each?

Currently, I am facing a challenge with displaying 100 posts using the Fetch API on one single page. I am looking for a way to create separate pages where each page would showcase only 10 posts. Below is my existing JavaScript code: fetch('htt ...

Utilizing Multiple MongoDB Connections in a Node.js Application

I am facing an interesting challenge in my Node.js project where I need to connect multiple MongoDB databases. Let me share with you my current setup and the issue that is causing me some trouble. Node Version: v6.12.1 Express.js Version: 4.16.2 Mongoos ...

Having trouble making changes to MUI TextFields once they've been filled in with data from an

My goal is to make MUI TextFields editable even after they have been filled with data from an API. The TextFields are getting populated successfully. I attempted using an onChange function, but it only allowed one additional character to be entered befor ...

Is it possible to clean all the fields within a specific form simultaneously?

Currently, I am utilizing express-validator for form validation and sanitization on the server side. Many of the validation and sanitization rules are consistent across multiple fields. For instance, I adhere to the following format: check('field nam ...

Removing HTML tags within a specific div tag using JavaScript

Check out this HTML snippet: <div> 756 <span></span> </div> I'm looking to use JavaScript to extract the value 756 from the div element and add 1 to it. Any suggestions on how to accurately remove the <span> tag ...

Issue obtaining information from Firestore and presenting it visually on the screen

I have been working on developing a website using Angular and Firebase. The site allows different users to create accounts, and registered users can add contacts to the Firestore database. However, I have encountered a problem where the added contact info ...

What other options are available for achieving the same functionality as FormData.delete() given its low level of support?

When building my website, I utilized the FormData.delete() method to exclude specific form fields before sending data to the server. However, I encountered a setback as this method is not supported on various browsers, including Safari. Therefore, I am in ...

Issues with retrieving a result object from a MySQL query in NodeJS

I've been working on creating a logging system in NodeJS with a MySQL database. To establish the connection, I use the following code: const con = mysql.createConnection({ host : 'localhost', user : 'dbuser', passwor ...

Improve performance by rendering table rows without using binding techniques

My current project involves using Angular 1.4, where I have encountered performance challenges with ng-repeat while rendering a large number of rows, such as for tables. I am curious if there is an efficient way to use ng-repeat or explore different iterat ...

Modify the font style of the recommended actions buttons within the webchat interface

I am attempting to modify the font of the "suggested actions" button similar to how it is demonstrated in this reference for changing the font of the bubble text: https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md In the provided exa ...

Switching the border of a div that holds a radio button upon being selected

I have a piece of code that I use to select a radio button when clicking anywhere within a div, which represents a product photo. To make it clear for the customer, I want to add a border around the selected product. Here is the initial code: <script t ...

Issues with Angular Http Subscribe functionality not functioning as expected

Hello, in my Angular Component, I have the following code in one of my methods: this.http.get("http://localhost:8080/poeples") .map( resp => { resp = resp.json(); } ).subscribe( (data) => { this.poeples = data; }, err => console.log( ...

Incorporate a button within the input field

Looking to customize my search form with the search button on the right side, similar to this: https://i.sstatic.net/lwmig.png Below is the code for my current form setup: <form action="search.php" method="post" class="index-search-form"> ...

What is the best way to exit a node callback and redirect back to mongoDB?

I'm a bit confused about how the callback is working in my code. I have this script where I want to return newpost_template if the subject name is invalid. It seems like my logic is correct, but for some reason it's not returning as expected. The ...

Tips on how to resize, position, and scale an object effectively using three.js

Recently delving into the world of three.js, I decided to experiment with importing models using the gltf loader. Upon loading a specific 3D model, my scene transformed to showcase a mesmerizing view, as depicted https://i.sstatic.net/l4jNy.png. However, ...