CSS导致SQL INSERT执行两次

Question

I have an INSERT query in my PHP page which executes once as it is supposed to, and works fine, just how I want.

if(!$con->query("INSERT INTO contracts (CID, DATE, NUMBER, TITLE, DESCRIPTION) VALUES ('$cid', '" . $con->real_escape_string($date) . "', '" . $con->real_escape_string($number[$counter]) . "', '" . $con->real_escape_string($title[$counter]) . "', '" . $con->real_escape_string($description[$counter]) . "')"))
            {
                printf("Error message: %s
", $con->error);
            }

Now, I add the following CSS in the same PHP file to make a table I output a bit nicer to read:

<style>
tr:nth-child(even) {
    background-color: e5e4e2;
}
</style>

That makes every other row a grey colour, great... but wait! Now my SQL INSERT happens twice. I have no idea how these are connected, when I remove the CSS, the INSERT executes once like I need.

Is there some jiggery pokery I am not understanding here? How can CSS possibly affect my SQL query?

For the record I am using XAMPP, PHP version 5.5.15 and phpMyAdmin for the database tables.

EDIT: I have checked the database, it is inserting twice.
The query is set to a button and I use if (isset($_GET['insertIt'])) {// INSERT QUERY so that when the user clicks this button:
<a href = 'testing.php?insertIt=true'><button style="height: 30px; margin-left: 10px; margin-right: 10px">2. Insert New Contracts To 'contracts' Table</button></a>
The query is sent. It works fine without the CSS, but with, it runs twice

EDIT 2: OK, here are the two screenshots from Developer tools when I click the button. I found that it's not the omission of the CSS exactly but the <style> ... </style> tags; when I leave those out I get this:
When they are in my PHP file I get this:
I can accept this and try to get around it by separating the files or leaving the tags out completely but I would still love to know why it happens. I am no expert but I can see there is an extra call to insertIt when there are no <style> tags and the entries are inserted twice.
For the record I want to be able to

1. click the button
2. insert the entries once
3. and refresh the page as the page also displays the results of the insert.

Answer 1

Looking at your code snippets isn't enough of course, but let me suggest you the solution and explain a bit of what you doing here.

1. Using GET in this case isn't good enough. I don't know what are you doing next (any redirect after record is inserted?), but I suppose that nothing is happening. A good idea would be to use POST, cause you creating the row in the table.
2. The action which triggers the form is a click, but the click on what? You have a button inside a link. <a><button></button></a> not elements are control elements. I would suggest fix it to <button type="submit" style="height: 30px; margin-left: 10px; margin-right: 10px">2. Insert New Contracts To 'contracts' Table</button> and get rid of <a>, the URL you will post to should come from form action attribute. If you really need to post with an event using JavaScript, this is another story, code you provided isn't enough to see what are you trying to achieve.
3. When someone may argue that redirect after record creation is bad due to HTTP protocol standards, but this is a common practice to redirect to the same page after performing actions with form, to prevent multiple records creation by accidentally refreshing the page.

Here goes pseudocode of what I think you should do:

<?php
    if (isset($_POST["...field name..."])) {
       ... perform INSERT ...
       ... do redirect to 'testing.php' ...
    } 
?>

<form action="testing.php" method="post">
    ... fields ...
   <button type="submit" style="height: 30px; margin-left: 10px; margin-right: 10px">2. Insert New Contracts To 'contracts' Table</button>
</form>

Nothing should happen twice. If you need more help - be my guest and ask.