We help IT Professionals succeed at work.

Get values from custom form

peter-cooper
peter-cooper asked
on
284 Views
Last Modified: 2014-12-01
I am in a bit of a dilemma and not sure of the best way to proceed.  The code I am using queries php using ajax and returns the data successfully. However, I have a form that is triggered from a click event and what I need to do is capture the values from that form and append to the data that I already have so I can send to php for db processing.

Brief scenario:

If the data == 'New Intake' this triggers the form and when the action button is pressed, capture the form values to join with the existing data and send to php for processing.

I have looked at this for some time now and cannot see how to do this, hence the post. I would be grateful if someone help me find a solution to this. I am using jtable to display and process the data and I have only posted the relevant part of the code because it is quite long. Many thanks

jQuery/Ajax

sendbtn: {
  title: 'Action',
  width: '1%',
  sorting: false,
  edit: false,
  display: function(data) {
    var $image = $('<span><img src="css/themes/lightcolor/icon-action.png" style="display: block; margin: 0 auto; cursor:pointer;"/></span>');

    $image.click(function() {
      var $selectedRows = $('#setActionsScheduleShow').jtable('selectedRows');
      $selectedRows.each(function() {
        var record = $(this).data('record');
        var id = record.id;
        var service = record.service;
        var dept = record.department;
        var activity = record.activity;
        var company = record.company;
        var user = record.user;
        var item = record.item;
        var address = record.address;
        //alert(id + ' ' + service + ' ' + activity + ' '  + dept + ' ' + company); 

        var data = {
          id: id,
          service: service,
          company: company,
          dept: dept,
          activity: activity,
          user: user,
          item: item,
          address: address
        }
        $.ajax({
          type: "POST",
          url: "boxActionTemp.php",
          data: data,
          success: function(data) {
            //alert(data);
            if (data == 'error') {
              notif({
                msg: 'There was an error actioning your request.<br />' + 'Please inform the system administrator.' + 'Thank you.',
                type: "default",
                position: "center",
                width: 490,
                height: 75,
                multiline: true,
                timeout: 6000,
                autohide: true,
                opacity: 0.9,
                fade: 10,
              });
            } else if (data == 'New Intake') {
              //alert ('new Intake');
              $('#rackInput').show();
              var $dialog = $('#rackIntakeForm');
              $dialog.dialog({
                autoOpen: true,
                modal: true,
                title: 'Please input your rack details',
                width: 280,
                height: 280,
                draggable: true,
                resizable: false,
                close: function(event, ui) {
                    $("#rackIntakeForm").validate().resetForm();
                    //$( this ).dialog( "close" );
                    $("#rackIntakeForm").get(0).reset();
                    $("#rack, #column, #row, #bay").val(' ');
                  }
                  // buttons: {
                  //Close: function() {
                  //$( this ).dialog( "close" );
                  //$("#frmreport").get(0).reset();
                  // }
                  // }

              });

            } else {
              notif({
                msg: 'You have successfully actioned your request for ' + activity + '<br /><br /><b><font color="black">' + data + '</b></font>' + '<br /><br />This update was successfully added to the database.<br /><br />Thank you.',
                type: "defaultSuccess",
                position: "center",
                width: 490,
                height: 75,
                multiline: true,
                timeout: 6000,
                autohide: true,
                opacity: 0.9,
                fade: 10,
              });

              $('#setActionsScheduleShow').jtable('load');
            }
          }
        });
      });
    });
    return $image;
  }
}

Open in new window


boxActionTemp.php

<?php
session_start();

$connect = mysql_connect("localhost", "root", "") or die(mysql_error());
//If this Fails at least place it in a JSON so you can see IT
$db = mysql_select_db("sample");

// test vars from jquery form
$id          = mysql_real_escape_string($_POST['id']);
$company     = mysql_real_escape_string($_POST['company']);
$user        = mysql_real_escape_string($_POST['user']);
$activity    = mysql_real_escape_string($_POST['activity']);
$service     = mysql_real_escape_string($_POST['service']);
$item        = mysql_real_escape_string($_POST['item']);
$address     = mysql_real_escape_string($_POST['address']);
$newdate     = $date[2] . '-' . $date[1] . '-' . $date[0];
$Displaydate = $date[0] . '-' . $date[1] . '-' . $date[2];
$qty         = mysql_real_escape_string($_POST['rcyqty']); // never used */
$authorised  = mysql_real_escape_string($_SESSION['kt_name_usr']);
$dept        = mysql_real_escape_string($_POST['dept']);

if ($id == "")
{
    echo 'error';
}
else if ($activity == 'New Intake')
{
    echo 'New Intake';
}
else
{
    $output = 'Company: ' . ' ' . $company;
    $output .= '<br />';
    $output .= 'Address: ' . ' ' . $address;
    $output .= '<br />';
    $output .= 'User: ' . ' ' . $user;
    $output .= '<br />';
    $output .= 'Activity: ' . ' ' . $activity;
    $output .= '<br />';
    $output .= 'Service: ' . ' ' . $service;
    $output .= '<br />';
    $output .= 'Item: ' . ' ' . $item;
    echo ($output);
    
    /* $sql = "INSERT INTO `act` (service, activity, department, company, address, user,  date, quantity, type, new)";
    $sql .= "VALUES ('$service', '$activity', '$dept', '$company', '$address', '$requested', NOW(), '$qty', '$type', 1)";
    $result = mysql_query($sql) or die ('{"opp":"error","box":"' . mysql_error() . '"}'); */
}
?>

Open in new window


html

<form id="rackIntakeForm" method="post">
  <table id="rackTable" border="0">
    <tr>
      <td>Rack:</td>
      <td></td>
      <td><input id="rack" name="rack"></td>
    </tr>
    <tr>
      <td>Column:</td>
      <td></td>
      <td><input id="column" name="column"></td>
    </tr>
    <tr>
      <td>Row:</td>
      <td></td>
      <td><input id="row" name="row"></td>
    </tr>
    <tr>
      <td>Bay:</td>
      <td></td>
      <td><input id="bay" name="bay"></td>
    </tr>
    <tr>
      <td>Size:</td>
      <td></td>
      <td>
        <select id="boxSelect" name="size">
          <option value="" selected> Choose box size </option>
          <option value="S"> Standard </option>
          <option value="P"> Printout </option>
          <option value="O"> Other </option>
          <option value="T"> Transfer </option>
        </select>
      </td>
      <br />
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td><br /><input class="addprofilesubmit" type="submit" name="submit" value="Action"></td>
    </tr>
  </table>
</form>

Open in new window

Comment
Watch Question

RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Simple demo: http://jsbin.com/vowode/1/edit?js,console,output

The idea would be to serialize the forms data and add it to the data you pass via ajax:

$("#rackIntakeForm").serialize()

Author

Commented:
I am aware of the serialize function but am having trouble adding the values to the data that is passed to ajax. Could you do example please. The link you supplied only deals with the basic coding but not how to merge with existing data. Thanks
Most Valuable Expert 2011
Author of the Year 2014

Commented:
Let me suggest a slightly different design concept.  Every AJAX call to the server will send some element of data (otherwise, why bother) so just accept these data elements on the server and keep them there, in the database, 100% of the time.  If you design your application with this idea in mind you will build up a knowledge base about your clients that will rival what Google knows about you.
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Cheers Slick. Got me started in the right direction and before I read your post I had in fact been dabbling with 2 ajax calls. Thank you.

Author

Commented:
Thanks once again
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Expanding on my initial post, you just concatenate the data together:

e.g.

$(function () {
    var myObject = {
        a: {
            one: 1,
            two: 2,
            three: 3
        },
        b: [1, 2, 3]
    };
    console.log($("#rackIntakeForm").serialize());
    $("#rackIntakeForm").on('submit', function (e) {
        alert(e);
        e.preventDefault();
        e.stopPropagation();
        $.ajax({
            url: 'request.php',
            data: $("#rackIntakeForm").serialize() + '&' + decodeURIComponent($.param(myObject)),
            method: 'post',
            success: function (data) {
                $("#result").html('<pre>'+data+'</pre>');
            }
        });
        return false;
    });
});

Open in new window

RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
ah well... that's what you get for living in another timezone *laughing*.

You may get something out of what I've posted :)

Author

Commented:
Thanks Rob. Ever considered moving? :-)
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
*laughing* I have, just not that far...
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.