This is a simple assignment, but I need it done correctly.
You should have a knowledge of Javascript, jQuery (maybe mootools as well, but definitely jQuery) and working knowledge of HTML.
Basically you will be using jQuery and the form plugin here:
http://malsup.com/jquery/form/#getting-started
Also, you can use the scripts from this tutorial as a great starting point:
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=435
What I need is a script that does the following:
1) You have a web page with a form. It will have a few fields, and when the user hits submit (which is an image submit button), validation will occur. What differs from the tutorial is that I want the validation to occur with alert windows, not the ajax message. I will tell you what fields should be validated.
2) Next, after validation clears, there should be a placeholder image that says “processing your request” as shown in this tutorial:
http://www.electrictoolbox.com/load-content-jquery-ajax-loading-image/
This should take the place of the form div completely – basically the form content div will be replaced with this image. Also, the submit button (which is an image) will be replaced with an image that says “loading…” as well. You’ll see in the electrictoolbox.com tutorial that the code uses setTimeout() with Javascript to (I believe) specify how long the “loading image” remains on the page. You should utilize this and tell me what file and what number I can modify to adjust the time that the “loading image” remains on the page so I can make it longer and shorter.
3) After the specified time that the loading image is displayed, I then want the following to happen:
- Another form to appear via jQuery AJAX (so somehow displayed through the php file called, or something via jQuery) in the same position that the previous form was in – replacing the previous one, with new form fields. Perhaps some fields (I will tell you what the new fields are) should be auto-filled with the values carried over from the previous form submission. The other values will be “hidden” fields in the new form and will be carried over as well.
Also, the image submit button will again be replaced with a similar image that just says something new on it (this is easy I believe, just call a different image via ajax thru jquery to replace the image div I believe, right?).
What happens with this new form, after some validation (which I already have javascript validation scripts for this second form you can use) is that it should be able to be submitted “regularly” to a new PHP file with the post variables being available to utilized on this next new page you will go to.
4) On this next PHP page, you will utilize the Ultracart Javascript Checkout API. Basically, this is what is used on https://www.mylumalife.com/ – so check out the source code. You will be able to re-use the checkoutapi.js and I also already have a PHP relay script written for the API. Additionally, there is a manual that shows an example and all of the API calls you can use. Essentially, what will be happening on this next page is that there will be a credit card field and a few other fields. You need to be able to communicate via the API with the Ultracart checkout and display any errors (play with mylumalife.com to see what I mean), and if there are more errors, be able to display the appropriate fields (for example – when you first go to the page, only the credit card fields will appear, and the name, address, etc. from the previous page will be hidden fields in the form as post variable carried over from the previous page – however, if there is an error, then perhaps those fields will need to be displayed above the credit card field). Another thing that may be needed is a div that is displayed if a checkbox is checked that says “shipping address is different from my billing address” to make those fields appear (different name & address fields) – fairly simple.
Here is what they say in the manual regarding error messages from the API:
Handling Reloads with Error Messages
When you a checkout handoff the customer’s browser is redirected into the UltraCart checkout for completion. If there are any errors that need to be redisplayed to the customer then UltraCart will redirect their browser to the URL that you specified in the handoff call. The error messages will appear in the query string as the parameter specified in the handoff call. Please note that there can be more than one error that needs to be displayed to the customer. For your convience we have provided the method getParameterValues which fetches the error messages. Make sure that your javascript code not only displays the errors, but also should reload all the fields on the page so that customer only needs to fix the error fields and not respecify everything.
I believe in the mylumalife.com example they use the file /js/all.js to check the billing address versus the shipping address, etc. – so checkout that file. You should be able to tell me what all they are doing in this file. They use jQuery and a cart.js aspect within all.js to do work with the API.
There is also a log of calls and error log that can be seen / attained to work with this portion of the assignment.
Essentially we want the same behavior as mylumalife.com in terms of the final segment and the checkout process – which basically deals primarily with the submitted values to the API.
Please in your reply state your experience with jQuery and that you have reviewed these sites and also offer any questions you might have on the project. Apply for the project only if you are serious and can do the job right. There may very well be more work for you in the future.
Thanks and good luck!
