MultiBox - validating FORMS using Element

[Jeda]

Hi all,

I am having somewhat of a problem trying to validate a form that is in a MultiBox created from an inline element.

This code creates the link that launches the multibox;

Code: Select all

<div style="position:absolute; left:10px; top:28px; width:250px;"><a href="javascript:showRegistrationScreen();">register for your free account here</a></div>
<div style="display:none"><a href="#modalAccountDetails" rel="type:element" id="loginmb1" class="loginmb" title="Register">here</a></div>
<div style="display:none" class="loginmultiBoxDesc loginmb1">You are moments away from having your free account</div>


This is the Coldfusion Form that becomes the contents of the form;

Code: Select all

   <CFFORM method="POST" action="javascript:processAccountDetails();" onsubmit="return validateAccountDetails();" enctype="multipart/form-data" name="frmAccountDetails" preservedata="yes">
      <div style="width:200px;" id="accountDetailsError" class="errorMessage">frfrefrefrefref</div>
        <table width="650px" cols="2">
            <tr>
                <th colspan="2" class="tableTitle" align="left">Enter Your Contact Details</th>
            </tr>
                <tr>
                    <td width="150">User Name</td>
                    <CFIF #data_AccountDetails.Username# eq "">
                    <td width="150"><CFINPUT type="text" name="userName" id="userName" value="#data_AccountDetails.Username#"   align="left" size="20" maxlength="20" class="textbox" ></td>
                    <CFELSE>
                    <td width="150"><CFINPUT type="text" name="userName" id="userName" value="#data_AccountDetails.Username#"  disabled="disabled" align="left" size="20" maxlength="20" class="textbox" ></td>
                    </CFIF>
                </tr>
                <tr>
                    <td width="30">Password</td>
                    <td width="550"><CFINPUT type="password" name="passWord1" value="#data_AccountDetails.password#" maxlength="150" style="width:200px;"></td>
                </tr>
                <tr>
                    <td width="30">Password</td>
                    <td width="550"><CFINPUT type="password" name="passWord2" id="passWord2" value="#data_AccountDetails.password#"  align="left" maxlength="150" class="textbox" style="width:200px;"></td>
                </tr>
                <tr>
                    <td width="30"><CFOUTPUT>First Name</CFOUTPUT></td>
                    <td width="650"><CFINPUT type="text" name="firstName" id="firstName" value="#data_AccountDetails.Forename#"  align="left" maxlength="50" class="textbox" style="width:200px;"></td>
                </tr>
                <tr>   
                        <td width="30"><CFOUTPUT>Last Name</CFOUTPUT></td>
                        <td width="650"><CFINPUT type="text" name="lastName" id="lastName" value="#data_AccountDetails.Surname#"  align="left" maxlength="50" class="textbox" style="width:200px;"></td>
                </tr>
                <tr>   
                        <td width="30"><CFOUTPUT>Email Address</CFOUTPUT></td>
                        <td width="650"><CFINPUT type="text" name="email" id="email" value="#data_AccountDetails.email#"  align="left" maxlength="100" class="textbox" style="width:200px;"></td>
                </tr>
                <tr>   
                        <td width="30" nowrap="nowrap"><CFOUTPUT>Forum Nickname</CFOUTPUT></td>
                        <CFIF #data_AccountDetails.Nickname# eq "">
                            <td width="650"><CFINPUT type="text" name="Nickname" id="Nickname" value="#data_AccountDetails.Nickname#"  align="left" maxlength="10" size="10" class="textbox"></td>
                        <CFELSE>
                            <td width="650"><CFINPUT type="text" name="Nickname" id="Nickname" disabled="disabled" value="#data_AccountDetails.Nickname#"  align="left" maxlength="10" size="10" class="textbox"></td>
                        </CFIF>
                </tr>
                <tr>
                   <CFIF #data_AccountDetails.Avatar# EQ "">
                    <td width="30" nowrap="nowrap"><CFOUTPUT>Avatar</CFOUTPUT></td>
                    <td><CFINPUT type="file"  name="newavatar" size="30" maxlength="50" required="no"></td>
                    <CFELSE>
                    <td width="30" nowrap="nowrap"><CFOUTPUT>Avatar</CFOUTPUT></td>
                    <td><CFINPUT type="file"  name="newavatar" size="30" maxlength="50" required="no"><img align="absmiddle" src="<CFOUTPUT>#APPLICATION.forumImagesURL#/#data_AccountDetails.avatar#</CFOUTPUT>" border="1px solid black" hspace=10 vspace=10 width=100 height=100></td>
                    </CFIF>
                </tr>
                <tr>
                    <td width="30">Signature</td>
                    <td>
                        <CFSCRIPT>
                        // Calculate basepath for FCKeditor. It's in the folder right above _samples
                        basePath = "#APPLICATION.basepath#";
                   
                        fckEditor = createObject("component", "#basePath#fckeditor");
                        fckEditor.instanceName   = "signature";
                        fckEditor.value         = '#data_AccountDetails.signature#';
                        fckEditor.basePath      = basePath;
                        fckEditor.toolbarset    = 'Basic';
                        fckEditor.width         = 400;
                        fckEditor.height      = 100;
                        fckEditor.create(); // create the editor.
                        </CFSCRIPT><br />Will appear at the bottom of your posts
                    </td>
                </tr>     
                <tr>
                    <td width="30">About Me</td>
                    <td>
                        <CFSCRIPT>
                        // Calculate basepath for FCKeditor. It's in the folder right above _samples
                        basePath = "#APPLICATION.basepath#";
                   
                        fckEditor = createObject("component", "#basePath#fckeditor");
                        fckEditor.instanceName   = "aboutme";
                        fckEditor.value         = '#data_AccountDetails.aboutme#';
                        fckEditor.basePath      = basePath;
                        fckEditor.toolbarset    = 'Basic';
                        fckEditor.width         = 400;
                        fckEditor.height      = 100;
                        fckEditor.create(); // create the editor.
                        </CFSCRIPT><br />Will appear in your profile view
                    </td>
                </tr>
        </table>
      <CFIF SESSION.CustomerID EQ 0>
         <div style="width:100px; text-align:right;"><CFINPUT type="image" src="#application.siteRoot#/siteassets/images/btnRegister.png" name="submit"></div>
      <CFELSE>
         <div style="width:100px; text-align:right;"><CFINPUT type="image" src="#application.siteRoot#/siteassets/images/btnSave.png" name="submit"></div>
      </CFIF>
   </CFFORM>
</div>
</div>


This is the javascript which creates and launches the multibox;

Code: Select all

   var loginbox = {};
   function showRegistrationScreen()
   {
      loginbox = new MultiBox('loginmb', {descClassName: 'loginmultiBoxDesc', useOverlay: true, contentColor: '#000', showControls:true});
      loginbox.open($('loginmb1'));
   }



This works great - click on the link, up pops the multibox with the Form and away I go. The problem comes when I try and validate the form. What I would normally do is query the DOM elements for the form in javascript like this;

(using getElementById)

Code: Select all

if (Len(Trim(document.getElementById('userName').innerHTML)) == 0)
{
alert("no username");
document.getElementById('accountDetailsError').innerHTML = "Please enter a Username.";
document.getElementById('userName').focus();
return false;
}


or like this;
(referencing the form value directly)

Code: Select all

if (trim(document.frmEdit.nickname.value) == '')
{
document.getElementById('errorMessage').innerHTML = 'No Nickname entered - please check and re-enter.';
document.frmEdit.nickname.focus();            
return false;
}


Both methods in all browsers do not reflect changes made in the FORM. It is as if the DOM is not being refreshed with anything after the MultiBox loads the form. So, this leaves me with no way of validating the form using Javascript in the normal way.

If I put the form in a different page (along with its validation) and call it as an iFrame, everything works fine. I would prefer it to be an inline DIV as otherwise I am going to have separate pages for just about every multibox popup in my site!

Anyone know why querying the DOM in this way does not work for a Multibox created with an inline FORM?

Regards

[Jeda]

I managed to get this to work.

MultiBox creates a second DOM entry for the inline DIV, so you have to get elements by NAME and not ID and reference the second element;

Something like this.

Code: Select all

document.getElementsByName('sendPasswordError')[1].innerHTML

I also noticed that (in coldfusion at least) if you have a form in a multibox, the normal action="some reference" with a SUBMIT button does not pass on the amended form details to the subsequent process. However, if you submit the form in javascript;

Code: Select all

document.frmAccountDetails.submit();

The form passes the details correctly.

Took me a long time to get this all working, but it is worth it in the end!

Regards