1,234
edits
Changes
→Lab
= Lab =
* Create a webpage (on your local machine, no need to put it up on a server) where the user can input a variable number of people's contact info.* By default only one set of fields (for one record) will show up.* When the user clicks the "+" button an extra field is to be added at the bottom. * Make sure even rows have white background and odd rows have a gray background. Set the background using the appropriate .style attribute for the appropriate HTML/DOM element. * Write a JavaScript function that will be executed when the user clicks the submit button(this should be an input type "button", not "submit"). That function should create a JSON object from all the fields (filled-in or not) on the page; then use JSON.stringify() to print your variable into the field just below the form (do not use submit an alert).
This is a sketch to quickly give you an idea of what it should look like:
[[Image:lab6.png]]
* It needs to work in Firefox. Normally you would have to worry about browser compatibility but we won't have time for that in the lab.* Submit your HTML file (and if your JS is separate - your JS file too). If you choose to use jQuery or another JS library - please submit that as well, unless you're referencing it online. == Part 2 - server side == This part is only required for degree students. Now we'll add a server side component. * Create the file mailform.php in your public_html folder on matrix. You can collaborate with other students use Zenit or another system if you prefer.* Add an "Email" button to the page you created in step 1 and make sure when that button is clicked - the data will be passed to your php file on the server. Use the JavaScript .submit() function or use online resources, an old school submit button but please make sure the code you submit data added dynamically is part of the form.* Make sure your JSON is part of the data sent to the server. That will happen automatically if your JSON field is part of the form.* In your PHP use the json_decode() function to extract all the names from the JSON.* Please try to email yourself the list of names using the PHP mail() function. This may not work, depending on the setup of the PHP server and your mail server. If it doesn't, that's ok - just pretend that it works. * Submit your php file to Moodle. Later we're going to look at XSS, header injection, and SQL injection which the scripts you just wrote yourselfare likely vulnerable to.