フォームデータをajax経由でPHPファイルに送信

Question

ブートストラップモーダル内にフォームがあります。一意のIDを含むボタンからデータ属性を取得してから、そのデータ属性をフォーム保存ボタンに設定しています。スクリプトさ：

<script type="text/javascript"> 
    $('.alctskbtn').click(function(event) { 
    var pr = $(this).data('projct'); 
    $('.allocatetskmodal').find('.inputallacatetsk').attr('data-project', pr); 
    }); 
    $('.inputallacatetsk').click(function(event) { 
    event.preventDefault(); 
    /* Act on the event */ 
    var t = $(this); 
    var proj = $(this).data('project'); 
    var url = $('#prjfrm').attr('action'); 

    $.post(url,{proj : proj}, function(value) { 
    /*optional stuff to do after success */ 
    console.log("sent!"); 
    }); 
    }); 
</script> 

私は、PHPファイルになく、ボタン、ブートストラップモーダルを「保存」をクリックした後、フォームデータとともに、この一意のIDを送信するには、stuck.Hereは、PHPファイルのコードで保管：

<?php 

include 'connection.php'; 

$proj_id = $_POST['proj']; 

if(isset($_POST['addtsk'])) 
{ 

    $tt = $_POST['tt']; 
    $td = $_POST['td']; 
    $tsd = $_POST['tsd']; 
    $ted = $_POST['ted']; 
    $tstat = $_POST['tstat']; 

    $qry = "insert into task (project_id, task_name, task_duration, task_start_date, task_end_date, task_status, creation_date,is_active) 
    values ($proj_id,'$tt','$td','$tsd','$ted','$tstat',now(),1)"; 

    $run = mysqli_query($con,$qry); 

} 
?> 

ここは、Htmlコードです。

<!-- Add Task Modal --> 
<div class="modal allocatetskmodal fade" id="add-tsk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header add-prj"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title add-prj" id="myModalLabel">Add Task</h4> 
     </div> 
     <div class="modal-body add-prj"> 
      <form id="prjfrm" method="post" action="tskscript.php"> 
      <!-- <label>Project ID</label> <input id="pid" type="text" name="pid" placeholder="ID"> <br><br> --> 
      <label>Task Title</label><input id="pt" type="text" name="tt" placeholder="Title" required> <br><br> 
     <!-- <label>Task Description</label> <input id="pdescr" type="text" name="pdescr" placeholder="Description" required> <br><br> --> 
      <label>Task Duration</label><input id="pd" type="text" name="td" placeholder="Duration" required> <br><br> 
      <label>Task Start Date</label><input id="psd" type="text" name="tsd" placeholder="Start Date" required> <br><br> 
      <label>Task End Date</label><input id="ped" type="text" name="ted" placeholder="End Date" required> <br><br> 
      <label>Task Status</label> 
      <select id="tstat" name="tstat"> 
      <option value="Completed">Completed</option> 
      <option value="Pending">Pending</option> 
      </select> 
     </div> 
     <div class="modal-footer add-prj"> 
     <button type="submit" name="addtsk" class="btn btn-default add-prj inputallacatetsk">Save</button> 
     <button name="close" type="button" class="btn btn-default add-prj" data-dismiss="modal">Close</button> 

     </div> 
     </form> 
    </div> 
    </div> 
</div> 

私をご案内ください。ありがとうございました！

Answer 1

あなたはモードのデータを送信する必要がある場合は、この命令では、あなただけのproj valeu

$.post(url,{proj : proj}, function(value) {..... 

を送信しているあなたは、あなたがポストなどのために必要な値を追加する必要があります

// seems that your tt field is with pt id so 
    your_tt = $("#pt").val(); 
    ..... 

$.post(url, 
    {proj : proj, 
    addtsk: your_addtsk, 
    tt: your_tt, 
    td : your_td, 
    tsd : your_tsd, 
    ted: your_ted, 
    tstat: your_tstad 
    }, function(value) {.....