Submit form in HTML file to PHP file and display result in the same HTML

Question

I need help please. I create html file with 2 tabs. The first tab contains form that takes user input and performs some function. I want the result of the function to be displayed in the second tab. The form in first tab should submit an action to PHP script. The PHP script is inside the same HTML file. What should I write in action of the form?

Any help is highly appreciated.

Edit1: The html file is a client side and the php is a server side So, I should separate the php script and put it in a separate .php file. So, I have 2 files: ".html" and ".php".

HTML file:

<ul class="nav">
    <li id="TAB0" class="selected"><a href="#TAB0"><em>Run function</em></a></li>
    <li id="TAB1"><a href="#TAB1"><em>Results</em></a></li>
    <li id="TAB2"><a href="TAB2"><em>Help</em></a></li>
</ul>
<div class="content" id="CONTENT">
    <!--TAB0-->
           <div id = "TAB0" class="active">
            <div class="MainContent">
              <form id='myform' enctype='multipart/form-data' name='myForm'  method='post' action="calculateResults.php">
                      SOME INPUTS HERE
                   <p><input type='button' name="mybut" value='Run'></p>
              </form></div></div>
     <!--TAB1-->
           DISPLAY THE RESULT HERE
     <!--TAB2-->

What is done actually with the above code is display the result in a new window. The php file is already print the output result in some texts and table. I want when I click the button in the first tab to execute .php file and display the result in the second tab not in a new window.

Any help please? Thanks,

Answer 1

if you want the data to show without submitting/reloading the page you need to submit form using ajax, instead if the page can reload after the submit you must manage on the html to show the second tab when data is available, if a $_POST data exist you can set some variable to show the second tab.

Hope this help.

Answer 2

You can write the URL of your page and show first tab post is not set and second tab if post is set

<?php if(!isset($_POST['submit'])) { ?> 

    <!-- your first tab active here -->

<?php } else { ?>

    <!--your second tab active here-->

<?php } ?>

This also helps you to see if user send the form and process the data you want to show in the second tab.

If you show/hide your tabs with an "active" class you ca use isset() and just to place the class in the proper tab you want visible.

This is how the form action can look like

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">

Or just plain HTML

<form action="http://domain.com/link_to_the_same_page.php" method="post">

I you want to send the data via ajax you can do so, using ajax, like @itapingu suggested.

<script type = "text/javascript">
     $(document).ready(function() {

        event.preventDefault();

        $("button#submit").click(function(){

            $.ajax({                    
                    url: 'content/your.php',     
                    type: 'post', // performing a POST request
                    data : {
                        name: "John", location: "Boston" // will be accessible in your $_POST[]
                    },
                    dataType: 'json',                   
                    success: function(data)         
                    {
                        // here is the part where you recive the response 
                        // from the php file and place it in your second tab.
                        // You can do something similar to this
                        $('#my_second_tab').html($(data).find('#my_second_tab'));

                      },
                      error: function() {
                         alert ('An error occurred');
                      }
                });
            });
         });
    });
</script>

This way doesn't really matter what you place in the form action attribute. This snippet is just detecting a click on your #submit button and triggers the ajax process.

You should also check the documentation about ajax on the jQuery site. https://api.jquery.com/jQuery.ajax/

Hope this helps you mate. By the way, don't forget to include the main jquery library.