make forms ajax for basic lessons

java/org/owasp/webgoat/lessons/HttpBasics.java

@@ -63,7 +63,7 @@ public class HttpBasics extends LessonAdapter {
             person = new StringBuffer(s.getParser().getStringParameter(PERSON, ""));
             person.reverse();
 
-            Input input = new Input(Input.TEXT, PERSON, person.toString()+"RICK");
+            Input input = new Input(Input.TEXT, PERSON, person.toString());
             ec.addElement(input);
 
             Element b = ECSFactory.makeButton(WebGoatI18N.get("Go!"));

java/org/owasp/webgoat/session/Screen.java

@@ -204,7 +204,8 @@ public abstract class Screen {
 
     // TODO we could hook all forms here with javascript call to ajax forms plugin
     public String getContent() {
-        return (content == null) ? "" : content.toString();
+        String makeFormsAjax = "<script>  $(document).ready(function() { makeFormsAjax(); });</script>";
+        return (content == null) ? "" : content.toString() + makeFormsAjax;
     }
 
     /**

webapp/WEB-INF/pages/main_new.jsp

@@ -191,6 +191,10 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
         <script src="http://malsup.github.com/jquery.form.js"></script> 
         <script>
+            // set this to true if you want to see form submissions
+            // set to false once we get all the kinks worked out
+            var DEBUG_FORM_SUBMISSION = false;
+
             $(document).ready(function() {
                 // bind to click events on menu links
                 $('.menu-link').bind('click', function(event) {
@@ -199,24 +203,27 @@
                         $("#lesson_content").html(reply);
                     }, "html");
                 });
-                // make all forms ajax forms
-                var options = {
-                    target: '#lesson_content', // target element(s) to be updated with server response                     
-                    beforeSubmit: showRequest, // pre-submit callback, comment out after debugging 
-                    success: showResponse  // post-submit callback, comment out after debugging 
 
-                            // other available options: 
+            });
-                            //url:       url         // override for form's 'action' attribute 
+            // make all forms ajax forms
-                            //type:      type        // 'get' or 'post', override for form's 'method' attribute 
+            var options = {
-                            //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
+                target: '#lesson_content', // target element(s) to be updated with server response                     
-                            //clearForm: true        // clear all form fields after successful submit 
+                beforeSubmit: showRequest, // pre-submit callback, comment out after debugging 
-                            //resetForm: true        // reset the form after successful submit 
+                success: showResponse  // post-submit callback, comment out after debugging 
 
-                            // $.ajax options can be used here too, for example: 
+                        // other available options: 
-                            //timeout:   3000 
+                        //url:       url         // override for form's 'action' attribute 
-                };
+                        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
-                // pre-submit callback 
+                        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
-                function showRequest(formData, jqForm, options) {
+                        //clearForm: true        // clear all form fields after successful submit 
+                        //resetForm: true        // reset the form after successful submit 
+
+                        // $.ajax options can be used here too, for example: 
+                        //timeout:   3000 
+            };
+            // pre-submit callback 
+            function showRequest(formData, jqForm, options) {
+                if (DEBUG_FORM_SUBMISSION) {
                     // formData is an array; here we use $.param to convert it to a string to display it 
                     // but the form plugin does this for you automatically when it submits the data 
                     var queryString = $.param(formData);
@@ -226,31 +233,33 @@
                     // var formElement = jqForm[0]; 
 
                     alert('About to submit: \n\n' + queryString);
-
-                    // here we could return false to prevent the form from being submitted; 
-                    // returning anything other than false will allow the form submit to continue 
-                    return true;
                 }
 
-                // post-submit callback 
+                // here we could return false to prevent the form from being submitted; 
-                function showResponse(responseText, statusText, xhr, $form) {
+                // returning anything other than false will allow the form submit to continue 
-                    // for normal html responses, the first argument to the success callback 
+                return true;
-                    // is the XMLHttpRequest object's responseText property 
+            }
 
-                    // if the ajaxForm method was passed an Options Object with the dataType 
+            // post-submit callback 
-                    // property set to 'xml' then the first argument to the success callback 
+            function showResponse(responseText, statusText, xhr, $form) {
-                    // is the XMLHttpRequest object's responseXML property 
+                // for normal html responses, the first argument to the success callback 
+                // is the XMLHttpRequest object's responseText property 
 
-                    // if the ajaxForm method was passed an Options Object with the dataType 
+                // if the ajaxForm method was passed an Options Object with the dataType 
-                    // property set to 'json' then the first argument to the success callback 
+                // property set to 'xml' then the first argument to the success callback 
-                    // is the json data object returned by the server 
+                // is the XMLHttpRequest object's responseXML property 
 
+                // if the ajaxForm method was passed an Options Object with the dataType 
+                // property set to 'json' then the first argument to the success callback 
+                // is the json data object returned by the server 
+                if (DEBUG_FORM_SUBMISSION) {
                     alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
                             '\n\nThe output div should have already been updated with the responseText.');
                 }
-                // bind form using 'ajaxForm' 
+            }
-                $("form[name='form']").ajaxForm(options);
+            function makeFormsAjax() {
-            });
+                $("form").ajaxForm(options);
+            }
         </script>
     </body>
 </html>