Avatar of peter-cooper
peter-cooper
 asked on

Get values from custom form

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

jQueryAJAXPHP

Avatar of undefined
Last Comment
Rob

8/22/2022 - Mon
Rob

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()
peter-cooper

ASKER
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
Ray Paseur

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.
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER CERTIFIED SOLUTION
Member_2_248744

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
peter-cooper

ASKER
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.
peter-cooper

ASKER
Thanks once again
Rob

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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rob

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

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

ASKER
Thanks Rob. Ever considered moving? :-)
Rob

*laughing* I have, just not that far...
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy