How to send data from PHP into an HTML article

Question

In my HTML I have an article containing clickable lists. I also have a form that adds data to my database. Once it's done adding the data I want my PHP to send a new list based off the data given in the form to the article in my HTML with my other lists.

How can I do this? I know how to display data from PHP in HTML but I don't know how to display that data in existing articles in HTML.

My function that updates and refreshes my page after every click on a link is called MyFnc and this is the JavaScript for it:

function myFnc(x) {
  if (x == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else { //if a link is clicked
    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      //readyState = 4: request finished and response is ready
      //status = 200: "OK"
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    }
    xmlhttp.open("GET", "get_data.php?q=" + x, true);
    xmlhttp.send();
  }
}

And get_data.php is where I display the data from the database to the webpage. I know that displaying the link must be done in get_data since that is where I display everything to the page. But for now I just want to know how to send the data retrieved from add_records and make a list out of it.

This is my article in my HTML:

<article>
  <ul class="lists" style="list-style-type:none">
    <li><a href="#Tiger" onclick="myFnc('G. cuvier')">Tiger</a></li>
    <li><a href="#Hammerhead" onclick="myFnc('S. mokarran')">Hammerhead</a></li>
    <li><a href="#Bull" onclick="myFnc('C. leucas')">Bull</a></li>
    <li><a href="#Great White" onclick="myFnc('C. carcharias')">Great White</a></li>
    <li><a href="#Mako" onclick="myFnc('I. oxyrinchus')">Mako</a></li>
    <li><a href="#Greenland" onclick="myFnc('S. microcephalus')">Greenland</a></li>
    <li><a href="#Whale" onclick="myFnc('R. typus')">Whale</a></li>
    <li><a href="#Thresher" onclick="myFnc('A. vulpinus')">Thresher</a></li>
    <li><a href="#Oceanic" onclick="myFnc('C. longimanus')">Oceanic WhiteTip</a></li>
    <li><a href="#Goblin" onclick="myFnc('M. owstoni')">Goblin</a></li>
  </ul>
</article>

Here is my form in my HTML:

<form method="post" action="add_to_records.php">
  <input type="hidden" name="addshark" value="true" />
  <fieldset>
    <label>Name:<input type="text" name="Name" /></label>
    <label>SpeciesID:<input type="text" name="speciesID" /></label>
    <label>Genus:<input type="text" name="genss" /></label>
    <label>Family:<input type="text" name="famly" /></label>
    <label>Order:<input type="text" name="ordr" /></label>
    <label>Class:<input type="text" name="clss" /></label>
    <label>Create New Shark</label>
    <input type="submit" value="add shark" />
  </fieldset>
  <br />
</form>

Here is my add_to_records.php:

<?php 
include 'connect.php';

if (isset($_POST['addshark'])) 
{
    include 'connect.php';    

    $Namee = mysqli_real_escape_string($connect,trim($_POST['Name']));
    $specID = mysqli_real_escape_string($connect,trim($_POST['speciesID']));
    $gens = mysqli_real_escape_string($connect,trim($_POST['genss']));
    $fam = mysqli_real_escape_string($connect,trim($_POST['famly']));
    $ord = mysqli_real_escape_string($connect,trim($_POST['ordr']));
    $cls = mysqli_real_escape_string($connect,trim($_POST['clss']));

    if (!mysqli_query($connect, "INSERT INTO Species
                                (SpeciesID,Genus,Family,Order_,Class) 
                                VALUES ('$specID','$gens','$fam','$ord','$cls')")) 
    {
        die('error inserting new record');
    } 
    //I would like the list it returns to look like this if the Name entered was Hello 
    //and the speciesID entered was Something
    //<li><a href="#Hello" onclick="myFnc('Something')">Hello</a></li>
    //echo "shark was added";
    header('Location: ProjectMainAdmin.html'); exit;
}

mysqli_close($connect);
?>

Try inline php if statements in the html at the place where you want the output. — Krishanu, Jul 22 '18 at 15:52
Your script is wide open to [SQL Injection Attack](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) Even [if you are escaping inputs, its not safe!](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) Use [prepared parameterized statements](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) in either the `MYSQLI_` or `PDO` API's — RiggsFolly, Jul 22 '18 at 16:05

score 0 · Answer 1 · answered Jul 23 '18 at 10:17

Just use jQuery's AJAX, it's a lot simpler and easier to implement. Data will be passed to server, then once completed you need to append the data into your list.

something like this:

$("form").submit( function(){

    $.ajax({
        url: "add_to_records.php", 
        success: function(result){
           $(".lists").append("<li><a href=''>" + result.name + "</li>");
        }
     });

  return false;
});

How to send data from PHP into an HTML article

1 Answers1