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
javascriptinputwoocommercecheckout

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

Is it possible to develop a function that can verify various input values and modify their appearance as needed?

I am currently working on creating a form and faced with the challenge of simplifying my code using a function. Specifically, I want to write JavaScript code that will check all input fields in the form to ensure they are filled. If any field is left emp ...

javascriptloopsfor-loopinputsimple-form

Troubleshooting issue: Click function not responding inside Bootstrap modal

Below is the JavaScript code for my click function $(".addPizza").on("click", function(event) { event.preventDefault(); console.log("hello") let userId = $("#userId").attr("data-id"); let pizzaRecipe = $('#pizza-recipe').val().trim(); ...

javascriptjqueryajaxbootstrap-4

Tips for implementing a button redirection to a different page using React

I am facing an issue with a component that includes a function onClick in its Class.propTypes: onClick: PropTypes.func Within another component, I have used this particular component multiple times to populate a page. Each instance of these components con ...

javascriptreactjs

Angular directives enable the addition of DOM elements using ng functions

I'm currently working on creating a custom directive for a small input field that only accepts text. The goal is to dynamically change an icon from a search glass to an X if there is text in the input field, and clear the text when it is clicked on. I ...

javascriptangularjsangularjs-directive

Spin the text inside an <li> element generated by JavaScript

I am currently working on a unique script designed to create a custom number of slices for a circle. The items in the circle are being displayed as shown in this generated circle image. This is the Javascript code I have been using: for () { men ...

javascripthtmlcss

Streaming HTTP content on a domain secured with HTTPS using HTML5

Is it possible to stream HTTP on an HTTPS domain without triggering browser security errors? By default, the browser tends to block such requests. I rely on the hls.js library for desktop support with .m3u8 files. When I play content directly (on mobile o ...

javascripthtmlvideobrowserhttps

Exploring the process of retrieving data from localStorage in Next.js 13

Having recently delved into the realm of Next JS, I've encountered a hurdle when it comes to creating middleware within Next. My aim is to retrieve data from local storage, but I keep hitting roadblocks. middleware.ts import { key, timeEncryptKey, to ...

javascriptreactjstypescriptnext.js

Issue with installing vscode-ripgrep during VSCode build/run process

After attempting to build and run VSCode on my Ubuntu 17.10 by following the instructions from this guide: https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run, I encountered an issue when installing dependencies using yarn. The error m ...

javascriptnode.jsnpmvisual-studio-code

What is the most efficient way to update a large batch of documents in MongoDB?

I need to efficiently update a large number of documents (> 100,000). Initially, I attempted to do this on the JS level by writing scripts that fetch _ids first and then loop through them to invoke updates by _id (full docs or $set patches). However, I e ...

javascriptnode.jsmongodb

Unleashing the Power of Vuejs: Setting Values for Select Options

I have a specific requirement in my Vue application where I need to extract values from an XLS file and assign them to options within a select dropdown. Here is what I currently have: <tr v-for="header in fileHeaders" :key="header"&g ...

javascriptvue.js

What is the method for ensuring that the delete functionality is displayed within the same row?

In my division, there are options for names and deletion. It is displayed on my website as: 1.jpg delete The HTML code for the division is: <div id="files1" class="files"> <b class='dataname' >1.jpg</b> <span cla ...

javascriptjqueryhtmlcss

in the matchMedia addListener callback function, you can pass an argument

While working on a plugin that involves toggling certain behaviors on and off using matchMedia functions, I encountered an issue with passing arguments to my callback function. Whenever I try to pass an argument to the callback function, it returns as unde ...

javascriptjquerycallbackmatchmedia

Is it possible to stop an AjaxBehaviorEvent listener or send extra information to the f:ajax onevent function?

In the controller, I have created a listener that looks something like this: public class FooController { public void doSomething(AjaxBehaviorEvent evt) { closeDialogFlag = true; .. if(!isValid){ closeDialogFlag = f ...

javajavascriptajaxjsf

What could be causing my inability to accurately guess people's ages?

My latest project involves developing a game where players have to guess names from images. Each game consists of 10 rounds, followed by a bonus round where participants must wager their points on guessing the age of the person in the image within a 2-year ...

javascripthtmlcss

What is the best way to create individual clickable images that open up a modal window for each one?

Currently, I have created a function that is able to map images from an array in Next.js using react-bootstrap. The function is functioning as expected, however, my goal is to add an onClick function to each image so that when clicked, it opens up in a new ...

javascriptreactjsnext.js

Learn how to utilize ng2-file-upload in Angular for uploading .ply files effortlessly!

I'm currently working on uploading various files using ng2-file-upload. I've been successful in uploading different file types like png and jpg, but I'm facing an issue with the .ply file extension. Can someone guide me on how to upload a fi ...

javascriptangulartypescriptply-file-format

Issue with .env file access token: Successfully working for one API in Next.js, but failing for

I am utilizing two different APIs, WordsAPI and Spotify API. Each API requires an access token or key which I have stored in a secure .env file. I have successfully fetched data from WordsAPI using the same method in getStaticProps, but I am facing issues ...

javascriptreactjsenvironment-variablesnext.jsspotify

When trying to access the same path, useEffect does not trigger

I integrated the API to execute when the screen is loaded using useEffect in Next.js v10. The code implementation is straightforward: ... const fetchAPI = async () => { try { await axios.get({ .... }) } catch (e) { console.error(e) } } R ...

javascriptreactjsnext.js

Separating vendor and application code in Webpack for optimized bundling

Recently, I created a React+Webpack project and noticed that it takes 60 seconds to build the initial bundle, and only 1 second to append incremental changes. Surprisingly, this is without even adding my application code yet! It seems that the node_modules ...

javascriptnpmwebpack

Altering the text and functionality of buttons with jQuery

A JavaScript method I have is designed to change based on the state of a button, which is determined by using indexOf("..some text.."). $('#add1').click(function(){ if($(this).text().indexOf("Add Me!")) { $.ajax({ type: & ...

javascriptjqueryhtml