How can PHP scripts be separated from the form page while still displaying the calculation results on the form page?

To separate PHP scripts from the form page while still displaying the calculation results on the form page, you can use AJAX to send form data to a separate PHP file for processing. The PHP file will perform the calculations and return the results back to the form page without refreshing the page. 

// form_page.php

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<form id="calcForm">
    <input type="number" name="num1" id="num1" required>
    <input type="number" name="num2" id="num2" required>
    <button type="submit">Calculate</button>
</form>

<div id="result"></div>

<script>
$(document).ready(function(){
    $('#calcForm').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'calculate.php',
            data: $(this).serialize(),
            success: function(response){
                $('#result').html(response);
            }
        });
    });
});
</script>

</body>
</html>
```

```php
// calculate.php

<?php
if(isset($_POST['num1']) && isset($_POST['num2'])){
    $num1 = $_POST['num1'];
    $num2 = $_POST['num2'];
    
    $result = $num1 + $num2;
    
    echo "Result: " . $result;
}
?>

Keywords

PHP form page separation calculation results display

Related Questions