CODEWITHSUNDEEP
phpjqueryajax
Timba
Timba

Reputation: 97

Passing Variable Ajax to PHP same page

<!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

Upvotes: 1

Views: 93

Answers (1)

Syscall
Syscall

Reputation: 19780

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>

Upvotes: 1

Related Questions