Error with WooCommerce checkout causing input values to disappear upon clicking or submitting

I am facing an issue where I need to set #billing-postcode to a specific value using a JS script.

When I input jQuery('#billing-postcode').val('2222') on the checkout page, the input displays the value 2222 with the Postcode label above it. However, clicking on the postcode input clears the value.

I attempted adding the is-active class to the parent element, which resolved the problem of displaying the label above the field value, but clicking on the input still resulted in the value being cleared.

Upon checking the DOM, I noticed that no value was set, so I added the attribute value with 2222, and this time, the value remained.

The issue persists as submitting the form empties the postcode field, causing the value to be lost.

I also tried posting to /wp-json/wc/store/v1/batch?_locale=user, path /wc/store/v1/cart/update-customer, which maintained the value upon refresh. However, modifying the value from the console caused it to flicker between the old and new values.

[UPDATE] Disabling all event listeners on input fields resolved the issue, but created new problems such as live validation not working and countries dropdown malfunctioning.

Has anyone encountered this problem and discovered a solution?

**In a clean WP installation without additional plugins and using the default theme, the field value remains unfilled.**

  • Adding is-active class to the parent
  • Posting value to /wp-json/wc/store/v1/batch?_locale=user
  • Removing all event listeners
  • Setting the value via attribute

Answer №1

When utilizing the checkout block, experiment with this code:

wp.data.dispatch('wc/store/cart').setShippingAddress({'postcode': '12345' });

Answer №2

Try a different approach to assign a value to the input field. Instead of directly using jQuery's .val() method, consider utilizing the setAttribute method to define the value attribute of the input field. By doing so, the value will remain in the field even if there are attached event listeners or validation scripts.

Here is an illustration of how you can assign the value through the setAttribute method.

document.getElementById('billing-postcode').setAttribute('value', '2222');

This action should successfully assign the value to the input field without triggering any associated event listeners or validation scripts that might be causing complications.

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

The issue I'm facing with the change handler for the semantic-ui-react checkbox in a React+Typescript project

Hey there! I'm currently facing an issue with two semantic-ui-react checkboxes. Whenever I try to attach change handlers to them, I end up getting a value of 'undefined' when I console log it. My goal is to retrieve the values of both check ...

What is the best method for selecting or deselecting all checkboxes except for one using a single checkbox in angularjs

$scope.checkAll = function() { if ($scope.selectedAll) { $scope.selectedAll = true; } else { $scope.selectedAll = false; } angular.forEach($scope.MyProducts, function(item) { item.Selected = $scope.selectedAll; }); /*});*/ } <di ...

Determine all subarrays within two integer arrays whose sum matches a specified target number

Given two integer arrays, find all subarrays whose sum equals a specified target number. For example, if array1 = [1,2,3,4] and array2 = [7,3,4], with the sumToFind being 5, the function findSubArrays(array1, array2, num) should output [[1,4],[2,3]]. I in ...

Is it considered acceptable to house a myriad of variables within the token object in NodeJS?

Currently working on implementing authentication with NodeJS, expressJS, mongodb and React Native. Is it acceptable to include multiple variables in the token object like shown in this example? const token = jwt.sign( { userId: user. ...

FoS5 - Twig - Modifying the name attribute of input in Twig Form

Currently, I am utilizing Symfony 5 and Twig to develop a login form. However, the issue lies in the input attribute name structure. For instance, I have form[username], but I would prefer it to be _username. Is there a way for me to make this adjustment? ...

Looking for assistance with updating a JavaScript Object Array and embedding it into a function

Below is the code snippet I am working with: $("#map4").gMap({ markers: [ { address: "Tettnang, Germany", html: "The place I live" }, { address: "Langenargen, German ...

Error: The function $(...).maxlength is not recognized - error in the maxlength plugin counter

I have been attempting to implement the JQuery maxlength() function in a <textarea>, but I keep encountering an error in the firefox console. This is the code snippet: <script type="text/JavaScript"> $(function () { // some jquery ...

Utilizing a created variable within the alert function: A guide

In order to display error messages in my app, I have created the following code: function createTimer(): void { if (!timer.start) { Alert.alert(strings.reminders['date-required']) return; } else if (!timer.end) { Alert.alert(strin ...

What is the process for obtaining the hash of every hyperlink?

I'm currently working on implementing an active link state based on scroll position for each section. My goal is to extract the hash value from the link. The issue I'm facing is that when I run the line 'console.log($(this).eq(i).hash);&ap ...

Include a couple of images to the jQuery Slider

I have a website and am looking to incorporate a jQuery slider that meets my needs. However, the current slider only displays 3 pictures. How can I add one or two additional pictures to the slider? Demo: http://d.lanrentuku.com/down/js/jiaodiantu-883/ He ...

Sending a picture through AJAX using the camera feature of p5.js

Currently, I am exploring the camera functionality of p5.js to capture video. However, I am facing a challenge when trying to upload these images to a server using ajax. I am unsure about how to convert a p5.js Image object into a suitable format for trans ...

The element vanishes from sight after being detached and re-appended

Currently, I am utilizing hQuery's draggable and droppable features. My goal is to move an element from its original parent to its new dropped parent after dragging it. However, when I detach and append the element, it seems to disappear! What could ...

Despite being present in the node_modules folder, the ag-grid-vue module appears to be missing

Currently, I am diligently following the Vue.js AgGrid getting started tutorial step by step: https://www.ag-grid.com/vuejs-grid/ However, upon adding the <script> section and saving my progress, an error promptly appears: ERROR Failed to compile ...

creating a JSON object

Exploring JSON for the first time and I have a couple of questions: Is it possible to create a JSON object using the 'data-id' attribute and have it contain a single array of numbers? Even though I have the code to do this, I am facing difficul ...

Guide on showcasing all entries in the database within the body section of an HTML table

Looking to showcase data from a table inside the body section of an html page This is the code I've been working on: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi ...

Challenges with managing VueJS methods and understanding the component lifecycle

I'm facing an issue with my code. The function retrieveTutorials() is not transferring the information to baseDeDatosVias as expected. I've attempted to change the function to a different lifecycle, but it hasn't resolved the problem. The so ...

What is the best way to customize the interval time for my specific situation?

I'm working on setting an interval in my app and I have the following code: HTML <div class="text"> {{currentItem.name}} </div> <ul> <li ng-repeat="item in items" ng-click="pickItem($index)">{{item.type}}</li> ...

Arrange the array depending on the existence of properties in the objects

Is there a way to efficiently organize an array like the following in cases where certain fields are missing? For instance, consider the current array: const users = [ { id: 1, firstname: 'Jerry' }, { id: 2, firstname: & ...

Activated a DOM element that was retrieved through an AJAX request and displayed it inside a light

I want to implement a lightbox plugin (specifically lightbox_me) to display a html DOM element retrieved through an ajax request. This is the code I am using: <script src="script/jquery.lightbox_me.js"></script> <script> $(& ...

Submitting Data Forms with AJAX on dynamically loaded webpages

Issue with Form Submission in Ajax-Generated Page I am experiencing an issue with form submission on a page generated within AJAX. The page contains two forms, #form1 and #form2. The jQuery code for submitting the form is as shown below: jQuery("#form1" ...