Home/ Questions/Q 8533287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T09:55:44+00:00

Below is a simplified example that demonstrates the problem I am having. One hundred

  • 0

Below is a simplified example that demonstrates the problem I am having. One hundred percent of code is posted below.

Three files work together: testa.php, testb.php, and testc.js. (FWIW, testa.php could function as the index.php, but this is just a demo)

OVERVIEW:

TESTA.PHP

  • When user clicks anchor tag, sends value to testb.php
  • Receives ajax response from testb.php into div #reportstable, within FORM structure
  • Form is submitted to itself, so it prints $_POST data –

TESTB.PHP

  • receives value from TESTA.PHP, via ajax
  • outputs table that corresponds to received values
  • (In this example, I removed how received value is used, but still retained this structure as it affects the jQuery in testc.js)

TESTC.JS

  • the jQuery that makes it (partially) work

PROBLEM 1: If user adds more than one “document” (i.e. row), only data for the last document appears in the POST data..

PROBLEM2: DocTitle and FileName IDs (dt1, fn1) are not POSTED as they appear in the DOM. In the DOM, their IDs are incremented properly (dt11, dt12, dt13, etc) but when POSTed only one comes through and it has not been incremented. (Use firebug to inspect table elements after adding a couple of documents.

PROBLEM3: First click doesn’t “take” when clicking the “choose file” anchor when adding a new document. Any thoughts on this one?

TESTA.PHP

<?php   
    If (empty($_POST)===false) {
        echo '<pre>';
        print_r($_POST);
        echo '</pre>';
        die();
    }
?>
<html><body>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-custom-file-input.js"></script>
<script type="text/javascript" src="testc.js"></script>
<br />

Project*:<br />
<a href="#" id="project_pick">Click Me</a>

<form action="" method="post">
    <div id="reportstable">
    </div>
</form>

</body></html>

TESTB.PHP

<?php
    $project_id = $_POST['project_id'];

    if ($project_id == 5) {
        echo '
            <table id="DocTable">
                <tr>
                    <th width="150">Document Title</th>
                    <th width="150">File Name</th>
                </tr>
                <tr name="tr2" id="tr2" style="display:none;">
                    <td><input type="text" name="dt1" id="dt1"></td>
                    <td>
                        <input type="hidden" name="fn1" id="fn1">
                        <span id="sp1"><a href="#" id="ah1">choose file</a><span>
                    </td>
                </tr>
            </table>
            <br />
            <a href="#" id="add_row">add document</a><br />
            <br />
            <input type="submit" name="submit" id="submit_it" value="Submit">
        ';
    }

TESTC.JS

$(function(){

var count = 1;
//*******************************************************************    
$('#project_pick').click(function(e) {
    $(this).hide();
    $.ajax({
        type: "POST",
        url: "testb.php",
        data: "project_id=5",
        success:function(data){
            $('#reportstable').html(data);
        }
    });
});
//*******************************************************************    
$(document).on('click','#ah11',function() {
    $(this).file().choose(function(e, input) {
        $('#fn11').val(input.val());
        $('#sp11').html(input.val());
        $('#sp11').css('color','grey');
    });
});
//*******************************************************************    
$(document).on('click','#ah12',function() {
    $(this).file().choose(function(e, input) {
        $('#fn12').val(input.val());
        $('#sp12').html(input.val());
        $('#sp12').css('color','grey');
    });
});
//*******************************************************************    
$(document).on('click','#ah13',function() {
    $(this).file().choose(function(e, input) {
        $('#fn13').val(input.val());
        $('#sp13').html(input.val());
        $('#sp13').css('color','grey');
    });
});
//*******************************************************************    
$(document).on('click', '#add_row', function() {
    $("table#DocTable tr:nth-child(2)")
        .clone()
        .show()
        .find("a, input, span, tr").each(function() {
            $(this)
                .val('')
                .attr('id', function(_, id) {
                    return id + count;
                    });
        })
        .end()
        .appendTo("table");

    count++;
    if (count == 4) {
        $('#add_row').prop('disabled', 'disabled');
    }
}); //end fn add_row
//*******************************************************************    
$(document).on('click', '#submit_it', function() {
    alert('This will be submitted now');
});
//*******************************************************************
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It seems in your javascript that you are changing the values of the id attribute only. However, when you post a form, the id attribute is irrelevant and not posted, you need the name attribute instead.

    So where you are changing id’s, you really should be changing names (and id’s to if you really need them as they need to be unique).

    However, a far easier solution would be to use arrays for names, like:

    <input type="text" name="dt[]">

    If you copy / clone elements with these names and post the form, you will get an array in your $_POST['dt'].

    • 0