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);
    });
}

How do you call `submitFrm`? NVM, found it hidden away in the markup... `submitFrm('frmUnitDetails1')` - what do you get if you do `$("frmUnitDetails1")` - nothing (technically it's an empty jquery collection). So it's not that serialize returns null, it's that your selector doesn't match any elements. Use `$("#" + x).serialize()` (protip: use proper variable names, not "x") (2nd protip: always debug your selectors with `console.log($(x).length)` — freedomn-m, Dec 08 '21 at 17:00
Thanks for pointing out the mistake and suggestion. I have changed the function call to submitFrm('#frmUnitDetails1'). Also I had put the FORM tag inside TR tag which is not allowed and hence I was getting nothing in the FORM. Now I have moved FROM tag inside TD and I am using FORM attribute of INPUT tag to point out to the FORM. Now I am getting the data in with serialize method. — khagolsan, Dec 09 '21 at 02:52

score 0 · Answer 1 · answered Dec 08 '21 at 17:13

0

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.

answered Dec 08 '21 at 17:13

Junior

1,007
4
16
26

Yes, you are right. But I don't know how the generated code has a closing form tag immediately after the form opening. If you see the php code, all the input elements are between the form opening and closing tag. – khagolsan Dec 08 '21 at 17:27
1

Because `form` is not a valid tag to have inside a `tr`. It's the browser that's "fixing" it for you, not the php. See [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr#technical_summary) **permitted content** and [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) **permitted parents** - A `` element. – freedomn-m Dec 08 '21 at 17:34
Thanks freedomn-m. I am dynamically generating the html page using php so that there is one form in every table row. Now since form is not permitted inside tr the thing will not work. Is there any other way to serialize the input? – khagolsan Dec 08 '21 at 17:53
You can pre-select elements instead of using `form` - so you can just get the `tr` then serialise the contents of the tr, eg `$("tr#" + id).find("input,select,textarea").serialize()` see [serialize()](https://api.jquery.com/serialize/) for more info on what to pass. – freedomn-m Dec 08 '21 at 18:14
Thanks freedom-m for your help. I will try pre selecting the elements and then serialize the contents of TR. But the easiest thing for me is to move FORM tag inside TD and use the FORM attribute to all INPUT elements. By doing this it is working. Once again Thanks Dankyi and freedomn-m. – khagolsan Dec 09 '21 at 03:00
1

Hint, use @name to send them a notification of your comment, without the @ they don't get a notification – freedomn-m Dec 09 '21 at 09:02

score 0 · Answer 2 · answered Dec 09 '21 at 03:04

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>

jQuery serialize method returns null

HTML / PHP code

Generated HTML code

JQuery/JScript code

2 Answers2

PHP Code