Business Catalyst How To's

One issue I’ve come across twice already in our short time using Business Catalyst is the need to submit two BC forms on one page.  

For example, in this forum post http://businesscatalyst.com/ForumRetrieve.aspx?TopicID=21046, I described the wish to automatically subscribe a customer to a list or newsletter subscription when that customer submits a new Web App item, in this case, registering for a camp or class.   

Before I was able to implement the suggestion in that post, namely, to use AJAX to submit both forms, I began work creating a missions website and came across a similar need.  See my post here: http://businesscatalyst.com/ForumRetrieve.aspx?TopicID=21235

I'm creating a sponsorship app for a missions group. http://mcacademy.businesscatalyst.com/sponsorships. ; I have created a web app for the basic student information which includes a field for whether or not they have been sponsored. The customer wants the sponsors to have a secure area to view private information about the student.  So I created a second web app that will be for the secure info and will require payment.  So far so good.

Now when the sponsor pays, I want the secure web app item to be created, but I also want to update the "sponsored" field in the first web app to "Sponsored."  Seems very simple and I think I've figured out how to submit two forms via AJAX, but I cannot figure out how (if possible) to effectively get to that sponsored field in the non-secure web app.  I am passing the item ID of the student in the URL, so that's not a problem.  I just don't know how to update that field.  

Getting the web app detail form on the page

The first thing I needed to do in the case of the missions website was to figure out how to include both forms on one page.  The form to create the secure web app item was created on the page using the “Add modules to web page” Action Box and under “Web Apps”, choosing “Web Apps Input Form for Customers”.  The second form was more difficult.  I needed to edit just one field for that particular student on the public-facing Web App (change the Sponsored field).  

I discovered that I could use the page that displays the detailed information for the web app item (in this case, a student), and by adding ‘&A=Edit’, all data would be displayed in editable form fields. (/CustomContentRetrieve.aspx?ID=XXXXXX&A=Edit)  

I didn’t want any of this visible to the user, so I used Javascript to create an iframe with the url of the detailed information page on the page and hid the iframe from view.  I then edited the elements of the form using Javascript.  Here is the Javascript I use for the iframe:

<script type="text/javascript">
//The following inserts the second form via an iframe to change the students status in the Student Web App to Sponsored
var currStudentID = $_GET('studentID');
var el = document.createElement("iframe");
el.setAttribute('id', 'editframe');
document.body.appendChild(el);
var url = '/CustomContentRetrieve.aspx?ID=' + currStudentID + '&A=Edit';
el.setAttribute('src', url);
el.setAttribute('onload', 'load()'); //Need to wait for the iframe to load before updating form fields
el.setAttribute('height', '0');  // hide iframe
el.setAttribute('width', '0');  // hide iframe
el.setAttribute("style","width:0;height:0;display:none;");

function load() {
   var myframe = document.getElementById('editframe');
   var innerDoc = myframe.contentDocument || myframe.contentWindow.document;


   // Need to set the form id because BC only sets the name
   var iframeforms = innerDoc.getElementsByName("catcustomcontentform9155");
   for (i = 0; i < iframeforms.length; ++i) {
        iframeforms[i].setAttribute("id", "catcustomcontentform9155");
   }
   innerDoc.getElementById('catcustomcontentform9155').action += "&JSON=1";
     innerDoc.getElementById('CAT_Custom_279382').options[1].selected = false; // this is the "Not Sponsored" option
   innerDoc.getElementById('CAT_Custom_279382').options[2].selected = true; // this is the "Sponsored" option
  
   document.getElementById('submit-show').style.display = '';  // Now we can display the Submit button on the first form
} // end load()
</script>


Submitting two forms on the same page with AJAX

The only part remaining was to submit both forms via AJAX.  The second gets submitted upon completion of the first by calling jqsub2().  I followed the instructions on the following Knowledgebase and Forum posts in BC:
http://kb.worldsecuresystems.com/851/cpsid_85119.html
http://businesscatalyst.com/ForumRetrieve.aspx?TopicID=20313

Here is the code:
<script type="text/javascript">
function jqsub() {
var $f = $('#catcustomcontentform53997'); // set your form ID
var $messagebox = $('#message'); // set your message box ID
var $successmessage = "<h3 style='color:red'>Thank You For Your Sponsorship!</h3>"; // replace with your own success message in HTML format
var $errormessage = "<h3 style='color:red'>There was a problem with your submission - Please Contact Us</h3>"; // replace with your own error message in HTML format

$.ajax({
type: 'POST',
url: $f.attr('action'),
data: $f.serialize(), 
success: function (msg) { 
              if ((document.getElementById('message').innerHTML.indexOf($successmessage)<0) &&     (document.getElementById('message').innerHTML.indexOf($errormessage)<0 )) {
                if (msg.indexOf("Thank you for your submission")!=-1) {
                        // $messagebox.append($successmessage) 
                        //$messagebox.fadeIn();
                        jqsub2();
                        }
                        else {
                        $messagebox.append($errormessage) 
                        $messagebox.fadeIn();
                        }  
                }  
} // end success
});
}

function jqsub2() {
var myframe2 = document.getElementById('editframe');
var innerDoc2 = myframe2.contentDocument || myframe2.contentWindow.document;
var $f2 = $(innerDoc2.getElementById('catcustomcontentform9155')); // set your form ID
var $messagebox = $('#message'); // set your message box ID
var $successmessage = "<h3 style='color:red'>Thank You For Your Sponsorship!</h3>"; // replace with your own success message in HTML format
var $errormessage = "<h3 style='color:red'>There was a problem with your submission - Please Contact Us</h3>"; // replace with your own error 

$.ajax({
type: 'POST',
url: $f2.attr('action'),
data: $f2.serialize(), 
success: function(msg){
                    if ((document.getElementById('message').innerHTML.indexOf($successmessage)<0) &&     (document.getElementById('message').innerHTML.indexOf($errormessage)<0 )) {
                if (msg.indexOf("Thank you for your submission")!=-1) {
                        $messagebox.append($successmessage) 
                        $messagebox.fadeIn();
                        }
                        else {
                        $messagebox.append($errormessage) 
                        $messagebox.fadeIn();
                        }  
                }  
} // end success
     });
}
</script>