Aisha Salman Aisha Salman - 4 years ago 58
jQuery Question

Sending form data into php file via ajax

There is a form inside a bootstrap modal.First I'm getting data attribute from a button which contains a unique id and then I'm setting that data attribute on form save button.Here is the script:

<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>


I want to send this unique id along with form data into a php file but after clicking on "save" button bootstrap modal kept stuck.Here is the php file code:

<?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);

}
?>


Here is the Html Code:

<!-- 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>


Please guide me. Thank you!

Answer Source

In this instruction you are sending only the proj valeu

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

if you need send mode data you should add the value you need for post eg:

 // 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) {.....
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download