2017-03-14 11 views
1

私は管理パネルを作成しようとしています。 私は同じページに2つのフォームを作成し、AjaxとPHPを使用してそれらを処理しています。AjaxとPHPを使用して同じページに複数のフォーム送信を処理する方法は?

コードを書きましたが、データがデータベースに保存されていません。

Data_entry.php

これは、私がタブとそのコンテンツを作成しているフロントエンドのコードファイルです。

<ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#course">Course Entry</a></li> 
      <li><a data-toggle="tab" href="#exam">Exam Entry</a></li> 
      <li><a data-toggle="tab" href="#topic">Topic/Section Entry</a></li> 
      </ul> 
      <br> 
      <div class="tab-content"> 
      <!-- Course Entry --> 
      <div id="course" class="tab-pane fade in active tab_wrapper"> 
       <h3>Course Entry:</h3><hr> 
       <div id="message_course"></div> 
       <div id="message_course_success"></div> 
       <div class="form_entry"> 
       <form> 
       <div class="form-group"> 
        <label for="course_name">Course Name:</label> 
        <input type="text" class="form-control" id="course_name"> 
       </div> 
       <button type="submit" name="course_submit" id="course_submit" class="btn btn-primary">Submit</button> 
       </form> 
       </div> 

      </div> 
      <!-- Exam Entry --> 
      <div id="exam" class="tab-pane fade in tab_wrapper"> 
       <h3>Exam Entry</h3><hr> 
       <div id="message_exam"></div> 
       <div id="message_exam_success"></div> 
       <div class="form_entry"> 
       <form> 
       <div class="form-group"> 
        <label for="course_name">Exam Name:</label> 
        <input type="text" class="form-control" id="exam_name"> 
       </div> 
       <div class="form-group"> 
        <label for="exam_course_name">Course Name:</label> 
        <input type="text" class="form-control" id="exam_course_name"> 
       </div> 
       <button type="submit" name="exam_submit" id="exam_submit" class="btn btn-primary">Submit</button> 
       </form> 
       </div> 

      </div> 
      <!-- Topic/Section Entry --> 
      <div id="topic" class="tab-pane fade tab_wrapper"> 
       <h3>Topic Entry</h3> 
       <p>Some content in menu 2.</p> 
      </div> 
      </div> 

Data_entry.js

は、ここで私は、フォームデータを処理するためのJavaScript/Ajaxの一部を書かれています。

$(document).ready(function(){ 

    $("#course_submit").click(function(){ 

    var cname = $("#course_name").val(); 

    $.ajax({ 
     type: "POST", 
     url: "data_entry_backend.php", 
     data: {coursename: cname, action: "course_submit"}, 
     success: function(result){ 
     if(result == 'true'){ 
      $("#message_course_success").html("Successfully entered the data."); 
      $("#message_course").hide(); 
      $("#message_course_success").fadeIn(700); 
     }else{ 
      $("#message_course").html(result); 
      $("#message_course_success").hide(); 
      $("#message_course").fadeIn(700); 
     } 
     } 
    }); 

    return false; 
    }); 

    $("#exam_submit").click(function(){ 

    var ename = $("#exam_name").val(); 
    var ecname = $("#exam_course_name").val(); 

    $.ajax({ 
     type: "POST", 
     url: "data_entry_backend.php", 
     data: {examname: ename, examcoursename: ecname, action: "exam_submit"}, 
     success: function(result){ 
     if(result == 'true'){ 
      $("#message_exam_success").html("Successfully entered the data."); 
      $("#message_exam").hide(); 
      $("#message_exam_success").fadeIn(700); 
     }else{ 
      $("#message_exam").html(result); 
      $("#message_exam_success").hide(); 
      $("#message_exam").fadeIn(700); 
     } 
     } 
    }); 

    return false; 
    }); 

}); 

data_entry_backend.php

私はデータベース

<?php 

include 'core/init.php'; 
$con = $GLOBALS['con'];  //$GLOBALS NOT $GLOBAL 

$errors = array(); 

if(isset($_POST) === true && empty($_POST) === false){ 

    if(isset($_POST['action']) && $_POST['action'] === "course_submit"){ 

    $coursename = strtolower(sanitize($_POST['coursename'])); 

    if(course_exists($coursename) === true){ 
     echo "Course already exists!"; 
    } 
    if(empty($coursename) === false){ 
     echo "Please enter a value!"; 
    } 

     $count_err = count($errors); 

     if(!empty($errors)){     // if there are errors then return them one by one to login.js and print them 
      for($i=0;$i<$count_err;$i++){  // else set the session by crosschecking username and password with database 
      echo $errors[$i].'<br>'; 
      } 
     } 
     else{ 

     mysqli_query($con,"INSERT INTO `courses` (`course_name`) VALUES('$coursename')"); 
     $query_run = mysqli_query($con,"SELECT `course_id` FROM `courses` WHERE `course_name` = '$coursename'"); 
     $query_result = mysqli_num_rows($query_run); 

     if($query_result == 1){ 
      echo 'true'; 
     }else{ 
      echo 'Could not enter the data'; 
     } 

     } 

    } 

    else if(isset($_POST['action']) && $_POST['action'] === "exam_submit"){ 

     $examname = strtolower(sanitize($_POST['examname'])); 
     $examcoursename = strtolower(sanitize($_POST['examcoursename'])); 

     if(exam_exists($examname) === true){ 
     $errors[] = "Course already exists!"; 
     } 

     $count_err = count($errors); 

     if(!empty($errors)){     // if there are errors then return them one by one to login.js and print them 
      for($i=0;$i<$count_err;$i++){  // else set the session by crosschecking username and password with database 
       echo $errors[$i].'<br>'; 
      } 
     } 
     else{ 

      $result = mysqli_fetch_assoc(mysqli_query($con,"SELECT `course_id` FROM `courses` WHERE `course_name` = '$examcoursename'")); 
      $course_id =$result['course_id'] 

      mysqli_query($con,"INSERT INTO `exams` (`exam_name`,`course_id`) VALUES('$coursename','$course_id')"); 
      $query_run = mysqli_query($con,"SELECT `exam_id` FROM `exams` WHERE `exam_name` = '$examname'"); 
      $query_result = mysqli_num_rows($query_run); 

      if($query_result == 1){ 
      echo 'true'; 
      }else{ 
      echo 'Could not enter the data'; 
      } 

     } 
    } 

} 

?> 
+1

すべてのエラーが不足していますか? PHPは何かを返しますか? – jonmrich

+3

だから正確に問題がある – RiggsFolly

+0

彼はすでに "私はコードを書いたが、データはデータベースに保存されていない"という問題について語った。 – Black

答えて

1

にデータを格納するために、エンドコードを書き戻しているところでは、このようにそれを試してみてくださいです:

  1. 削除<form>ラップ、jq経由で送信しているので、必要ありませんueryとアヤックス。
  2. ボタンタイプをsubmitからbuttonに変更します。
  3. </body>タグの前に必ずスクリプトを挿入してください。

これで、サーバーは最終的にajaxリクエストを受信し、処理できます。今あなたのdata_entry_backend.phpがいいですかどうかをチェックする必要があります。

Data_entry.php

<ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#course">Course Entry</a></li> 
      <li><a data-toggle="tab" href="#exam">Exam Entry</a></li> 
      <li><a data-toggle="tab" href="#topic">Topic/Section Entry</a></li> 
      </ul> 
      <br> 
      <div class="tab-content"> 
      <!-- Course Entry --> 
      <div id="course" class="tab-pane fade in active tab_wrapper"> 
       <h3>Course Entry:</h3><hr> 
       <div id="message_course"></div> 
       <div id="message_course_success"></div> 
       <div class="form_entry"> 

       <div class="form-group"> 
        <label for="course_name">Course Name:</label> 
        <input type="text" class="form-control" id="course_name"> 
       </div> 
       <button type="button" name="course_submit" id="course_submit" class="btn btn-primary">Submit</button> 

       </div> 

      </div> 
      <!-- Exam Entry --> 
      <div id="exam" class="tab-pane fade in tab_wrapper"> 
       <h3>Exam Entry</h3><hr> 
       <div id="message_exam"></div> 
       <div id="message_exam_success"></div> 
       <div class="form_entry"> 

       <div class="form-group"> 
        <label for="course_name">Exam Name:</label> 
        <input type="text" class="form-control" id="exam_name"> 
       </div> 
       <div class="form-group"> 
        <label for="exam_course_name">Course Name:</label> 
        <input type="text" class="form-control" id="exam_course_name"> 
       </div> 
       <button type="button" name="exam_submit" id="exam_submit" class="btn btn-primary">Submit</button> 

       </div> 

      </div> 
      <!-- Topic/Section Entry --> 
      <div id="topic" class="tab-pane fade tab_wrapper"> 
       <h3>Topic Entry</h3> 
       <p>Some content in menu 2.</p> 
      </div> 
      </div> 

<script src="jquery-3.1.1.min.js"></script> 
<script src="Data_entry.js"></script> 

data_entry_backend.php

また、ライン上のセミコロン63

$course_id = $result['course_id']

+0

まだ動作していません。データはdata_entry_backend.phpに送られますが、クエリは渡されません。 –

+0

しかし、今度はデータをサーバーに送信します。データが成功するかどうか確認できますか?行動をエコーし​​た場合、どのような出力が得られますか? 'echo $ _POST ['action'];' デバッグのためにあなたの投稿をここに出力しようとします:http://stackoverflow.com/a/7093446/4684797 – Black

+0

データが到着しています...もし 'echo $ coursename 'data_entry_backed.phpで成功した場合、それは正常に終了します。 –

関連する問題