I need to add a popup to show when form is submitted..

Discussion in 'HTML & Website Design' started by LiLChicaDees, Mar 29, 2009.

0
  1. #1
    Please help!! I need to accomplish this by tonight (march 29th) at midnight!!!


    I need to apply these steps:

    1.Add the code that will hide the JavaScript code from incompatible browsers.

    2.Create a pop-up that shows when the form is submitted. The pop-up must be 300 x 300 pixels and state, “Thank you for your comments.” When the pop-up is displayed, no other feature should be enabled on the interface.

    3.Create a checkEmail function to check the entry in the Email field. Use the onfocus event handler to call your function by placing the following code in the <input> tag for the Email field:
    onblur=“checkEmail();”

    3.Create a checkComments function to verify that the Comments field contains data. Use the onsubmit event handler in the <form> tag to check this field. If the Comments field is blank when the user clicks Submit, create a confirm box to ask the user whether he or she is sure about wanting to send the message with no comments. The result should be saved in a variable named “answer,” for example, var answer = confirm(…).


    To this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Contact Form</title>
    <script language="JavaScript" type="text/javascript">
    function checkName()
    {
    if (document.commentForm.name.value=="")
    {
    // insert code here
    alert("A name is required. Please enter your name.");
    field.focus();
    return false;
    }
    else
    return true;
    }
    // Create functions here
    function checkEmail()
    {
    if (document.commentForm.email.value=="")
    {
    // insert code here
    alert("An email address is required. Please enter your email address.");
    field.focus();
    return false;
    }
    else
    return true;
    }
    function checkPhone()
    {
    if (document.commentForm.phone.value=="")
    {
    // insert code here
    alert("A phone number is required. Please enter your phone number.");
    field.focus();
    return false;
    }
    else
    return true;
    }function checkComments()
    {
    if (document.commentForm.comments.value=="")
    {
    // insert code here
    confirm("Are you sure you want to submit without a comment?");
    field.focus();
    return false;
    }
    else
    return true;
    }
    </script>
    </head>
    <body>
    <form action="" name="commentForm" id="commentForm" onsubmit="checkComments()">
    <table width="412" border="0" cellspacing="0" cellpadding="5">
    <tr align="left" bgcolor="#CCCCCC"><td colspan="2" valign="middle"><h3>Contact Us </h3></td></tr>
    <tr bgcolor="#CCCCCC"><td colspan="2" align="left" valign="middle">We appreciate your comments please fill out the form and click submit. Someone from our customer service department will contact you shortly.</td></tr>
    <tr bgcolor="#CCCCCC"><td align="right" valign="middle">&nbsp;</td><td align="left" valign="middle">*These fields are required.</td></tr>
    <tr bgcolor="#CCCCCC"><td width="100" align="right" valign="middle"><h4>*Name:</h4></td><td align="left" valign="middle">

    <!-- name text box-->
    <input name="name" type="text" onblur="checkName();" size="35" />

    </td></tr>
    <tr bgcolor="#CCCCCC"><td align="right" valign="middle"><h4>*Email:</h4></td><td align="left" valign="middle">

    <!-- email text box-->
    <input name="email" type="text" size="35" onblur="checkEmail();"/>

    </td></tr>
    <tr bgcolor="#CCCCCC"><td align="right" valign="middle"><h4>Phone:&nbsp;</h4></td><td align="left" valign="middle">

    <!-- phone text box-->
    <input name="phone" type="text" size="35" onblur="checkPhone();"/>

    </td></tr>
    <tr bgcolor="#CCCCCC"><td align="right" valign="baseline">&nbsp;</td><td align="left">&nbsp;</td></tr>
    <tr bgcolor="#CCCCCC"><td align="right" valign="top"><h4>Comments:</h4></td><td align="left" valign="top">
    <!-- comments text area-->
    <textarea name="comments" cols="35" rows="8"></textarea>

    </td></tr>
    <tr bgcolor="#CCCCCC"><td>&nbsp;</td><td align="left">&nbsp;</td></tr>
    <tr bgcolor="#CCCCCC"><td>&nbsp;</td><td align="left" valign="top">

    <!-- submit button-->
    <input name="submit" type="submit" value="Submit" />

    </td></tr>
    <tr bgcolor="#CCCCCC"><td>&nbsp;</td><td align="left" valign="top">&nbsp;</td></tr>
    </table>
    </form>
    </body>
    </html>



    Can someone help me accomplish this? Thanks
     
    LiLChicaDees, Mar 29, 2009 IP