I am trying change input field values in big-commerce checkout page. When I try to change the value of the field using jquery, the value is successfully updated on the UI. But when I try to go to the next section, It says that the field is required.
So the problem is that, when I type something manually into the field, that's the only way the page allows me go to the next step, but If I change the value with DOM manipulation. It does not somehow recognize it.
The checkout is a just an embedded React app. The checkout state is managed by React. Changing a value with JavaScript does not update the React state.
In order to update values in the checkout, you will need to use the storefront Checkouts API, and then trigger a page refresh. https://developer.bigcommerce.com/api-reference/68accc5f14783-update-a-consignment
Related
Using Wizard form ant trying to understand how to get current input field value in the {activePage}. Can reach input value in Wizard.js but stuck on Index.js Someone know where I am missing the point?
You will have to pull your <Form> component out to as high as you need the values. They are only available inside <Form>.
It's not strictly recommended, but you could also do something like the Redux Example that updates a Redux store with the current form values.
When purchasing a course, the user can enter 1 or more students to register for the course. By default there is only one entry but the user can use a dropdown to select more and then the form will update to show more.
I am accomplishing this by triggering an event when the user changes the dropdown value that uses ajax to call an action which returns a partial with the appropriate number of entries and then I just replace the existing div with the new one.
My question is whether there is a way to implement this so that it's kind of like "refreshing" the page where the form remembers and automatically refills in he values the user already entered just like if you were to refresh the entire webpage. Is there a way to do this, or will I need to pass in the existing values into the action in my ajax call and have the partial set them?
A secondary question I just thought of (and perhaps this should be in another post but I will go ahead and put it here for now) is whether I should be concerned about any weird behavior with validation when doing it this way? (I'm using stock, built in validation with annotations).
I am wondering if it is possible to disable the dynamic binding for one instance of an attribute that I am displaying.
Let's just say I have something like this that is working with two way binding:
this.$children[0].$data.hits
The implementation here is that I have a vacation website where I want to display the total amount of hits which can be derived from this number.
But this number also work with binding so that when you search it gets updated. I want a single instance that does not get updated and shows me the initial count without changing when a user does search.
Is is easily possible or do I just need to set a separate attribute on my components data?
So hits is just a number? then assign it to another data prop initially, before users can search. it won't be updated.
this.originalHits = this.$children[0].$data.hits
I have a page where I need to filter certain values provided by an embedded widget based on user input in a text field.
I can do this by appending certain parameters to the widget code embedded on the page and refresh the page
How do I take the user input , replace the widget code and refresh the page?
this is the code I might need to append to the widget code that already exist on my page.
%22filter%22:%7B%22keyword%22:%22userprovidedvalue%22%7D,
I am using jsp
You should be able to handle it by putting an onchange on the input field, and sending it to a function that reads the value off of the input field. Alternately, you can have the submit button call a function, that first reads the value off the input field, then performs whatever logic you need, then submits the form.
Jquery is often useful for making things like this easier and more intuitive, though it does have a bit of a learning curve to ramp up.
I'm building an App that is heavy on jQuery. Most of it I can handle without the use of JS and still have a functioning site, however there is one bit that is eluding me. (note, I'm using ASP.NET MVC but that shouldn't matter in this instance)
I have an input field that is making great use of jQuery-UI AutoComplete. The behavior is very simple. The user is asked to input their City, but is given an AutoComplete list of valid cities. If the city is invalid, the server side validation fires and tells them to try again.
If they do select a valid city, the jQuery method updates a hidden field that contains the CityID of the selected city. This is working phenomenally well, and I really like the performance.
Here's where the problem enters. If JS is not available in the browser, the ID field is not updated, and hence the DB is not updated. I am not using the AutoComplete input on the server side at all, just the ID field. What would be a good solution to circumvent this issue?
Default to a select element containing the cities as options and id's as values, and change it to the autocomplete field with the script on page load.
If for some reason sje397's answer doesn't work for you (it's an elegant solution, unless the city auto-select is based on some other field on-screen, such as a zip code or state), simply POST both fields. When evaluating the POSTed data, if the CITY text box has data, and the hidden field does not, then evaluate the entered city using the same validation method used by the jquery callback. If the hidden field has data, you assume that javascript is enabled and use your current logic.
Several options:
1 - Serve HTML initially that shows the "hidden" input, and doesn't include the "autocomplete" one. When JS loads, have a function edit the DOM to your current situation.
2 - Have the form default to send the "autocomplete" data to the server. Use javascript to edit the "send" function to have it switch to the "hidden" input.
Get the page to by default to send the input of the user over the intertubes to your server, if javascript is enabled, change it so it only sends the ID over instead (using javascript obviously).