Bug occurring when inserting Ajax content into a field without refreshing the second page

Recently, I followed a tutorial on how to submit a form without refreshing the page using jQuery. Instead of using PHP as recommended in the tutorial, I decided to create my own classic ASP page. However, I encountered a problem - when I try to input spaces into the text boxes, they do not show up properly. For example, entering "bill gates" in the name field displays as "billgates".

Does anyone have any ideas on why this is happening?

$(".btn22").bind("click", function() {
var name = $("input#yourname").val();
if (name === "") {
$("input#yourname").focus();
   return false;
}
var email = $("input#youremail").val();
if (email === "") {
$("input#youremail").focus();
    return false;
}
var message5 = $("#limitedtextarea").text();
if (message5 === "") {
    $("#limitedtextarea").focus();
    return false;
}
var sku5 = $("#sku5").val();
var dataString = 'yourname='+ name + '&youremail=' + email + '&message=' + message5 + '&sku5=' + sku5;
$.ajax({
    type: "POST",
    url: "actions/newreview.asp",
    data: dataString,
    success: function() {
    $('#contact_form').html("<div id='message'></div>");
    $('#message').html("<br><br><p class='big red'>Thanks for the review.</p>")
    .hide()
    .fadeIn(1500, function() {
        $('#message');
    });
}
});
return false;
});
});
'asp looks like this

name = request.form("yourname")
email = request.form("youremail")
sku = request.form("sku5")
comment = request.form("message")
then inserts names into a database, but it has already gotten rid of the spaces before this point

Answer №1

In order to accurately assess the issue, please provide us with the code you are using. Have you made sure to set the input type as 'text'?

Answer №2

It appears that you are manually encoding the form data yourself. While this may not be causing the issue, it could potentially be a factor. jQuery actually has a built-in utility that can handle this for you.

dataString = $("#JqAjaxForm").serialize();

For more information, please refer to: http://api.jquery.com/serialize/

Here are some additional suggestions to consider:

  • You might want to create a JavaScript object instead of relying solely on form encoding. If you specify dataType:json in the post() method, jQuery will automatically serialize it into JSON format.

  • Consider using JavaScript within your classic ASP page. Using the same language on both the client (browser) and server side could simplify things for you.

Answer №3

Solved the issue by escaping the name variable and adding %20 in and then removing it to add spaces in my ASP code.

Appreciate all the help!

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

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

I utilize the DataTables library from https://datatables.net/ to create sortable and searchable tables on my website. However, my table becomes too wide due to the numerous columns it contains. I am looking for a way to condense the width by merging relate ...

Arrange a collection of objects by two criteria: the end time, followed by the status in accordance with the specified array order if the end times are equal

Is this the best method to arrange data by using infinity? I gave it a try but it doesn't quite meet my requirements. data = [{ "status": "Accepted", "endTime": "" }, { "status": "New", ...

Effectively handling server downtime with AngularJS $resource

I've implemented this code in my services.js file: angular.module('appServices', ['ngResource']). factory('User',function ($resource) { return $resource('http://localhost\\:3001/api/user/:id', { ...

Using Express.js with synchronous functions can cause the web application to freeze

While developing an app using Express, I realized that I made a mistake regarding my usage of Promises. Here is the code in module.js: module.exports = function(arguments){ for(let k =1; k < something.length; k++){ let options = { & ...

The updateDoc function does not allow for using a variable as a field name

I am currently using the updateDoc function from Firestore and VueJs as my framework. I am attempting to create a nested document with the user input (member_name) as a field name. However, I am encountering an error stating "Unexpected keyword 'this& ...

Revitalizing and rerouting page upon button click

The issue at hand is: When the "Post now" button is clicked, the modal with the filled form still appears. If the button is clicked again, it adds the same data repeatedly. I aim to have the page refresh and navigate to a link containing the prediction d ...

What is causing the jQuery functions to not be executed in sequence?

Whenever I click the Start button, my function is supposed to run a cycle for 10 iterations. Each iteration generates a number between 1 and 7, which then triggers a series of functions on different objects. The problem is that these functions are not runn ...

Guide to utilizing jquery within node.js

Can anyone assist me with using jQuery in Node.js? I have the following code: const jsdom = require("jsdom"); const { JSDOM } = jsdom; const { window } = new JSDOM('<!DOCTYPE html>'); const $ = require('jquery')(window); var con ...

What is the best way to retrieve the returned value from a jQuery GET call?

I was looking to implement something along these lines: function example(); var result = example(); if(result == 1) However, in my example function, I am making a Get request and using a callback that is not returning the value correctly as the ...

Creating Bootstrap Popover dynamically on a jQuery DataTable is a straightforward process that can enhance user experience

I am currently populating a table with data retrieved from an ajax call. The filling process is done through the use of append method as shown below: var table = //something //loop through ajax response objects table.append('<tr><td>&apo ...

Update a div with ajax

I am looking to refresh a select element (identified by its id) once the ajax call has been successfully completed. However, I am unsure of how to go about this. Ajax Function : $('#insertForm').on('click', function(){ var form_inti ...

Enhancing jQuery functionality: Ensuring newly added elements are aware of existing functions

I need assistance with my HTML table. Each row (tr) contains a value, for example 200$, and a delete button. How can I ensure that each new row added automatically knows the recent functions without having to call them every time? $(function () { $(&ap ...

Sort various divs using a list

I have multiple divs containing different content. On the left side, there is a list of various categories. When a category is clicked, I want to display the corresponding div for that category. Initially, I want the main category to be loaded, with no opt ...

Experiencing repeated log outs following database updates in PHP

On a recent post, I discussed the issue of deleting multiple rows in the database and encountered an unexpected problem after updating multiple rows. It seems that upon database update and page refresh, I am mysteriously logged out without understanding wh ...

What's the best way to organize a list while implementing List Rendering in VueJS?

Currently, I am working on List Rendering in Vue2. The list is rendering correctly, but it appears ordered based on the data arrangement in the array. For better organization, I need to sort each item alphabetically by title. However, I am facing difficult ...

Click the Button to Trigger Database Update

I have been struggling with updating a dynamic table that allows inline editing and dynamically adding rows. My goal is to click a save button that triggers an UPDATE query to modify the database. Unfortunately, I can't seem to figure it out on my own ...

Can you provide a step-by-step guide on creating a JSONP Ajax request using only vanilla

// Performing an ajax request in jQuery $.ajax( { url : '', data: {}, dataType:'jsonp', jsonpCallback: 'callbackName', type: 'post' ,success:function (data) { console.log('ok'); }, ...

The jQuery function may encounter issues when trying to target elements within an appended HTML form

I am encountering a couple of issues. I have 2 separate JQuery functions, one for appending content and the other for displaying the selected file's name. FUNCTION 1 <script> jQuery( document ).ready(function( $ ) { $("input[name ...

Require assistance with handling Ajax when a function with an Ajax call is repeatedly invoked

I am seeking guidance with ajax as I am still new to it. A problem arises when the same ajax call is made multiple times before the previous one completes its execution, resulting in an empty pop-up on the user interface. How can this issue be resolved? Es ...

Merge the JSON data with the Node.js/Express.js response

Whenever I input somedomain.com/some_api_url?_var1=1 in a browser, the response that I receive is {"1":"descriptive string"}. In this JSON response, the index 1 can vary from 1 to n, and the "descriptive string" summarizes what the index represents. I am ...