Issue with displaying the Jquery Ajax result

Question

I just need to display names of the array using ajax. Following code is working but the result ( Nilantha Ruwan Nimal Shamitha Alex) is just display and disappears.

Index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container" style="margin-top:50px";>
    <form >
    <div class="form-group">
    <input type="text" id="name" class="form-control" placeholder="Enter Name....">
    </div>
    <div class="form-group">
    <button class="btn btn-success" id="btn">Enter</button>
    </div>
    </form> 
    <div class="msg"></div>     
    </div>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#btn").click(function(){
    var name = $("#name").val();
    $.post("ajax.php",{ajax_name:name},function(response){
    $(".msg").html(response);
    })
    .fail(function(error){
    alert(error.statusText);
        })
      })
    })
    </script>

</body>
</html>

ajax.php

<?php 

    if(isset($_POST['ajax_name'])){
    $store = array("Nilantha","Ruwan","Nimal","Shamitha","Alex");
    foreach($store as $names) {
    echo $names,"<br>";
     }
    }

?>

Please try my answer it may help you.

Dhruv
– Dhruv

2019-06-21 12:38:29 +00:00
Commented Jun 21, 2019 at 12:38 — Dhruv
– Dhruv, Commented Jun 21, 2019 at 12:38
If still getting error feel free to share your concern

Dhruv
– Dhruv

2019-06-21 12:43:43 +00:00
Commented Jun 21, 2019 at 12:43 — Dhruv
– Dhruv, Commented Jun 21, 2019 at 12:43

Dhruv · Accepted Answer · 2019-06-21 12:37:54Z

1

Try the following code.

  <script type="text/javascript">
        function submit() {
            jQuery("form").submit(function(e) {
                e.preventDefault();
                var name = jQuery("#name").val();
                jQuery.ajax({
                    type: 'POST',
                    url: 'ajax.php',
                    data: {ajax_name:name},
                    success: function(response) {
                        jQuery(".msg").html(response);
                        jQuery('#name').val('');
      },
      error: function() {
        console.log("Something wrong");
      }
    });});
        }

        jQuery(document).ready(function() {
            submit();
        });
    </script>

answered Jun 21, 2019 at 12:37

Dhruv

6127 silver badges15 bronze badges

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

1 Comment

Nilantha Samararathna Over a year ago

Thank you. it worked, Do you have any idea why my code didn't work? i got it from a video tuttorial it shows that code works. any way thanks for response

TeeJayEss · Accepted Answer · 2019-06-21 12:09:10Z

0

I would suggest looking at the network tab of Chrome Devtools and ensuring that the AJAX call isn't running twice. I would think that if the query ran twice but the second one did not have any name attached then it would return blank once the first one had received its response.

answered Jun 21, 2019 at 12:09

TeeJayEss

1611 silver badge12 bronze badges

Collectives™ on Stack Overflow

Issue with displaying the Jquery Ajax result

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related