Need to Understand Process behind Web Processes with HTML, PHP, Javascript, through existing HTML Button to PHP function Issue

Question

Note: I'm asking less for a solution and more for help. I understand this question is probably basic and repetitive, but I'm less sorry than I am frustrated with how little other websites explain.

I am absolutely positive this question has been asked in a million variations because I've looked it up so many times, but the problem is how many times I've had to look it up and I still don't understand half of what I'm doing every time I attempt it. Pretty sure I've scraped the barrel with this one.

I have a process I'm running that calls several queries to a SQL database, and I'm doing them in PHP. Problem is, they're all run automatically when the page is opened, and that makes me so queasy it isn't funny. I'm trying to make a button that does not redirect to another page to call this process, be it by function or what-have-you. I'm trying to keep all of this on one page... Though I'm not averse to make it more pages.

I'm trying to avoid JQuery. My tools available are: JavaScript, PHP, and HTML. If I need to, I'm willing to convert all 8 or 9 queries into JavaScript to run it through button or even AJAX, but I'd like to keep it in PHP if I can. I know PHP and HTML run differently, but this is where I get confused on how best to combine them, and how to use JavaScript, and when to use JavaScript, and what GET and POST and SUBMIT are in relation to PHP, and just a million things. I'd like to know the BEST method AND the "you can do this with what you have already done", and WHY one is better than the other, if at all possible.

I'm sure 90% of this question is super repeated, but thank you in advance for your patience. I hate not understanding.

EDIT: I was asked for my code, and I can give a basic idea of it, without being able to give the code itself:

<?php
mysql_pconnect ('host', 'username', 'password');
mysql_select_db('database'); 
// the company I work for has so far refused to let me upgrade our website, so I
// am trying to keep it the same so that half of it isn't new and the other
// super outdated. Believe me, I'm pushing.

$query0 = "TRUNCATE table templateTable;";

$query1 = "INSERT INTO templateTable
(item1, item2, item3, item4...)
SELECT
table1.itemA, table2.itemB, table1.itemC, table2.itemD...
FROM table1, table2
WHERE table1.itemA = table2.itemQ;";
// there are a LOT of items in this query, like 100

$query2 = "UPDATE templateTable, table1
SET templateTable.itemX = \"thing\",
CASE
WHEN table1.itemAB = 1
THEN itemX = 'THING1';";

$query3 = "UPDATE templateTable, table2, table1
SET templateTable.itemY = 
CASE
WHEN table2.modelNumber = table1.modelNumber
THEN itemY = table2.modelNumber
ELSE
itemY = table1.otherInformation;";

// these queries are using data from two tables to fill an inventory 
// template table that will only be filled and edited through queries. there 
// is no manual editing of this table- just queries.

/*
I'm hoping you get the gist of this because there's 5 other queries even 
longer and more complicated @.@ I have a procedure in MySQL to do this but my 
coworkers are nervous about running the procedure, so I'm trying to make it more 
friendly by allowing it through the website. This was requested of me
*/
?>

Long story short: I'm trying to run a PHP function on the same page with HTML through a button, the php has 8 queries being run to a MySQL database, and I don't really understand any of this.

Answer 1

I'm trying to run a PHP function [...] through a button [...] that does not redirect [or reload]

First you need to understand when is PHP executed, when is HTML rendered and when is Javascript executed.
Look for "difference between cliend-side and server-side" on the Internet, you'll find good explanations. It seems to be a big deal when you're a beginner but once you understand that, knowing when you have to use PHP, if and when you have to use Javascript, and which is the most accurate, is quite easy to get.

In a few words :

PHP is a server-side language. When you load a webpage, your browser (client) sends a request to the server. The server executes the PHP code, generates some HTML (in our case), and sends this HTML back to the browser.

HTML is rendered client-side. This is your browser that reads and renders HTML.

Javascript is a client-side language. Javascript code goes with the HTML sent from the server to the browser. The browser is able to execute Javascript.

---

In order to execute PHP code when you click on a button, there is 2 solutions :

• Either this button is a link, or is part of a form. When you click on it, the page is reloaded (you can send it GET or POST parameters if needed), then your PHP code can be executed.
• Either you use Javascript and AJAX, and you don't need to reload your current page. Your browser, with Javascript, will send another request to the server "in the back"*, and the server will be able to run some PHP code without you having to reload anything.
  *(looking for an English expression that I don't know)

---

A quick word about jQuery : jQuery still IS Javascript. jQuery is a Javascript library, basically allowing you to have some cleaner, clearer and easier to write code (IMO). But, as halfer mentions in a comment, you don't need it everytime. Other libraries exist, and sometimes, for what you need, "pure" Javascript is enough.

Answer 2

If you place your button into a form with a hidden field like so:

<form>
    <button type="submit">Run Queries</button>
    <input type="hidden" name="submitted" value="1">
</form>

And use and IF statement around your queries:

if ($_GET['submitted'] === '1') {
    // Run queries
}

You get the results it seems you want.

Very simplified: On an initial page load, the queries will be bypassed by the IF statement, which checks the submitted get parameter. When you press the button (submit the form) the submitted parameter will become 1