Passing dynamic values to jQuery Element Selector

December 8, 2021

I am having a html code with multiple forms having IDs form01, form02 etc.

I am submitting the form using jQuery. For each form I have written same code with javascript and jQuery for different form IDs (form01, form02 etc.). If I do this, the thing works, but this is not a way of good programming. So I created a javascript function with form ID as input parameter and calling this function with onclick event of the submit button.

Inside the function, I am using this argument (from ID) to submit the form but this is not working. Can anybody help me on this?

Thanks in advance.

My code is given below:

<html>
<head>
    <title>Main Page</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="include/jquery-ui-1.13.0.custom/jquery-ui.css">
   <script type="text/javascript" src="include/jscript/jquery-3.6.0.min.js "></script>
   <script type="text/javascript" src="include/jquery-ui-1.13.0.custom/jquery-ui.js"></script>


    <script>
        $(document).ready(function(){
            $("#form01").on("submit", function(event){
                event.preventDefault();
        
                var formValues= $(this).serialize();
        
                $.post("./form01OutPut.php", formValues, function(data){
                    // Display the returned data in browser
                    $("#divOutPut").html(data);
                });
            });
        });
        $(document).ready(function(){
            $("#form02").on("submit", function(event){
                event.preventDefault();
        
                var formValues= $(this).serialize();
        
                $.post("./form01OutPut.php", formValues, function(data){
                    // Display the returned data in browser
                    $("#divOutPut").html(data);
                });
            });
        });

        function submitFrm(x)
        {
                alert(x);
                $(document).ready(function(){
                    $(x).on("submit", function(event){
                        event.preventDefault();
                
                        var formValues= $(this).serialize();
                
                        $.post("./form01OutPut.php", formValues, function(data){
                            // Display the returned data in browser
                            $("#divOutPut").html(data);
                        });
                    });
                });        
        
        }
        
    </script>
</head>
<body>
    <table>
        <form id="form01" name="form01" action="./form01OutPut.php" method="post">
            
                <tr>
                    <td>
                        Enter text:
                    </td>
                    <td>
                        <input type="text" id="txt01" name="txt01" size=10>
                    </td>
                    <td>
                        <input type="button" id="submitBtn01" name="submitBtn01" value="Submit" onclick="submitFrm('#form01')">
                        <!-- <input type="submit" id="submitBtn01" name="submitBtn01" value="Submit"> -->
                        <!-- <input type="submit" value="Submit"> -->
                    </td>
                </tr>
        </form>
        <form id="form02" name="form02" action="./form01OutPut.php" method="post">
            
                <tr>
                    <td>
                        Enter text:
                    </td>
                    <td>
                        <input type="text" id="txt02" name="txt02" size=10>
                    </td>
                    <td>
                        <!-- <input type="button" id="submitBtn" name="submitBtn" value="Submit"> -->
                        <input type="submit" id="submitBtn02" name="submitBtn02" value="Submit">
                        <!-- <input type="submit" value="Submit"> -->
                    </td>
                </tr>
        </form>
    </table>
        <div id="divOutPut">

        </div>
</body>

>Solution :

Remove that document.ready and $(x).on("submit", function(event) from the function. Also for this line var formValues= $(this).serialize(); this will not work here, replace it with x

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