Sending form data into php file via ajax

Question

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!

ScaisEdge · Accepted Answer · 2017-02-05 13:06:58Z

2

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) {.....

edited Feb 5, 2017 at 13:06

answered Feb 5, 2017 at 12:58

ScaisEdge

133k10 gold badges98 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aisha Salman Over a year ago

ok e.g. here the value of tt variable would be the value of form name attribute?? @scaisEdge

ScaisEdge Over a year ago

@AishaSalman . i have added a sample for tt using the id and jquery id selector .. you must do the same for the others fields

Aisha Salman Over a year ago

Thank you so much! :) but my modal isn't closing after clicking on save button .... @scaisEdge

ScaisEdge Over a year ago

@AishaSalman . you should close or hide explicatally in your code .. eg: $('#your_modal_id').modal('hide');

plonknimbuzz Over a year ago

@AishaSalman just put $('#add-tsk').modal('hide'); after console.log('sent!');

Collectives™ on Stack Overflow

Sending form data into php file via ajax

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related