HTML表单提交到数据库并重定向到“谢谢”页面

Question

A simple popup HTML form when submits need to do two actions. 1. Send customer information to the existing database 2. Redirect customer to Thank you page.

With the help of another Stackoverflow member were able to work on this code. But,the code is not working. I feel that I am doing something terribly wrong to the code, sorry unable to figure it out. Please help!

Currently, the form is getting sent to database, but redirects to the existing Mailing list signup page, if I change the action to thank you page, then the form is sent to thank you page, but no submission to database.

I prefer to use Jquery, I am not much familiar with PHP, if someone can guide me, I can implement PHP as well. The form is getting redirected even if nothing entered in the Email Adress Input. Is there a way to tell the customer to enter valid email address and then to take him to Thankyou page? Thanks

Database address:" http://www.mywebsite.com/MailingList_subscribe.asp " Thank you page address: " https://www.mywebsite.com/Articles.asp?ID=252 "

HTML Header

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

$(document).ready(function(){
    $('#formId').submit(function(){
        $.ajax({
            type: "POST",
            url: "http://www.mywebsite.com/MailingList_subscribe.asp",
            context: document.body
        }).success(function() {
            location.href = "https://www.mywebsite.com/Articles.asp?ID=252";
        });
    });
  )};
</script>

HTML BODY:

 <form name="MailingList" id="formId" method="post" action="http://www.mywebsite.com/MailingList_subscribe.asp">  
        <input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28"> <br>
        <input type="submit" name="Submit"  value="Submit" width="260px">
      </form>

CSS:

input[type=text] {

padding:1px; border:1px solid #c6c7cc;
box-shadow: inset 0 1px 1px
-webkit-border-radius: 13px;
width: 98%;
font-size:14px;
font-family: Lucida Grande;
font-weight: regular;
margin-left: 2px;
margin-top:10px;

}

input[type=submit] {

background: #9B1C1F;
width: 100%;
font-family: Lucida Grande;
color: #ffffff;
font-weight: bold;
font-size:18px;
text-align:left;
margin-top:10px;
padding:5px 15px;
margin-left:0px;
border:0 none;
cursor:pointer;
display: inline-block;

}

Answer 1

$(document).ready(function(){
    $('#formId').submit(function(){
        $.ajax({
            type: "POST",
            url: "http://www.my website.com/MailingList_subscribe.asp",
            context: document.body
        }).success(function() {
            location.replace("https://www.teabeyond.com/Articles.asp?ID=252"); //<=== edit
        });
    });
  )};

And to force the user to enter valid email you can use

<input type=email />  

instead of

<input type=text />

Answer 2

Use input type="email" Easiest Email Validation but only works in modern browsers http://www.w3schools.com/html/html5_form_input_types.asp

I would recommend using email validation in PHP (on server side) for security reasons , because by-passing client side is very easy (one example is famous cURL library)

In PHP Email validation can be done this way :

$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}

Source: http://www.w3schools.com/php/php_form_url_email.asp