Ways to transfer textfield input from HTML to servlet without the use of forms

I am currently developing an e-commerce website and I want to offer users the option to select a different shipping address:

Shipping Details

         <input type="button" value="Same as billing address"   style="color: #FFFFFF;" class="link-style" onclick="test();"  />
             <table cellpadding="20">
                    <tr>
                        <td >Name : * </td>
                        <td><input type="text" id="name" name="name" /></td>

                    </tr>
                     <tr>
                        <td>Contact Number : </td>
                        <td><input type="text" name="cno" id="cno"  /></td>
                    </tr>
                    <tr>
                        <td>Address : * </td>
                        <td><input type="text" name="address "id="address" /></td>
                    </tr>

                    <tr>
                        <td>City : *</td>
                        <td><input type="text" name="city" id="city"  /></td>
                    </tr>
                    <tr>
                        <td>State : * </td>
                        <td><input type="text" name="state" id="state" /></td>
                    </tr>
                    <tr>
                        <td>Country : *</td>
                        <td><input type="text" name="country" id="country" /></td>
                    </tr>


                </table>                

If the user clicks on the button, all fields will be disabled. Otherwise, they can provide a different shipping address. I prefer not to use forms in this scenario. How can I pass these parameters to a JSP or servlet using session or post method? I have attempted AJAX but have encountered difficulties with implementation.

function setValue() {
    alert("hi");
    var name = document.getElementById("name").value;
    var cno = document.getElementById("cno").value;
    var address = document.getElementById("address").value;
    var city = document.getElementById("city").value;
    var state = document.getElementById("state").value;
    var country = document.getElementById("country").value;
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.open("post", "test.jsp", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-      urlencoded");
    xmlhttp.send("name=" + name);
    xmlhttp.send("cno=" + cno);
    xmlhttp.send("address=" + address);
    xmlhttp.send("city=" + city);
    xmlhttp.send("state=" + state);
    xmlhttp.send("country=" + country);



}

The test.jsp page is not receiving the parameters.

Answer №1

It is essential to remember that you should only invoke the xmlhttp.send function once, as it necessitates concatenating the request parameters.

 xmlhttp.send("name="+name+"&cno="+cno+"&address="+address+"&city="+city+"&state=" + state + "&country="+country);

Answer №2

For best results, follow these steps:

var infoToSubmit='{"name":"'+name+'","cno":"'+cno+'","address":"'+address+'","city":"'+city+'","state":"'+state+'","country":"'+country+'"}';

$.ajax({
        type: "POST",
        url: your base_url,
        data: {infoToSubmit:infoToSubmit,module :'your module name'},
        dataType: "json",
        async:false,
        success: function(response)
        {
             console.log(response);
        }
    });

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

Tips for interfacing with Angular ColorPicker elements using Selenium WebDriver

Is there a way to automate interactions with Angular ColorPicker components using Selenium WebDriver? Since there is no text field input for hex codes, it relies solely on mouse clicks. For reference, you can check out this example: https://www.primeface ...

Is there a way to create a sequence where text fades in only after the previous text has completely faded out?

Currently, I am using JQuery to create a continuous slideshow of text values. However, after some time, multiple texts start to display simultaneously, indicating a timing issue. Even when hidden, the problem persists. My code includes 3 strings of text. ...

Angular renders HTML elements

Greetings! I am currently experimenting with using AngularJS for the frontend and Wordpress as the backend of my project. To load content from Wordpress into Angular, I am utilizing a JSON wordpress plugin along with making $http requests. The content th ...

What is causing the failure in retrieving the smallest number from this array?

The maximum value should be 9.99, and the minimum value should be 6.88 let arr = [["2019","00","01", 9.99], ["2018","00","01", 9.32], ["2017","00","01", 6.88]] let max = Math.max(Number(...arr.map((o) => { return o[3] }))); //9.99 let min = Math.mi ...

Deduce the generic types of conditional return based on object property

My goal is to determine the generic type of Model for each property. Currently, everything is displaying as unknown[] instead of the desired types outlined in the comments below. playground class Model<T> { x?: T } type ArgumentType<T> = T ...

The command driver.quit() triggers an error in Firefox, causing the browser to crash

When the driver.quit() method is called, it causes Firefox to stop working. Although the tests do not fail, every time driver.quit is executed, the browser crashes as seen in the image below. This is my code snippet: public void quitDriver() throws E ...

Issue encountered while trying to render an item from a state array in React

I encountered an issue with retrieving state data within the render function. Everything seems to work fine and displays the array when I utilize console.log(items) However, attempting to access the first item from the array results in an error console. ...

Ensuring Next.js doesn't create specific files at certain paths

Currently in the process of developing a custom e-commerce extension using Node.js, Koa, React, and Next.js for various platforms like Shopify and BigCommerce. Within the codebase, I'm faced with the challenge of handling URL methods that should stri ...

Ensuring that each object in a list contains an optional key if any one object includes it is a task handled by Joi validation

My dataset includes various objects that must have certain keys: Date, Time, Price I am looking to include an optional key "order" for these objects. If one of them has the "order" key, then they all should. Is there a way to validate this using joi? ...

How can you retrieve the index of the outer repeater item within nested ng-repeaters in AngularJS?

If I have multiple ng-repeat loops nested within each other like in the following example: <div ng-repeat="outeritem in outerobject"> <div ng-repeat="inneritem in innerobject" ng-click="function(inneritem.key, $index)"></div> <d ...

Order objects in a JavaScript array

Recently, I came across a list of student data fetched from an API: const Studentdata = { "StudentName1": { "active": true, "gender": "male" }, "StudentName2": { "active": false, "gender": "male" }, "S ...

Best method for integrating an applet

How should the Applet be included in a webpage? I attempted to enable Applets using JavaScript. This method fails in Safari 5.0.1 on Leopard, although it worked on Snow Leopard's Safari. Considering we do not support outdated browsers, I thought of ...

Exploring Elements within a LinkedList

In the process of developing a shopping program that involves creating customer objects with unique customer numbers assigned at the time of creation. Overview of Classes. There are two main classes involved in this project; Customer and CustomerFactory. ...

Pattern matching for a string with numerous repetitions using Regular Expressions

There's a [tree] and a cat and a [dog] and a [car] too. I am looking to find the words inside each set of square brackets. The resulting array will be tree, dog, car My attempt at using match(/\[(.*)\]/g) didn't work as expected. It ...

Utilizing JSON Parsing in JavaScript and jQuery

func({ "query": { "count": 1, "created": "2013-05-03T06:20:01Z", "lang": "en-US", "diagnostics": { "publiclyCallable": "true", "cache": { "execution-start-time": "32", "execution-stop-time": "32", "exe ...

Vue hover effect not triggering updates to the state

I have been attempting to attach a v-mouseover directive to a bootstrap Vue component called b-list-group-item in the following code snippet. <b-row> <b-col cols="3"> <b-list-group> <b-list-group-ite ...

Troubleshooting problem with rotation and text geometry label on AxisHelper

Within my main scene, there is a sphere along with a subwindow located in the bottom right corner where I have displayed the (x,y,z) axis of the main scene. In this specific subwindow, I am aiming to label each axis as "X", "Y", and "Z" at the end of each ...

"Sharing fields between mongoose models: How can I reference a field from one model in another

I am currently working on linking specific fields from the User model to the Card schema using the username as a reference point. Let me provide an example using my Card schema: const CardSchema = new mongoose.Schema({ text: { type: String, ...

At a certain point, the scrolling iframe within the mobile app suddenly jumps back to the top of the page

Looking for some assistance with my HTML code. Here it is: <header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a> <h1 class="title">Page</h1> </header> <div style="overflow:auto;-we ...

Most efficient method for dynamically changing HTML content with JavaScript

Can anyone provide guidance on how to switch HTML content using JavaScript? For example: if($sid == 0) {insert one HTML code} else {insert another HTML code} Which method is preferable - LESS, jQuery, CSS3, etc? ...