<div>
It has to be done via ajax method. 
You have used plain php form . So how you expect that it would work as you wish. 
 
will help you to get reference 
<a href="https://www.formget.com/submit-form-using-ajax-php-and-jquery/" rel="ugc">https://www.formget.com/submit-form-using-ajax-php-and-jquery/</a>
</div>

<div>
It's helpful to post your code samples in the CODE snippet so we can all see them inline, instead of having to open separate attachments. 
 
Here is &quot;test.php&quot; 

<pre><code class="code-10 nolinks" id="code-20-41725770-1">&lt;?php

$email 		= &quot;&quot;; // set $email
$surname 	= &quot;&quot;; // set $surname 
$firstname 	= &quot;&quot;; // set $firstname 
$middlename = &quot;&quot;; // set $middlename

?&gt;

&lt;form action=&quot;actionTest.php&quot; method=&quot;post&quot;&gt;
 &lt;label&gt;Email&lt;/label&gt; &lt;input name=&quot;email&quot; value=&quot;&lt;?php echo $email;?&gt;&quot;&gt;
 &lt;label&gt;Surname&lt;/label&gt; &lt;input name=&quot;surname&quot; value=&quot;&lt;?php echo $surname;?&gt;&quot;&gt;
 &lt;br&gt;&lt;br&gt;
 &lt;label&gt;First Name&lt;/label&gt; &lt;input name=&quot;firstname&quot; value=&quot;&lt;?php echo $firstname;?&gt;&quot;&gt;
 &lt;br&gt;&lt;br&gt;
 &lt;label&gt;Middle Name&lt;/label&gt; &lt;input name=&quot;Middle&quot; value=&quot;&lt;?php echo $middlename;?&gt;&quot;&gt;
 &lt;br&gt;&lt;br&gt;
 
 &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;

&lt;/form&gt;
</code></pre>
Here is &quot;actionTest.php&quot;
<pre><code class="code-10 nolinks" id="code-20-41725770-2">&lt;?php

$email 		= &quot;&quot;; // set $email
$surname 	= &quot;&quot;; // set $surname 
$firstname 	= &quot;&quot;; // set $firstname 
$middlename = &quot;&quot;; // set $middlename

if (isset($_POST[&quot;email&quot;])){
 $email 		= $_POST[&quot;email&quot;]; // set $email to posted field named email
 $surname 		= $_POST[&quot;surname&quot;]; // set $surname to posted field named surname
 $firstname 	= $_POST[&quot;firstname&quot;]; // set $firstname to posted field named firstname
 $middlename 	= $_POST[&quot;middlename&quot;]; // set $middlename to posted field named middlename
	$surname = &quot;Brown&quot;;
	$firstname = &quot;John&quot;;
	$middlename = &quot;Ossie-Moore&quot;;
}

?&gt;

&lt;form action=&quot;&quot; method=&quot;post&quot;&gt;
	&lt;input name=&quot;email&quot; value=&quot;&lt;?php echo $email;?&gt;&quot;&gt;
	&lt;input name=&quot;surname&quot; value=&quot;&lt;?php echo $surname;?&gt;&quot;&gt;
	&lt;input name=&quot;firstname&quot; value=&quot;&lt;?php echo $firstname;?&gt;&quot;&gt;
	&lt;input name=&quot;Middle&quot; value=&quot;&lt;?php echo $middlename;?&gt;&quot;&gt;
&lt;/form&gt;
</code></pre>
</div>

<div>
greetings vanavah, , I did some code to do as you said, to use the actionTest.php to ajax Without Refreshing the Screen. But It was not as easy as I thought it would be. 
 
this is the code for an .html web page. There is NO PHP in it, as it is not needed as far as I can see - 

<pre><code class="code-10 nolinks" id="code-20-41726007-1">&lt;!doctype html&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;JQuery AJAX Form Submit&lt;/title&gt;
&lt;style&gt;
body{background:#e3f7ff;}

#form1{
width:25em;
min-height:4em;
background:#fbdba0;
margin:2px auto;
border:3px solid #5ad;
padding:9px;
}

#form1 label{
font-weight: bold;
color: #811;
}

&lt;/style&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt; // I use 2.2.4 of Jquery

$(function() {
 $(&quot;#form1&quot;).submit(function(e) {
 e.preventDefault();
	
 var ajxSend = {
 type: &quot;POST&quot;,
 url: &quot;actionTest.php&quot;,
 data: $(this).serialize(),
 dataType: &quot;json&quot;,
 timeout: 3500
 }
alert	
 var aj = $.ajax(ajxSend);
 
 aj.done(function( received ) {
// IMPORTANT, you need to understand what should be SENT and RECEIVED by ajax
 if(received.error) { // test for error response
 alert(&quot;ERROR=&quot;+received.error+&quot;- php value check Invlaid, &quot;+received.message);
 return; // end ALL JS code
 }

 $.each( received, function(key, val) {
 $( &quot;input[name='&quot;+key+&quot;']&quot; ).val(val);
 });
 
 $(&quot;#title1&quot;).html(&quot;AJAX SUCCESS as SUBMIT for email= &quot;+received.email);

 });
	
 aj.fail(function(xhr, error1, err) {// the Status IS NOT a Number, but the Type of jquery ERROR
 if (xhr.status==404) alert(&quot;ERROR from Ajax as '404 status' the &quot;+ajxSend.url+&quot; page was NOT on Server, \nCan NOT recover from this ERROR, This operation is NOT available!&quot;);
 else {
 alert(&quot;Ajax ERROR = \&quot;&quot;+error1+&quot;\&quot;, with server Status: &quot;+xhr.status+&quot;, post-URL: &quot;+ajxSend.url+&quot;, \npost-Data: &quot;+ajxSend.data+&quot;, \nerror because: &quot;+err);
 if (aj.responseText) {
 console.log(&quot;AJAX TEXT= &quot;+aj.responseText);
 } else console.log(&quot;NO AJAX TEXT RECEIVED&quot;);
 }
 });
	
 });
});

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;h3 id=&quot;title1&quot; style=&quot;text-align:center;&quot;&gt;JQuery AJAX Form Submit&lt;/h3&gt;

&lt;form id=&quot;form1&quot; action=&quot;actionTest.php&quot; method=&quot;post&quot;&gt;
 &lt;label&gt;Email&lt;/label&gt; &lt;input name=&quot;email&quot; value=&quot;&quot;&gt;
 &lt;br&gt;&lt;br&gt;
 &lt;label&gt;Surname&lt;/label&gt; &lt;input name=&quot;surname&quot; value=&quot;&quot;&gt;
 &lt;br&gt;&lt;br&gt;
 &lt;label&gt;First Name&lt;/label&gt; &lt;input name=&quot;firstname&quot; value=&quot;&quot;&gt;
 &lt;br&gt;&lt;br&gt;
 &lt;label&gt;Middle Name&lt;/label&gt; &lt;input name=&quot;Middle&quot; value=&quot;&quot;&gt;
 &lt;br&gt;&lt;br&gt;
 
 &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;

&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
 
next is the code in the actionTest.php page 

<pre><code class="code-10 nolinks" id="code-20-41726007-2">&lt;?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
header('Cache-Control: no-cache');
// Change the Type to text/plain
header('Content-Type: text/plain');


if (count($_POST) &lt; 1) {
 echo json_encode( array('error' =&gt; 'NO POST', 'message' =&gt; 'ERROR: The POST array was EMPTY') );
 exit();
 }

$errorMsg = '';
$outArray = array();
foreach($_POST as $key =&gt; $val) {
if (!$val) {
 $errorMsg .= $key.' needs to be filled, ';
 continue;
 }
$outArray[$key] = $val;
}

if ($errorMsg) {
 $outArray = array('error' =&gt; 'EMPTY FIELDS', 'message' =&gt; $errorMsg);
 } else { // change the fields
 $outArray['surname'] .= &quot; Brown&quot;;
 $outArray['firstname'] .= &quot; John&quot;;
 $outArray['Middle'] .= &quot; Ossie-Moore&quot;;
 }

echo json_encode($outArray);
?&gt;
</code></pre>
 
There to much there for me to try and explain all of what I did, In the .html page I use the JQuery &nbsp;$.ajax( ) to send the &lt;form&gt; input values to the actionTest.php &nbsp;page. . I really could not understand what you were doing in your actionTest.php code, you seemed to want to change the person's name inputs, , but I do not know why you do this? ? 
 
This code works for me, 
 
&nbsp;so ask questions if you need explanations for how this may do it's work.
</div>

<div>
Please excuse my behavior by not responding sooner. &nbsp;This was because my daughter got married over the weekend. &nbsp;I will respond shortly.
</div>

<div>
E-E sent me an email message asking me to close this question.
</div>

<div>
<div class="content wysiwyg-content">
I have a simple form for a club that I have created containing 4 fields at <a href="http://members.vanhosting.cloud/test.php" rel="ugc">http://members.vanhosting.cloud/test.php</a>. &nbsp;The form opens blank. &nbsp;When the submit button is clicked, it should go to the actionTest.php and populate (fill) the fields of the same form without refreshing the screen and changing the structure in anyway. &nbsp;It should also stay on the same test.php form but call the routine on the background. &nbsp; 
 
The problem is that it is going to the actionTest.php and the structure is changing. 
 
How can I get it to populate (fill) the fields of the same form? 
<a href="https://filedb.experts-exchange.com/incoming/2016/07_w30/1108050/test.php" target="_blank" class="file-inline" title="test.php (627 bytes)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>test.php</a> 
<a href="https://filedb.experts-exchange.com/incoming/2016/07_w30/1108051/actionTest.php" target="_blank" class="file-inline" title="actionTest.php (881 bytes)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>actionTest.php</a>
</div>
</div>

test.php

actionTest.php

I have a simple form for a club that I have created containing 4 fields at http://members.vanhosting.cloud/test.php.  The form opens blank.  When the submit button is clicked, it should go to the actionTest.php and populate (fill) the fields of the same form without refreshing the screen and changing the structure in anyway.  It should also stay on the same test.php form but call the routine on the background.  

The problem is that it is going to the actionTest.php and the structure is changing.

How can I get it to populate (fill) the fields of the same form?

How to Populate the SAME Html Form using php, js, jquery, and ajax Without Refreshing the Screen

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.

AJAX

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.