Untitled

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var Names = $('#Names').val();//alert(ArrNames);
        var ArrNames = Names.split(",");
        var Name1 = ArrNames[0];//alert(Name1);
        var Name2 = ArrNames[1];//alert(Name2);
        $("#div1").load('result.php', {
            "FirstName": Name1,
            "SecondName": Name2
        });
        return (false);
    });
});
</script>
</head>
<body>
<div style="float:left;"><b>Response Data1:</b></div><div id="div1" style="float:left;"></div><br><br><br>
<div style="clear:both;">
<div style="float:left;"><b>Response Data2:</b></div><div id="div2" style="float:left;"></div><br><br><br>
<div style="clear:both;">
<form>
<input id="Names" type="text" value="name1,name2">
<button>Event</button>
</form>
</body>
</html>

<?php
   $name1 = $_REQUEST['FirstName'];
   $name2 = $_REQUEST['SecondName'];
?>

<input type="text" value="This is 1st response <?php echo $name1;?>"> | This is 2nd Response <?php echo $name2;?>