响应表单提交而不刷新页面

时间:2014-06-21 16:29:54

标签: jquery forms modal-dialog window onsubmit

我有一个向db提交数据的表单...我想让响应像弹出窗口一样出现在页面上,当用户点击按钮时,它会将他带到按钮附带的指定URL。

这是我的表格

<form method="post" class="myform" id="ajaxForm" action="php/processForm.php">

   <label for="Surname" id="title" class="one"> Surname: </label>
   <input name="Sname" type="text" required placeholder="Surname" />
   <div class="clear"></div>

   <label for="Fname" id="title">First Name: </label>
   <input name="Fname" type="text" required placeholder="First Name" />
   <div class="clear"></div>

   <label for="Email" id="title">Email address:</label> 
   <input name="Email" type="email" required placeholder="someone@yourdomain.com" />
   <div class="clear"></div>

   <label for="CompanyName" id="title">Company name:</label>
   <input type="text" name="CompanyName" placeholder="Company Name" />
   <div class="clear"></div>

   <label for="number" id="title">Phone Number: </label>
   <input name="number" type="tel" required placeholder="+23480123456789" />
   <div class="clear"></div>

   <label for="category" id="title">Category:</label> 
   <input type="text" name="category" placeholder="Job Category..e.g web design" />
   <div class="clear"></div>

   <label for="Job-Description" id="title">Tell us what you want:</label>
   <textarea name="Job-Description" required >Delete this and write a comprehensive description of what you want... </textarea>

   <button type="submit" name="submit" clas="signup-button"> Submit </button>

</form>

我的PHP脚本

$sname=$_POST['Sname'];
$fname=$_POST['Fname'];
$email=$_POST['Email'];
$company=$_POST['CompanyName'];
$phone=$_POST['number'];
$category=$_POST['category'];
$feedback=$_POST['Job-Description'];



  $sql="INSERT INTO $table_name ( sname, fname, email, company, phone, category, jobDescription) 
VALUES('$sname', '$fname', '$email', '$company', '$phone', '$category', '$feedback')";

$result = @mysql_query($sql,$connection) or die(mysql_error());

if($result){
  echo      'success';
} else {
  echo 'failed';
}

和jquery

   $( "#ajaxForm" ).submit(function(event) {
      event.preventDefault();
      $.ajax({
        url: 'php/processForm.php',
        type: 'POST',
        data:  $('#ajaxForm').serialize(),
        success: function(response) { 
          if(response == 'Success') {  
          $('section').append('<div id="message">Thank you for requesting our service, We will get back to you within 48hours....' +
                              '<div type="button" class="theButton"><a href="index.html"> OK </a> </div>' +
                              '</div>');
          }
        }
      });
    });

现在它似乎忽略了jquery,只是在屏幕上写成功,对此我是新手...... 如何使用&#34; message&#34;的id来制作div?看起来像弹出窗口?

0 个答案:

没有答案