Transmit data from a form row to an external PHP script

Question

Transmit data from a form row to an external PHP script

I'm facing an issue that I need help resolving.

My challenge is to transfer data from a form ROW to a php file.

Below is the initial PHP code (embedded within an echo statement where values are fetched from a MySQLi query):

<form id=\"comedivid\" method=\"post\">
    <input class=\"numer-qua\" type=\"number\" id=\"dadivid\" min=\"0\" max=".$_GET['qua']." autofocus autocomplete=\"off\" name=\"dadivid\" maxlength=\"4\" size=\"5\">
    <input type=\"hidden\" value=\"".$row["id_tes"]."\" name=\"ord\" id=\"ord\">
    <input type=\"hidden\" value=\"".$_GET['codice']."\" name=\"cod\" id=\"cod\">
    <input type=\"hidden\" value=\"".$_GET['qua']."\" name=\"arr\" id=\"arr\">
    <input type=\"hidden\" value=\"".$row['descri']."\" name=\"desc\" id=\"desc\">
    <input type=\"hidden\" value=\"".$row['unimis']."\" name=\"um\" id=\"um\">
    <input type=\"hidden\" value=\"".$row['quanti']."\" name=\"qua\" id=\"qua\">
    <input type=\"hidden\" value=\"".$row['prelis']."\" name=\"pre\" id=\"pre\">
    <input type=\"hidden\" value=\"".$row['sconto']."\" name=\"sco\" id=\"sco\">
    <input type=\"hidden\" value=\"".$row['codvat']."\" name=\"cva\" id=\"cva\">
    <input type=\"hidden\" value=\"".$row['pervat']."\" name=\"iva\" id=\"iva\">
    <input type=\"hidden\" value=\"".$row['codric']."\" name=\"ric\" id=\"ric\">

    <button id=\"dividili\" class=\"btn btn-blue\" type=\"submit\"><i class=\"fa fa-copy\"> Dividi Riga</i></button>
            \n";

The form is nested within a table and the query may yield multiple results.

Here's the AJAX code snippet:

$("#dividili").click(function(){
$(this).closest("form#comedivid").submit(function(event) {
    event.preventDefault();
    var dadivid = $("#dadivid").val();
    var ord = $("#ord").val();
    var cod = $("#cod").val();
    var arr = $("#arr").val();
    var desc = $("#desc").val();
    var um = $("#um").val();
    var qua = $("#qua").val();
    var pre = $("#pre").val();
    var sco = $("#sco").val();
    var cva = $("#cva").val();
    var iva = $("#iva").val();
    var ric = $("#ric").val();


    $.ajax({
        type: "POST",
        url: "../../modules/acquis/dividi.php",
        data: "dadivid=" + dadivid + "&ord=" + ord + "&cod=" + cod + "&arr=" + arr + "&desc=" + desc + "&um=" + um + "&qua=" + qua + "&pre=" + pre + "&sco=" + sco + "&cva=" + cva + "&iva=" + iva + "&ric=" + ric,
        success: function(){alert('success');}
    });
});

});

However, I am encountering issues as no data is being sent to the URL.

Could this be due to the form being in multiple rows? Or could there be an error in my code?

I have also tried using serialize with no luck.

Below is the code snippet:

$("#dividili").click(function(e){ 

    $.ajax( {
      type: "POST",
      url: "../../modules/acquis/dividi.php",
      data: $('#comedivid').serialize(),
      success: function( response ) {}
    });
});

Any assistance on this matter would be highly appreciated. Thank you!

php jquery ajax

Answer 1

Answer №1

One recommendation I have is to utilize the serialize() function:

$("#dividili").click(function(){
$(this).closest("form#comedivid").submit(function(event) {
    event.preventDefault();

    var form_data = $('form#comedivid').serialize();
    // or
    var form_data = $(this).serialize();

    // Check the output for accuracy
    console.log( form_data );
    // or
    alert( form_data );

    $.ajax({
        type    : "POST",
        url     : "../../modules/acquis/dividi.php",
        data    : form_data,
        success : function(){alert('success');}
    });
});

If you have already tried this and the output seems correct, then there may be an issue with your PHP code. To troubleshoot, you can add this at the beginning of your file to see what was received:

<?php

echo '<pre>';
print_r( $_POST );// or $_REQUEST for both $_POST and $_GET
echo '</pre>';
die;

// Continue with the rest of your PHP code...

If the data is being received properly in PHP, ensure that you are accessing the data correctly like so: $dadivid = $_POST["dadivid"];

Answer 2

One recommendation I have is to utilize the serialize() function:

$("#dividili").click(function(){
$(this).closest("form#comedivid").submit(function(event) {
    event.preventDefault();

    var form_data = $('form#comedivid').serialize();
    // or
    var form_data = $(this).serialize();

    // Check the output for accuracy
    console.log( form_data );
    // or
    alert( form_data );

    $.ajax({
        type    : "POST",
        url     : "../../modules/acquis/dividi.php",
        data    : form_data,
        success : function(){alert('success');}
    });
});

If you have already tried this and the output seems correct, then there may be an issue with your PHP code. To troubleshoot, you can add this at the beginning of your file to see what was received:

<?php

echo '<pre>';
print_r( $_POST );// or $_REQUEST for both $_POST and $_GET
echo '</pre>';
die;

// Continue with the rest of your PHP code...

If the data is being received properly in PHP, ensure that you are accessing the data correctly like so: $dadivid = $_POST["dadivid"];

Answer 3

Answer №2

When using the jQuery 'serialize' method, data is formatted similarly to a GET query form.

However, it's important to keep in mind that the length of the data may be limited by the Apache configuration.

To work around this limitation, you can try using a custom method like the one below:

(function($) {
    $.fn.serializeObject = function () {
        "use strict";
        var result = {};
        var extend = function (i, element) {
            var node = result[element.name];
            if ('undefined' !== typeof node && node !== null) {
                if ($.isArray(node)) {
                    node.push(element.value);
                } else {
                    result[element.name] = [node, element.value];
                }
            } else {
                result[element.name] = element.value;
            }
        };
        $.each(this.serializeArray(), extend);
        return result;
    };
});

To use this custom method, simply replace the default jQuery 'serialize' method with 'serializeObject'.

Answer 4

When using the jQuery 'serialize' method, data is formatted similarly to a GET query form.

However, it's important to keep in mind that the length of the data may be limited by the Apache configuration.

To work around this limitation, you can try using a custom method like the one below:

(function($) {
    $.fn.serializeObject = function () {
        "use strict";
        var result = {};
        var extend = function (i, element) {
            var node = result[element.name];
            if ('undefined' !== typeof node && node !== null) {
                if ($.isArray(node)) {
                    node.push(element.value);
                } else {
                    result[element.name] = [node, element.value];
                }
            } else {
                result[element.name] = element.value;
            }
        };
        $.each(this.serializeArray(), extend);
        return result;
    };
});

To use this custom method, simply replace the default jQuery 'serialize' method with 'serializeObject'.

Transmit data from a form row to an external PHP script

Answer №1

Answer №2

Similar questions

Uploading large files on Vuejs causes the browser to crash

Add a product to your shopping cart in Opencart with the help of Ajax manually

Permission not granted on Internet Explorer versions 10 and 11 for ajax requests targeting localhost

What issues could arise from utilizing PHP for generating variables within my CSS file?

Difficulty in packaging JavaScript resources within Laravel Project

I am attempting to establish a connection to a database using PDO within the CodeIgniter framework

Is it possible to track down the usage of the var_dump function?

Transfering data to Handlebars while rendering a template

I am experiencing an issue where I cannot select a row in datatables to transfer the data to a text field in Laravel 5

Steps to change the name of the key in a foreach iteration?

What is the method to link a progress bar to the value of a text input?

Transfer image data in JSON format by compressing it into a base64 string from an Android device to a PHP web

Create a Flot graph using data from a database

The userscript will keep the window open as long as it remains inactive

Eliminate excess space around images in Bootstrap

"Enhance Your WordPress Website with the Power of jQuery

Streamline retrieval of alphanumeric indexing within json

executing jQuery toggle on freshly generated content

The content of XMLHttpRequest is accessible via the property response

Issue with anchor tag not functioning properly within toggle div