Tukukkk

I am completely new to HTML and AJAX /JQuery. I want to display the result of the input as given in the form on the same page.
Below is the code snippet.

<div id = "test">

<form id="ajax-contact" method="post" action="/response/">

        <div class="field">

            <label for="name">your text here</label>

            <input type="text" id="name" name="name" required>

        </div>

        <div class="field">

            <button>Submit</button>

        </div>

    </form>

</div>



<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 

</script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $.post(

        {

         type:'POST',

         url:$(form).attr('action')

         data: $(form).serialize()

        },

    function(response,status){

        alert("Data: " + resp_final + "nStatus: " + status);

        });

    });

});

In the above snippet, resp_final is the value that is being retrieved from server where response is server route where necessary calculation / process is performed.
This works well. However, the result is being displayed on a separate page. I want to display the result on the same page.
Can anybody help please?

Assuming everything else is working ok, the only problem there is the <button> type.
Since it has no explicit type, it's working as a submit button (thus, posting the form and redirecting to the response).

Change your button's type to button to make it only trigger the associated event handler.

<button type="button">Submit</button>

Here's the possiblem values for a button's type:

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

reset: The button resets all the controls to their initial values.

button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

The js:

$(document).ready(function(){

    $("form").on('submit', function(e){       

        e.preventDefault();//Will prevent "normal" submission

        $.post(

        {

         type:'POST',

         url:$(this).attr('action'),//"This" refers to the current form

         data: $(this).serialize()

        },

    function(response,status){

        alert("Data: " + resp_final + "nStatus: " + status);

        //Do something here with the response...

        });

    });

});

Chang your code to this

$(document).ready(function(){

$("button").click(function(){

 $.ajax({

      type: "POST",

      url: $(form).attr('action'),

      data : $(form).serialize(),

      contentType:"application/json",

      success: function(data){

          alert("Data: " + data.resp_final + "nStatus: " + data.status);

      },

      error: function(jqxhr) {

        alert(jqxhr.responseText); // errors: 324, 500, 404 

      }

  });

 });

});