PHP Submitting a form without refreshing the page and call a function-CodePudding

We have created a feedback form and once a user submits the feedback, we want to run the function that submits it to Airtable and then show the Next button.

Problem: The jQuery is working, showing the button after submit, but the function in (isset($_POST['submit']) isn't saving at all.

I've read through many posts but can't find the answer. Any help would be great!

Here is our current code

    public function airtable_function() {
        ?>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function(){ 

                jQuery("#nameFrm").submit(function (e) {
                    e.preventDefault();
                    var frm = jQuery('#nameFrm');
                    var outPut = jQuery('#results');
                    var loadButton = jQuery('#loadingImage');

                    var comments = jQuery('#comments').val();
                    var reason = jQuery('#reason').val();

                    jQuery.ajax({
                    type: 'POST',
                        data:'action=submitForm&comments=' comments '&reason=' reason,
                        url: 'requests.php',
                        beforeSend: function(){ 
                            loadButton.show(); 
                        },
                        complete: function(data){ 
                            loadButton.show();
                            frm.hide();
                        },
                        success: function(data) { 
                            frm.hide();
                            outPut.html(data);
                    }
                    });
                });

            });
        </script>
        <div> 
            <form action="requests.php" id="nameFrm" name="frmName" method="POST" >
            <p>Please give us feedback</p>
            <select id="reason" name="reason" required>
                        <option value="Choose a reason">Choose a reason</option>
                        <option value="Reason1">Reason1</option>
                        <option value="Reason2">Reason2</option>
                        <option value="Reason3">Reason2</option>
                        <option value="Other">Other</option>
                    </select>
                    <input id="comments" type='text' name='comments' required />
        <input type="submit" value="submit" name="subbtn" >
    </form>
    <div id="loadingImage" style="display:none; text-align:center;">
    <a href="#" >Yes, Cancel Account</a>
    </div>
    </div>
    <div id="results"></div>    
</div>
        <?php
        if (isset($_POST['submit'])){
            $reason = $_POST['reason'];
            $comments = $_POST['comments'];
            save($reason, $comments);
            }
        ?>
        <?php
}

CodePudding user response：

What I can see from the snippet is that:

if (isset($_POST['submit'])){

While the submit button is:

<input type="submit" value="submit" name="subbtn" >

Just fix this line: isset($_POST['submit'] to isset($_POST['subbtn']

Hope this helps.

CodePudding user response：

I assume you want to transfer the entries "reason" and "comment" to the page "requests.php". Then you don't need the second post request because you use ajax:

<?php
function airtable_function() {
    ?>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function(){ 

            jQuery("#nameFrm").submit(function (e) {
                e.preventDefault();
                var frm = jQuery('#nameFrm');
                var outPut = jQuery('#results');
                var loadButton = jQuery('#loadingImage');

                var comments = jQuery('#comments').val();
                var reason = jQuery('#reason').val();

                jQuery.ajax({
                type: 'get',
                    data: { 'result' : comments  '*' reason, 'feedback' : 'true' },
                    url: 'requests.php',
                    beforeSend: function(){ 
                        loadButton.show(); 
                    },
                    complete: function(data){ 
                        loadButton.show();
                        frm.hide();
                    },
                    success: function(data) { 
                        frm.hide();
                        outPut.html(data);
                }
                });
            });

        });
    </script>
    <div> 
        <form action="requests.php" id="nameFrm" name="frmName" method="POST" >
        <p>Please give us feedback</p>
        <select id="reason" name="reason" required>
                    <option value="Choose a reason">Choose a reason</option>
                    <option value="Reason1">Reason1</option>
                    <option value="Reason2">Reason2</option>
                    <option value="Reason3">Reason3</option>
                    <option value="Other">Other</option>
                </select>
                <input id="comments" type='text' name='comments' required />
    <input type="submit" value="submit" name="subbtn" >
</form>
<div id="loadingImage" style="display:none; text-align:center;">
<a href="#" >Yes, Cancel Account</a>
</div>
</div>
<div id="results"></div>    
</div>
<?php
}

The "request.php" looks like this:

<?php
if(isset($_GET['feedback'])) 
{
$result = $_GET['result'];
$parts = explode("*", $result);
print "reason: ".$parts[1]."<br>";
print "comments: ".$parts[0]."<br>";
}
?>