Is there a way to utilize Ajax to send an HTTP POST method and fetch the input field values without relying on jQuery or prototype?

I am making progress towards the solution, but I'm struggling with sending an HTTP POST method using Ajax. Understanding this will also be beneficial for my REST project.

While there are plenty of online resources available that use Jquery or Prototype js framework, I am interested in learning how to do it without relying on those frameworks.

<script type="text/javascript>
        function loadXMLDoc() {
            var xmlhttp = new XMLHttpRequest();
            var out;

            xmlhttp.onreadystatechange = function() {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    out = xmlhttp.responseText;
                    alert(out);
                }
            }
            xmlhttp.open("POST", "/resources/Inventory/2", true);
            xmlhttp.setRequestHeader("Content-type", "application/jason");
            xmlhttp.setRequestHeader("Connection", "close");

            xmlhttp.send(null);
        }

</script>

With traditional non-ajax POST (i.e. page reload or redirect), I can retrieve input values from HTML forms submitted by users on the server side.

However, I am unsure about how to access the values entered in input fields of an HTML form when using Ajax HTTP POST. Is it possible, or am I approaching this incorrectly?

<form method="post" action="">
   <input type="text" name="info1" />
   <button value="click to call js" onclick="loadXMLDoc()">
</form>

Answer №1

Ensure that the POST-data is included in the body of your request, such as "field1=value1&field2=value2".

For more information, visit:

Be sure to verify the content-type!

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

Strategies for Handling a High Volume of API Requests in Node JS

My journey with Node JS began recently, and I had a smooth start. I followed an online tutorial and successfully accepted a GET request in my server.js file. Coming from a Java background, I found myself with a handful of questions that I couldn't fi ...

What steps can be taken to modify this PHP script to send data via AJAX instead?

Currently, I have a contact form that only sends using PHP. I would like to modify it to send using AJAX instead. What is the simplest way to implement this change? <?php //If the form is submitted if(isset($_POST['submit'])) { //Check t ...

Angular CDKScrollable not triggering events

I'm having trouble making the angular CdkScrollable work when creating my own div: <div class="main-section" id="mainsection" #mainsection CdkScrollable> <div class="content" style="height: 300px; backgr ...

The term 'Buffer' is not recognized in the context of react-native

Having trouble using buffer in my react-native app (developed with the expo tool). I have a hex value representing a geography Point like this for example -> 0101000020E61000003868AF3E1E0A494046B3B27DC8F73640 and I'm attempting to decode it into l ...

Chokidar operates smoothly from the command line, but fails to function properly when invoked through the use of 'npm run'

I've implemented a script that monitors Tailwind CSS files using Chokidar. The script works perfectly when I execute the command in the CLI using chokidar 'tailwind.config.js' --initial=true -c 'npm run build-tailwind'. It successf ...

Providing static files in Express while utilizing mustache templates

I'm struggling to configure Express to serve a directory of static mustache files. I have an object with data like this: { a: 'Hello :)' b: 'Goodbye :(' } Along with two files: public/a.html <div>{{a}}</div> pu ...

What to do when encountering a problem with HTML, CSS, and JS while loading a webpage from an SD card to a WebView

I am facing an issue while loading an HTML file from the SD card to a webview. The problem is that the CSS, images, and videos are not loading properly in the webview. Compatible with Android 4.4 KitKat and Chrome version Not compatible with versions belo ...

Ways to determine if a new set of input values duplicates previous rows in an array

My form has an array of input fields. Is there a way to validate each row's inputs and ensure that they all have at least one unique value in any field, preventing identical rows? For example, the 2nd row should only be allowed to have a maximum of ...

In search of a fresh and modern Facebook node template

I've been on the hunt across the internet for a quality node.js Facebook template, but all I seem to stumble upon is this https://github.com/heroku/facebook-template-nodejs. It's okay, but it's built using express 2.4.6 and node 0.6.x. I wan ...

The jQuery click function triggers immediately upon the loading of the page

Despite my best efforts to resolve this issue independently and conduct extensive research on Google, I am still unable to identify the root of the problem. It seems that the click function continues to activate upon page load. Kindly elucidate the under ...

Concealing Vimeo's controls and substituting them with a play/pause toggle button

I'm currently working on implementing the techniques demonstrated in this tutorial (), but unfortunately the code in the fiddle I put together doesn't appear to be functioning correctly. I'm at a loss as to what might be causing this issue. ...

Instancing prohibits me from adjusting the transparency or opacity of each specific child geometry

I am currently working on a project that involves a simple model made up of 1000 instances of spheres. In an effort to optimize performance by reducing the number of draw calls, I decided to implement instancing. However, I encountered an issue with changi ...

Connect radio input's value to object's key within AngularJS

Within my controller, I currently have an object structured as follows: $scope.colors = { green: "Green", yellow: "Yellow", red: "Red" }; I am attempting to dynamically generate radio inputs and then link the input value to the corresponding ...

"I'm receiving the error message 'Unable to authenticate user' when attempting to connect to Supabase through the NextJS tutorial. What could be the

Recently, I embarked on a new project using NextJS and Supabase by following the tutorial available at this link. After completing the initial setup by updating the ".env.example" file to ".env.local" with the Supabase credentials, including creating a ne ...

Froala Editor: retrieve content and send it via an AJAX request

I am having an issue with content placement and saving on the server. So, I have been using: `$(".selector").editable("getHTML");` This is supposed to retrieve the content in HTML format according to the documentation. For example, this is a sample of th ...

A mistake occured: Unable to modify the stack property of [object Object], as it only has a getter method

Encountering an error when attempting to use a service in my component and declaring it in the constructor - TypeError: Cannot set property stack of [object Object] which has only a getter This is the code snippet: import { Component } from '@angula ...

What is the technique for choosing the parent's ID with jQuery?

When a user clicks on any team, I need to retrieve the parent's parent ID. For example, if someone clicks on a Premier League Team, I want to store the ID 2 in a variable called league_id. Here are my attempts so far: Using Closest Method $('u ...

Receiving a NULL value instead of the expected string in the soap request

My mobile application interacts with a SOAP web service using AJAX. The user is required to input their username and password in order to log in. When the login button is clicked, a JavaScript function is triggered to send the data to the web service via ...

The second JSP page fails to load following an AJAX POST request

The following code snippet is found in page1.jsp. $.ajax({ type: "post", url: "page2.jsp", data: newdata, success:function(msg){ return msg; } ...

An issue has arisen where FormData fails to send the value of a

My current issue involves submitting a form using FormData. Interestingly, all input types are functioning as expected except for checkboxes. When the checkbox value is set to 1 or 0, Ajax fails to post it. <form id="update-form" method="PUT" enctype= ...