how to load form based on other form data using PHP and AJAX

Question

I'm kinda new with php and ajax, so I need a little bit of help here. I'll explain my concept a little bit, please give me feedback is it possible or not.

this is a little bit of my code for the main page :

<ul class="treeview-menu">
    <li id = 'menu1'>
        <a>
            <i class="fa fa-angle-double-right"></i>
            Menu1
        </a>
    </li>
</ul>
<div id="content_info" style="display:none;"></div>
<div id="content_data" style="display:none;"></div>
<div id="content_input" style="display:none;"></div>

I have two other page, lets called it form_view.php and form_input.php. the form_view.php is used to show data from the database, and the form_input is used to input new data and edit old data. I'm planning to use AJAX for loading the form_view and form_input on the main page.

First, when I choose Menu1, it will show the content_data div and hide the other two div. Then, it will load form_view.php inside the content_data div. I'm using tables for viewing the data and there's an edit button for each row. When I click the button, the form will be submitted to form_input, and the form_input will show the data that's been chosen.

Is it possible to make form_input show the data that's been chosen and load it in the content_input div? When this is happens, content_data and content_info will be hidden, and content_input will be shown. Is it possible to not refresh the main page while doing so?

And if it's all possible, can you show me some example for the code?

I appreciate any feedback. Thanks.

Answer 1

Encode the data in the url request for form_view.php

$( "#content_data" ).load( "ajax/form_view.php?"+parameters );

Make sure to url encode your parameters. The later retrieve the data from $_GET in your PHP.