2015-07-13 92 views
0

我想提交一个表单使用AJAX来防止页面刷新,然后将数据发送到后台的MYSQL数据库,但我无法弄清楚我做错了什么。如果我在表单标签中使用action =“SuggestionSchemeForm”,页面将正确发送数据,但是我宁愿使用AJAX来停止页面刷新。我已经看过多个问题和答案,但无法找到与我的特定问题有关的答案。任何人都可以看到我的错在哪里/提交表单而不刷新页面不工作

我的AJAX看起来像这样。

<script type="text javascript"> 
      $(function() 
      { 
       $('SuggestionForm').on('submit', function (e) 
       {=det        
       e.preventDefault(); 
       $.ajax(
       { 
        type: 'POST', 
        url: 'SuggestionSchemeForm.php', 
        dataType: 'html', 
        data: $('SuggestionForm').serialize(), 
        success: function() 
        { 
         alert('form was submitted'); 
        } 
       }); 
       }); 
      }); 
</script> 

这是我的PHP文件

<?php 
if($_POST) 
{ 
    require_once("../config.php"); 
    require_login(); 
    global $USER; 

    $servername = "localhost"; 
    $username = "root"; 
    $password = ""; 
    $dbname = "FTSuggestionTest"; 
    $firstName = $USER->firstname; 
    $lastName = $USER->lastname; 
    $currentUser =$USER->currentUser; 
    $userId = $USER->id; 

    $a=date("Y-m-d H:i:s"); 



    // Create connection 
    $conn = new mysqli($servername, $username, $password, $dbname); 
    // Check connection 
    if ($conn->connect_error) 
    { 
     die("Connection failed: " . $conn->connect_error); 
    } 

    $sql = "INSERT INTO enquiries (Id, Name, JobTitle, Department, Site,Suggestion, Impact, Processed, Status, Date, Location, BuildingNo) 
    VALUES ('$userId', '$_POST[firstname]', '$_POST[jobtitle]', '$_POST[department]', '$_POST[site]', '$_POST[suggestion]', '$_POST[impact]',  'NO', 'Submitted', '$a', '$_POST[location]', '$_POST[buildingNo]')"; 

    if ($conn->query($sql) === TRUE) 
    { 
     echo "New record created successfully for $_POST[firstname]"; 
    } 
    else 
    { 
    echo "Error: " . $sql . "<br>" . $conn->error; 
    } 

    $conn->close(); 


    exit; 
    } 
    ?> 

但是我可以写值到数据库中,当用户点击提交按钮的唯一方法是包括行动=“SuggestionSchemeForm”。

+1

你有一个错字'{= DET ' – machineaddict

+1

SuggestionForm is ID or class ??? – Bugfixer

+0

yup,在e.preventDefault之前输入错误(); –

回答

0

我已检查您的jQuery代码。我发现你还没有给出确切的选择器提交。把$( 'SuggestionForm ') OR $(' #SuggestionForm ')而不是$(' SuggestionForm')

<span id="maincontent"></span> 
<h2>Submit Suggestion</h2> 
<div class="box generalbox center clearfix"> 
<div class="no-overflow"> 
    <div class="container" style="background-image: url('http://www.worldmarkacademy.com/OurWorld/EditorBG.png'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: repeat; padding-bottom: 5px;"> 
     <br /> 
     <div class="mainbody" style="background-image: url('http://www.worldmarkacademy.com/SubmitSuggestion/Notepad.png'); background-repeat: no-repeat; margin-left: auto; margin-right: auto; margin-bottom: 10px; width: 646px; height: 800px !important; min-height: 100%; overflow: hidden;"> 
      <script> 
       $(function() 
     { 
      $('#SuggestionForm').on('submit', function (e) 
      {        
      //e.preventDefault(); 
      $.ajax(
      { 
       type: 'POST', 
       url: 'SuggestionSchemeForm.php', 
       dataType: "json", 
       data: $('#SuggestionForm').serialize(), 
       success: function() 
       { 
        alert('form was submitted'); 
       } 
      }); 
      return false; 
      }); 
     }); 
      </script> 
      <div class="main-form" style="margin-top: 100px;"> 
       <form name="SuggestionForm" id="SuggestionForm" method="post" > 

        <div> 
         <label style="display: inline-block; margin-left: 10px; letter-spacing: 2px; color: #007A8E;"> 
          <b>Name:</b> 
         </label> 
         <input id="chkBoxAnon"type="checkbox" style=" margin-left: 110px; outline: 1px solid #0078AE;" 
         name="Anonymous" value="Anonymous" onClick="CheckAnon();"> 
          <label style="margin-left: 2px; color: #0078AE;">Anonymous</label> 
         </div> 

        <input type="text" id="fname" name="firstname" style="height: 34px; width: 268px; margin-left: 10px; margin-top: 5px; color: #007A8E; 
            border: 1px solid #dedede; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" value="" 
        <? echo $firstName?> <? echo $lastName?>"> 


        <script type="text/javascript"> 
         var orginalName = document.getElementById("fname").value; 
         function CheckAnon() 
         { 
         var textname = document.getElementById("fname"); 
         if(document.getElementById("chkBoxAnon").checked == true) 
         { 
         textname.value = "Anonymous"; 
         } 
         else 
         { 
         textname.value = orginalName; 
         } 

         } 
        </script> 



        <label style="display: block; margin-left: 10px; margin-top: 10px; letter-spacing: 2px; color: #007A8E;"> 
         <b>Job Title:</b> 
        </label> 
        <input id="jobTitle" name="jobtitle" style="height: 34px; width: 268px; margin-left: 10px; margin-top: 5px; color: #007A8E; border: 1px solid #dedede; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" type="text" /> 


        <label style="display: block; margin-left: 10px; margin-top: 10px; letter-spacing: 2px; color: #007A8E;"> 
         <b>Site:</b> 
        </label> 
        <select id="site" name="site" style="margin-left: 10px; margin-top: 5px; height: 34px; width: 268px; color: #007A8E; padding: 5px; font-size: 14px; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" type="text"> 
         <option value="New york" style="color:#007A8E; ">New york</option> 
        </select> 
        <label style="display: block; margin-left: 10px; margin-top: 10px; letter-spacing: 2px; color: #007A8E;"> 
         <b>Area To Which Improvement Relates:</b> 
        </label> 
        <select id="buildingNo" name="buildingNo" style="margin-left: 10px; margin-top: 5px; height: 34px; width: 268px; color: #007A8E; padding: 5px; font-size: 14px; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" type="text"> 
         <option value="building No.4" style="color:#007A8E; ">Building No.4</option> 
         <option value="building No.6" style="color:#007A8E; ">Building No.6</option> 
        </select> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 
+0

嗨Bhavin谢谢你的回答,我按照你的建议做了修改,但我仍然得到相同的结果。 –

+0

你在php文件中获取表单值吗? –

+0

否这些值来自用户键入的文本框 –

-1

尝试

<form onsubmit="return false;" > 
+1

'e.preventDefault();'已经处理了这个 – empiric