jQuery serialize method returns null

Question

I am trying to submit the form using jQuery but the serialize method returns null. What's going wrong? Help is very much appreciated.

Here is my code.

HTML / PHP code

<TR>
    <FORM id="frmUnitDetails<?php echo $ctr;?>" name="frmUnitDetails<?php echo $ctr;?>" action="./getServPersonsStatsUnit.php" method="post" target="_blank">
    <TD align="center" width="300px">
        <label id="unit<?php echo $ctr;?>" for="unit<?php echo $ctr;?>"><?php echo $row["UNIT"];?></label>
        <input type="hidden" id="unit<?php echo $ctr;?>" name="unit<?php echo $ctr;?>" value="<?php echo $row["UNIT"];?>">
        <input type="hidden" id="month<?php echo $ctr;?>" name="month<?php echo $ctr;?>" value="<?php echo $date;?>">
        <br>
        <INPUT id="showDetails" name="showDetails" type="submit" value="Show Details" onclick="submitFrm('frmUnitDetails<?php echo $ctr;?>')">
    </TD>
    <TD align="right">
        <INPUT type="text" id="ele<?php echo $ctr;?>" name="ele<?php echo $ctr;?>" value="<?php echo $row["ELECT_STAFF"];?>" style="text-align:right;" size="3" readonly="readonly">
    </TD>
    <TD align="right">
        <INPUT type="text" id="ele_sta_cnt<?php echo $ctr;?>" name="ele_sta_cnt<?php echo $ctr;?>" value="<?php echo $ele_sta_cnt;?>" style="text-align:right; color:<?php echo $txtEleClr; ?>" size="3" readonly="readonly">
    </TD>
    <TD align="right">
        <INPUT type="text" id="sec<?php echo $ctr;?>" name="sec<?php echo $ctr;?>" value="<?php echo $row["SEC_GUARD"];?>" style="text-align:right;" size="3" readonly="readonly">
    </TD>
    <TD align="right">
        <INPUT type="text" id="sec_grd_cnt<?php echo $ctr;?>" name="sec_grd_cnt<?php echo $ctr;?>" value="<?php echo $sec_grd_cnt;?>" style="text-align:right; color:<?php echo $txtSecClr; ?>" size="3" readonly="readonly">
    </TD>
    </FORM>
</TR>

---

Above PHP generates a series of HTML Forms which are selected to submit by clicking on the appropriate From Submit button

Generated HTML code

<tr>
    <form id="frmUnitDetails1" name="frmUnitDetails1" action="./getServPersonsStatsUnit.php" method="post" target="_blank"></form>
    <td align="center" width="300px">
        <label id="unit1" for="unit1">GM(ADMIN)</label>
        <input type="hidden" id="unit1" name="unit1" value="GM(ADMIN)">
        <input type="hidden" id="month1" name="month1" value="02-Dec-2021">
        <br>
        <input id="showDetails" name="showDetails" type="submit" value="Show Details" onclick="submitFrm('frmUnitDetails1')">
    </td>
    <td align="right">
        <input type="text" id="ele1" name="ele1" value="2" style="text-align:right;" size="3" readonly="readonly">
    </td>
    <td align="right">
        <input type="text" id="ele_sta_cnt1" name="ele_sta_cnt1" value="3" style="text-align:right; color:red" size="3" readonly="readonly">
    </td>
    <td align="right">
        <input type="text" id="sec1" name="sec1" value="6" style="text-align:right;" size="3" readonly="readonly">
    </td>
    <td align="right">
        <input type="text" id="sec_grd_cnt1" name="sec_grd_cnt1" value="7" style="text-align:right; color:red" size="3" readonly="readonly">
    </td>
    
</tr>

---

JQuery/JScript code

function submitFrm(x)
{
    alert(x);    
    event.preventDefault();

    var formValues= $(x).serialize();
    alert(formValues);
    $.post("./getServPersonsStatsUnit.php", formValues, function(data){
        // Display the returned data in browser
        $("#divShowDetailsOutPut").html(data);
    });
}

---

Answer 1

After changing the code by moving FORM tag inside TD and using FORM attribute of INPUT elements the things are now working. Here is the changed code.

PHP Code

<TR>
    <TD align="center" width="300px">
        <label id="unitLbl<?php echo $ctr;?>" name="unitLbl<?php echo $ctr;?>" form="frmUnitDetails<?php echo $ctr;?>" for="unitLbl<?php echo $ctr;?>"><?php echo $row["UNIT"];?></label>
        <input type="hidden" id="unit<?php echo $ctr;?>" name="unit<?php echo $ctr;?>" form="frmUnitDetails<?php echo $ctr;?>" value="<?php echo $row["UNIT"];?>">
        <input type="hidden" id="date<?php echo $ctr;?>" name="date<?php echo $ctr;?>" form="frmUnitDetails<?php echo $ctr;?>" value="<?php echo $date;?>">
        <br>
        <FORM id="frmUnitDetails<?php echo $ctr;?>" name="frmUnitDetails<?php echo $ctr;?>" action="./getServPersonsStatsUnit.php" method="post">
        <INPUT id="showDetails<?php echo $ctr;?>" name="showDetails<?php echo $ctr;?>" type="submit" value="Show Details" onclick="submitFrm('#frmUnitDetails<?php echo $ctr;?>')">
        </FORM>
    </TD>
    <TD align="right">
        <INPUT type="text" id="ele<?php echo $ctr;?>" name="ele<?php echo $ctr;?>" form="frmUnitDetails<?php echo $ctr;?>" value="<?php echo $row["ELECT_STAFF"];?>" style="text-align:right;" size="3" readonly="readonly">
    </TD>
    <TD align="right">
        <INPUT type="text" id="ele_sta_cnt<?php echo $ctr;?>" name="ele_sta_cnt<?php echo $ctr;?>" form="frmUnitDetails<?php echo $ctr;?>" value="<?php echo $ele_sta_cnt;?>" style="text-align:right; color:<?php echo $txtEleClr; ?>" size="3" readonly="readonly">
    </TD>
    <TD align="right">
        <INPUT type="text" id="sec<?php echo $ctr;?>" name="sec<?php echo $ctr;?>" form="frmUnitDetails<?php echo $ctr;?>" value="<?php echo $row["SEC_GUARD"];?>" style="text-align:right;" size="3" readonly="readonly">
    </TD>
    <TD align="right">
        <INPUT type="text" id="sec_grd_cnt<?php echo $ctr;?>" name="sec_grd_cnt<?php echo $ctr;?>" form="frmUnitDetails<?php echo $ctr;?>" value="<?php echo $sec_grd_cnt;?>" style="text-align:right; color:<?php echo $txtSecClr; ?>" size="3" readonly="readonly">
    </TD>
</TR>

---

Answer 2

Your form is empty and that is why the serialize() function is giving you null. Make sure the inputs are inside the form tag.

By carefully looking at the generated HTML code from the PHP shown above, the closing tag of the form comes immediately after the opening tag is closed and therefore it technically has no inputs. So make sure the generated HTML is done correctly to have the inputs inside the form tag.