I'm writing a form for a custom module and I want to show/hide some fields according to which radio is checked, kind of like what happens when you select a payment method in the onepage checkout and a description appears.
Before I start writing the js code, I took a look at js/varien/form.js to see if I could use an already existing function, but the truth is my js skills aren't enough to really understand what I'm looking at.
So my question is, is there something I can use? Which method and how can I trigger it?
I'm gonna review onepage checkout's code in order to see if it makes things clearer, but if you know another form that has this behaviour please let me know.
Also, I know how I could write such code in plain javascript, but I'd rather use the magento way, in order to learn.
Cheers
The Javascript code doing is defined in [skin]/js/opcheckout.js. The Payment class defined there is made solely for the credit card checkout form.
You can study what they did and do something similar - or just write the show/hide code yourself. I'd suggest the latter if you don't have an insane amount of programmic logic - otherwise wrap it in a class.
Related
Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.
I've created a wizard from a long form with a help of jquery.quickWizard plugin. One of the good things about this plugin that it works with jquery.validate which is really handy.
Now i need to display current step(in the wizard) above the form, are there ready to use solutions for that?
I'm a new user to knockout.js and so far have been very impressed with basic use.
I want to be able to auto calculate a field (yr2 Expense) based on a previous field (yr1 Expense), but also allow the user to change the auto calculated field. This auto calculated field is then used for another calculation (Total Yr2). I've been trying to do so with this jsfiddle, but have had no luck so far. I can't find any info in the examples on how to do this.
I first tried making yr2 Expense an observable, which does not allow for auto calculation. I then tried making yr2 Expense a computed, which does not allow for Total Yr2 to be updated with user input. Is what I'm trying to do not possible? I would think this would be common in finance calculation forms, which is what I'm doing this for.
First of all, variable names should be easy to understand and intention revealing. There is no benefit to obtuse or abbreviated names, like the ones used in your fiddle. They are confusing, and this adds difficulty to code maintenance. If you plan to minify your js later then the names wont matter anyway. If you need to read your code later, having full, easy to understand names helps tremendously.
There are two ways to accomplish what you are after.
One method would be to use subscribers to alter the calculation of the observable after a change. See this, near the bottom of the page. Here is a fiddle demonstrating this method. For this example, I recommend this method.
Note: I am leaving off valueUpdate so that recalculations only occur when the user is done typing. If you use afterkeydown, it will recalc early, causing issues. Try pressing [Enter] when you want it to recalc.
The second method is to use writable observables (Second header, 1/3 down the page) to make computed observables that have read and write methods. I don't think this method is as good a fit for this specific example, but the example in the linked KO documentation should give you an idea of when it works well.
I'm trying to build a webform that has multiple stages. I'm patterning it off of the Stack Overflow / Stack Exchange flagging webform. The problem is, I'm not sure how to trigger the "next stage" action.
To illustrate, if one wants to flag a question on Stack Overflow, you click flag and then a popup prompts you to make a choice. If you choose the second option ("it doesn't belong here, or it is a duplicate") the form automagically takes you to a second screen.
First screen:
Upon click, it auto-redirects to:
The problem is that I don't know what the underlying trigger is. How does clicking that radio button send the end user to the next screen?
I tried checking the source, but I have a feeling I'm only seeing half the picture:
No amount of HTML tutorials I find have any practice example similar to this. I suspect this is JavaScript, but I can't find the linked .js file that would trigger these actions.
So: How does the webform auto-redirect upon click? As a follow-up, if it's using JavaScript, is there an HTML/CSS-only workaround I can use?
It might help to think about this at a lower level than frameworks. There are two ways one could make a multi-stage form.
The first (and generally older) way is to store the state on the server. Each stage of the form is actually a separate form, and the client's progress through the questionnaire is kept on the server (for example, as part of the session data).
The second way (the more modern one) is to use JavaScript, as you suspected. There is actually very little black magic in this case, and no auto-redirects on clicks at all. All you do is have one very long form where you show/hide some of the elements depending on the user's selections (of course, you could have multiple <form> elements which you show/hide).
Well, I'd use some sort of jQuery wizard plugin and adapt it to my needs. I did it very recently and it wasn't that hard. You should try SmartWizard 3.0, it's pretty active, the last release was about 2 months ago and the coders answered my questions pretty fast.
Here it is: https://github.com/mstratman/jQuery-Smart-Wizard
You can trigger the wizard to advance to the next step linking an event to the action of clicking the radio button.
Good luck :)
I'm making a form to order different varieties of sweets from a website. At the moment I have checkboxes with each variety. Once they have chosen the varieties they want (they can have more than one) then I need some more information. To do this I want to display a new box when they check each checkbox. Event attributes seem to be adequate, but I don't really know javascript, so is this the right way for me to do it? Can event attributes only trigger javascript?
Or perhaps I'm going about this the wrong way, would there be a better way to make this form? I've considered a shopping cart but for what I want I think it's too much, and I'm not very advanced.
So, I just want a way to show html after a checkbox has been ticked, or a better way to make my form.
Thanks
If you have skills with server-side programming (PHP, ASP, ASP.Net, JSP), that may be the way to go. When the checkbox changes, redraw the options using AJAX of some flavor (e.g. an ASP.Net UpdatePanel). This will avoid doing much with JavaScript on the client, even though it's certainly doable that way.
If you aren't strong on either client or server-side programming, a third-party shopping cart is probably the way to go. I would start your investigation with PayPal.
Important: if you do write your own order form, make sure you are not storing credit card numbers at any point in the process. Avoid even having credit card numbers submitted to your site if at all possible. Become familiar with PCI Compliance. This alone is often a justification for using a third-party tool.
EDIT: Per Paul's comment below that he wants to keep it as simple as possible and no transactions will be handled:
"Can event attributes only trigger javascript?"
Yes, either inline JavaScript or script contained in an external file, or elsewhere on the page in script tags.
Here's a little sample of one checkbox triggering other HTML elements (in this case, other checkboxes): http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html
You can show or hide an element using code like this:
var elementToToggle = document.getElementById('someId');
elementToToggle.style.display = "none"; // hide
OR
elementToToggle.style.display = "";
Using the jQuery (www.jquery.com) library would potentially make this simpler, but there is an initial learning curve.