Passing Variable Ajax to PHP same page

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Testing</title>
    <!-- Jquery Library -->
    <script `enter code here`src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <form action="" method="post" id="itemsPag">
        <div class="form-group">
           <label for="items-per-page">Items Per Page</label>
            <select name="num-items" id="items-per-page" class="form-control">
                <?php for($i = 5 ; $i < 55 ; $i+=5): ?>
                    <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                <?php endfor; ?>
            </select>
            <input type="submit" name="submit">
         </div> 
    </form>     

<script>        

        $( document ).ready( function() {           
            $('#itemsPag').on('submit',function (e) {

            $.ajax({
                    type: 'post',
                    url: '',
                    data: $(this).serialize(),
                    success: function (data) {                      
                        console.log(data);
                    }
                });
            e.preventDefault();     
            });         
});

</script>
    <?php echo (isset($_POST['num-items'])) ? $_POST['num-items'] : "NO WORKING"; ?>
</body>
</html>

Hi lads,

Could someone help me out?. I know its very comment but I am looking a good while for a solution with not joy.

I am trying to catch/display data from a form with Ajax to PHP in the same page but its not working as I expect.

Its working with the console.log but not in the page itself. On the console.log is displaying the whole html document and the PHP at the bottom is caching the data. Any ideas?. See the code above.

Thanks

Syscall · Accepted Answer · 2018-02-19 20:15:34Z

1

Your code is working! But, you have to put your PHP before HTML and to stop the script (or in another script - see comments below) .

When you're posting the form, the PHP script will echo $_POST['num-items'] and stop execute to return to Javascript.

Look at your console after submitting the form, you will only have you submitted value.

<?php 
   // Here the code is before the HTML, but your can put it in 
   // another script (and be sure that the url parameter of 
   // your jQuery.ajax() point on it).
   if (isset($_POST['num-items'])) {
      echo $_POST['num-items'] ;
      exit; // stop the script to avoid to return the HTML to 
      // your Javascript.
   }
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Testing</title>
    <!-- Jquery Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <form action="" method="post" id="itemsPag">
        <div class="form-group">
           <label for="items-per-page">Items Per Page</label>
            <select name="num-items" id="items-per-page" class="form-control">
                <?php for($i = 5 ; $i < 55 ; $i+=5): ?>
                    <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                <?php endfor; ?>
            </select>
            <input type="submit" name="submit">
         </div> 
    </form>     

    <script type="text/javascript">        

        $( document ).ready( function() {           
            $('#itemsPag').on('submit',function (e) {

            $.ajax({
                    type: 'post',
                    url: '',
                    data: $(this).serialize(),
                    success: function (data) {                      
                        console.log(data); // Now, here you will have only the PHP block.
                    }
                });
            e.preventDefault();     
            });         
       });

    </script>
</body>
</html>

edited Feb 19, 2018 at 20:15

answered Feb 19, 2018 at 19:57

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mike Over a year ago

I think it would be better to use a different script to handle the AJAX request. Trying to mix things all together like that will probably lead to really messy code really quickly.

IncredibleHat Over a year ago

Agreed @Mike ... the only times I dogpile the ajax php portion on the top of a page, is if I'm in a hurry and doing a basic backend 'tool' twiddle. But front end and production stuff should be segregated for clarity and ease of maintenance.

Syscall Over a year ago

@Mike Maybe. But, this is an simple working example.

Timba Over a year ago

Thanks a million for your help and answers :). I really appreciate it

Timba Over a year ago

I have another question. The problem of setting exit: is that others php scripts below this one are not executing. What I really want to do with it is to catch the value and use it below. I wonder if setting up a another php page and sending the value to that page and then returning to the current one fix the issue? In that case how do i return that value back from the php process page to the current page? I dont know if you understand me. Thanks :)

|

Collectives™ on Stack Overflow

Passing Variable Ajax to PHP same page

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related