how implement an html form inside an asp.net web page - two forms issue in asp.net

Question

please see this html codes :

<!--   PAGE - 5  -->
                <div class="section cc_content_5" id="page5" style="display: none;">
                    <div class="pad_content">
                        <div class="right grid_1">
                            <h1>
                                Contact Address
                            </h1>
                            <img src="Images/photo_5.jpg" alt=""><br />
                            <br />
                            <strong>The Companyname Inc</strong> 8901 Marmora Road,<br />
                            Glasgow, D04 89GR.<br />
                            Telephone: [phone]<br />
                            Fax: [phone]<br />
                            E-mail: <a href="mailto:#">www.copanyname.com</a><br />
                        </div>
                        <div class="left grid_2">
                            <h1>
                                Contact Form
                            </h1>
                            <div id="note">
                            </div>
                            <div id="fields">
                                <form id="ajax-contact-form" action="javascript:alert('success!');">
                                <label>
                                    Name:</label><input class="textbox" name="name" value="" type="text">
                                <label>
                                    E-Mail:</label><input class="textbox" name="email" value="" type="text">
                                <label>
                                    Subject:</label><input class="textbox" name="subject" value="" type="text">
                                <label>
                                    Comments:</label><textarea class="textbox" name="message" rows="5" cols="25"></textarea>
                                <label>
                                    Captcha</label><img src="Images/captcha.php" style="margin: 3px 0px; width: 200px;
                                        height: 32px;">
                                <div class=" clear">
                                </div>
                                <label>
                                    &nbsp;</label><input class="textbox" name="capthca" value="" type="text">
                                <div class=" clear">
                                </div>
                                <label>
                                    &nbsp;</label><input class="pin" name="submit" value="Submit" type="submit">
                                </form>
                                <div class="clear">
                                </div>
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </div>

and their script :

<script type="text/javascript">
    $(document).ready(function () {
        $("#ajax-contact-form").submit(function () {
            var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
                if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
                { result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> <a href="#" onclick="freset();return false;">send another mail</a></div>'; $("#fields").hide(); } else
                { result = msg; } $("#note").html(result);
            }
            }); return false;
        });
    });
    function freset()
    { $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>

i really want to know how can i put page 5 in my asp.net web form?
as you we can not have a form inside default asp.net web page form.
so what can i do about page 5?

thanks in advance

Solution 1

You can not have two forms inside an asp.net page and both work on code behind.

The alternative that you have.

1. Place the second form before or after the asp.net form
2. Do not set second form, just read the input data that you interesting on code behind.
3. Dynamically create the form at the end of the page using the javascript and post it.

Because here I see that you post to php and I think that you like to keep the old code with asp.net, add them after the closing form of the asp.net form.

<form id="AspForm" runat="server">
...
</form>
<form id="ajax-contact-form"  method="post" action="contact.php" >
...
</form>

More Extreme

Because you all ready use javascript you can do this trick. Copy and paste all the content in a form at the end of the page and post it.

    <form id="AspForm" runat="server">
    ...
      <div id="ajax-contact-infos" >
       <label>
          Name:</label><input class="textbox" name="name" value="" type="text">
       <label>
       <input class="pin" name="submit" value="Submit" 
         type="button" onclick="SubmitThisForm();return false;" >
        ...
      </div>
    </form>
    <form id="ajax-contact-form"  method="post" action="contact.php" >
       <div id="PlaceOnMe" ></div>
    </form>

and on javascript copy it just before post it as

<script type="text/javascript">
    function SubmitThisForm()
    {
            // here I copy (doublicate) the content of the data that I like to post
            //  in the form at the end of the page and outside the asp.net
        jQuery("#PlaceOnMe").html(jQuery("#ajax-contact-infos"));
            // Now we submit it as its your old code, with out change anything
        jQuery("#ajax-contact-form").submit();
    }

    // here is the old code.
    $(document).ready(function () {
        $("#ajax-contact-form").submit(function () {
            var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
                if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
                { result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> <a href="#" onclick="freset();return false;">send another mail</a></div>'; $("#fields").hide(); } else
                { result = msg; } $("#note").html(result);
            }
            }); return false;
        });
    });
    function freset()
    { $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>

All this is with the minimum changes. You can how ever make optimization, but this is the general idea.

Solution 2

You have a number of options; nesting the forms is the worst as it's something that will/wont work depending on the browser.

You can as @Aristos has mentioned, have one form after the other. This is a good solution but is not necessarily the best in terms of your site design.

The second is that you could embed your contact form on a normal HTML page, then include it on your parent page in an iframe or similar. This would get around the issues of nested forms, but might not give you the behaviour you want in terms of user experience.

The third is that your contact form would be better suited to being a User Control

You would put all of your contact form fields into the ascx file, and handle the button click for the submit in this control. After processing this submit, you can replace the user control with a simple message thanking the user for their input.

You can also put all of the required form validation in this. Your ASCX might look something like:

<asp:Panel runat="server" id="ContactPanel">
<div class="left grid_2">
        <h1>
            Contact Form
        </h1>
        <div id="note">
        </div>
        <div id="fields">
            <label for="<%=InputContactName.ClientID%>">Name:</label>
            <asp:TextBox runat="server" id="InputContactName" value="" />
            <!-- Rest of Form goes here -->
            <div class=" clear">
            </div>
            <asp:Button runat="server" id="ContactFormSubmit" OnClick="ContactFormSubmit_Click" Text="Send Feedback" />
            <label>&nbsp;</label><input class="pin" name="submit" value="Submit" type="submit">
            <div class="clear"></div>
        </div>
    </div>
</div>
</asp:Panel>
<asp:Panel runat="server" id="ThanksPanel" Visible="false">
    <p>Thank you for your feedback. We'll try not to ignore it. But it is Friday. So we might. At least until Monday.</p>
</asp:Panel>

In your ContactFormSubmit_Click button you can just grab the text from your contact form, hide the ContactPanel, and show the ThanksPanel.

Really simple, and encapsulated away in a user control.