从服务器 php javascript 更新动态表单，但需要保持在浏览器的同一页面上

Question

I have to create a form where mid way when the user is filling the input on filling one specific select input I need to send a request to the server where I tell the server which select value was selected and then the server will respond with a new page updating the form with additional input fields related to the selected option the user has chosen.

I am doing this and all is fine but when the server sends back the updated page the browser is stacking the pages. By stacking I mean that after receiving the updated form if the user presses back he will be taken to the old form that was there before the server call and the update.

I don't want this behavior I just want the browser in a way or another to have the same page but with the updated form

This is the javascript code that is triggered when a select is chosen

    function updateForm(value){
    let form=document.forms["form"];
    let input = document.createElement('input');
    input.setAttribute('name', "typeOfCall");
    input.setAttribute('value', 'updateForm');
    input.setAttribute('type', 'hidden');
    form.appendChild(input);
    form.submit();
}

then the server does a lot of stuff accessing the database then does the following to send back an updated page

    public function render_view($view,$params=[]){
    $layout = $this->get_layout();
    $view = $this->get_view($view,$params);
    return str_replace("{{content}}",$view,$layout);
}

The result of this function is then echoed

I am not using any framework because part of the asignment is not to use any framework

Answer 1

Without using any external libraries you can use JavaScript Fetch API to call the server and retrieve your information:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Fetch is asynchronous, so you can update your form using the response once it has been received. You can then parse and use this information to populate/edit the form.