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

Answer 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.