Smoothbox, Modal Forms, Validation

[steelcity_ballin]

Hey all,

I'm building a web app and there is a "contact customer service" button that will be on just about every page. So, I build a custom class for myself that will accept a subject and message as parameters, and generate the email. Code re-use FTW! Anyhow, I want to validate it (the form) client-side with javascript to ensure that a message and subject are populated before anything else.

The link itself is using the smoothbox framework that meshes well with mootools to create a nice modal form. so they click the link, modal box pops up and wants the subject and message, then click the submit button and it calls the validation. Here's the problem: Because it's modal, the two textboxes are not validating properly. I have the two boxes inside a div that has it's display properly set to none so it doesn't show up at all until the "contact" button is pressed. However, because of this, it also will never validate proeprly.

If i take the display property off, the code works perfectly, but then I also have a form always showing on my page, yuck.

Code: Select all

' Call to modal form
<p><a href="#TB_inline?height=250&width=500&inlineId=contactCSR" title="Please fill out all fields" class="smoothbox">Contact Customer Service</a></p>   
    <p><asp:linkbutton id="logout" runat="server" text="Log out" onClick="logMeout" /></p>
'Form itself
<div id="contactCSR" style="display:none;">
       <table>
           <tr><td>Subject</td><td><asp:textbox id="contactSubject" width="350" runat="server" /></td></tr>
            <tr><td valign="top">Message</td><td><asp:textbox id="contactMessage" width="350" textmode="MultiLine" height="150" runat="server" /></td></tr>
            <tr><td>&nbsp;</td><td><asp:button id="contactSubmit" runat="server" text="submit" onClick="sendCSREmail" onClientClick="return validateCSREmail()" /></td></tr>
        </table>
    </div>


Above code works, validates, sends email as long as the display style isn't set. Otherwise it does not work..... any know work arounds? The form shows up and hides appropriately, I don't know why it won't validate.

[JdL]

Can we see how the actual code gets rendered by the browser? Test the page and copy the "View Source" of the selected code. It's no good unless we can see what actually gets rendered.

Also... use FIREBUG. It may be that whatever JavaScript is doing the modal popup is pulling the actual form components out of their correct position inside the DOM and putting them somewhere else as is common with modals. Firebug shows you live interactions with the DOM -- extremely useful. You may need to adjust it so it captures the ENTIRE FORM including beginning and end tags, not just the form elements / text boxes. It might be what's causing the validation script to hiccup.

[steelcity_ballin]

That's the first thing I checked as well JDL, I viewed the source and it renders the controls to the browser, but inside a div with the style "display" set to none. Now, because they are .Net controls, the ID of the element becomes ct100_main_IDName - There is no way to view the modal "source" that I am aware of, to see what it calls itself.

So if I leave the form unhidden and activating the modal form, the boxes the modal form presents which should be the same as the rendered controls, are somehow different. It will validate the form on the page if it's visible, but not the modal form.

edit: Here's the browser's source...

Code: Select all

<div id="contactCSR" style="display:none;">
       <table>
           <tr><td>Subject</td><td><input name="ctl00$main$contactSubject" type="text" id="ctl00_main_contactSubject" style="width:350px;" /></td></tr>
            <tr><td valign="top">Message</td><td><textarea name="ctl00$main$contactMessage" rows="2" cols="20" id="ctl00_main_contactMessage" style="height:150px;width:350px;"></textarea></td></tr>

            <tr><td>&nbsp;</td><td><input type="submit" name="ctl00$main$contactSubmit" value="submit" onclick="return validateCSREmail();" id="ctl00_main_contactSubmit" /></td></tr>
        </table>
    </div>


I will grab firebug and check it out. Thanks!


edit2: I grabbed firebug and WOW what a nice tool! I confirmed that the modal form has no abnormalities that I can detect - names and ID's all look fine.

[JdL]

Can you paste the entire source of the HTML, as well as the Javascript using Pastie.org? I started one for you:

http://pastie.org/328949

Alternatively, could you surface a link so I could see what you're seeing? Email me if you don't want it public

[steelcity_ballin]

I done did it.

YHPM

[lordT]

I'd like to take a look too.

[steelcity_ballin]

Well JDL found the problem, but as for a solution, I've tried some things with no success yet. First, the problem: When the modal box is open via the linkbutton, It's actually creating a CLONE of the target modal information. So first off, I now have duplicated ID's and what have you. More to the point, it duplicates these and renders them OUTSIDE of the form tag, which of course prevents me from accessing them.

I have tried a variety of things including iframe from another page (causes funky rendering of tags and what not). The only thing I haven't tried is a pure ajax approach, and I don't want to, it's overkill. I can use a popup window I suppose. FAIL. Gah...

Tutu YHPM.

[JdL]

...a pure ajax approach, and I don't want to, it's overkill.

If by "overkill" you mean it will take too much time, I would have to disagree. I could have had this thing fixed in under an hour. It's a simple matter of changing the way the the JavaScript works -- which means diving into the JavaScript library that handles the modaling. I think you would SAVE yourself time.