How do I use some PHP code in my HTML externally

Question

0.00/5 (No votes)

See more:

I am creating some kind of web application.
You fill in the title etc etc, you get a styled example and i want to export that styled example to a csv sheet wich i have the code for but cannot implement it in my html page.
So how do i acces the php code outside of my html.

What I have tried:

I have looked on te intwerbs but couldnt really get a clear answer out of it.
One says it is possible the other says its not or only with a server.

This is what i want to do with the output of the javascript.

[^]

here is my code:

HTML

<pre><!DOCTYPE html>
<html>
<head>
    <title>Adwords Applicatie</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

  <!-- beginning of style -->
    <style>


body{

}
#inputWrapper{
  margin:190px auto;
  right:473.500;
  width:620px;
  height:100%;
}

#input1 {
  width:100%;
  height:75px;
  border:solid black 1px;
  margin-top:45px;
  padding:0px;
  word-wrap: break-word;
}




    h3 {
      padding:0px;
      margin:0px;
      font-family: arial,sans-serif;
      color:#1a0dab;
      text-align: left;
      cursor: pointer;
      font-size:18px;
    }

    p {
      color:rgb(0, 102, 33);
      font-size: 14px;
      font-style: normal;
      height: auto;
      width: auto;
      text-align: left;
      display: block;
      font-weight: 400px;
      line-height: 16px;
      padding: 0px;
      margin:0px;
      font-family: arial,sans-serif;
      cursor: pointer;
      word-wrap: break-word;
      cursor:grab;


    }

    .text {
    color:rgb(84, 84, 84);
    font-size: 13px;
    font-family: arial,sans-serif;
    text-align: left;
    word-wrap: break-word;
    font-weight: 400;
    line-height: 18.2px;
    display: inline;
    margin:0px;
    padding:0px;
    padding-right:25px;
    cursor:grab;
    }



                /*           Input4                           */
                /*Input section 4 is a wrapper around the input fields on the left side of the blocks
                SORRY FOR THE CONFUSING TITLE BUT INPUTSECTION WITHOUT ANY NUMBERS IS THE LAST ONE*/
                      #inputsection{
                      margin: 0px;
                      padding:0px;
                      width:400px;
                      position: absolute;
                      top:570px;
                      left:100px;
                      }

                      #labelcontainer {
                        clear:right;
                        float: left;
                        width:100px;
                        display: inline-block;
                      margin-top:20px;

                      }

                      #inputcontainer{
                        width:250px;
                        clear: left;
                        display: inline-block;

                      }

                        .label{
                          display: block;
                          clear: right;
                          float: left;
                          margin-top: 10px;
                          padding:0px;
                          width:100%;
                        }



                        .inputfield{
                          display: block;
                          clear: right;
                          float: left;
                          margin-top: 10px;
                          padding:0px;
                        }


                        /*     einde input 4     */






                  /*              Input 2              */

                  /*Input section 2 is a wrapper around the input fields on the left side of the blocks*/
                        #inputsection2{
                        margin: 0px;
                        padding:0px;
                        width:400px;
                        position: absolute;
                        top:350px;
                        left:100px;
                        }

                      #labelcontainer2 {
                        clear:right;
                        float: left;
                        width:100px;
                        display: inline-block;

                      }

                      #inputcontainer2{
                        width:250px;
                        clear: left;
                        display: inline-block;

                      }

                      .label2{
                        display: block;
                        clear: right;
                        float: left;
                        margin-top: 10px;
                        padding:0px;
                        width:100%;
                      }



                        .inputfield2{
                          display: block;
                          clear: right;
                          float: left;
                          margin-top: 10px;
                          padding:0px;
                        }





            /*              Input 3              */

            /*Input section 3 is a wrapper around the input fields on the left side of the blocks*/
                        #inputsection3{
                        margin: 0px;
                        padding:0px;
                        width:400px;
                        position: absolute;
                        top:475px;
                        left:100px;
                        }

                      #labelcontainer3 {
                        clear:right;
                        float: left;
                        width:100px;
                        display: inline-block;


                      }

                      #inputcontainer3{
                        width:250px;
                        clear: left;
                        display: inline-block;

                      }

                      .label3{
                        display: block;
                        clear: right;
                        float: left;
                        margin-top: 10px;
                        padding:0px;
                        width:100%;
                      }



                        .inputfield3{
                          display: block;
                          clear: right;
                          float: left;
                          margin-top: 10px;
                          padding:0px;
                        }





        .logo{
          padding: 0px;
          margin: 0px;
          width:20%;
          height: 20%;

        }
                              /*input field is actually block number 4 sorry*/
                            .inputfield{
                              background-color: #3CBC8D;
                              color: white;
                            }

                            .inputfield2{
                              background-color: #3CBC8D;
                              color: white;
                            }

                            .inputfield3{
                              background-color: #3CBC8D;
                              color: white;
                            }

        .google{
          margin:0px;
          padding:0px;
          border:0px;
          position: absolute;
          top:40px;
          left:290px;
        }

        .button {
          position: absolute;
          top:700px;
        }


    </style>
  <!-- end of style -->
</head>





<body>

    <img class="logo" src="treelogo.png" />

<div id="inputWrapper"> <!-- wrapping the 4 inputsections blocks -->

    <img class="google" src="achtergrond.png" />



      <div id="input1">
          <h3>Tree Online - Internet marketing bureau</h3>
          <p>https://www.treeonline.nl/ </p>
          <span class="text">Meer bezoekers? Meer klanten? Meer omzet? Tree Online is een
            ervaren online marketing bureau met bewezen resultaten in diverse markten en branches.</span>
      </div>

      <div id="input1">
          <h3 id="tekst2"></h3>
          <p id="p2"></p>
          <span id="span2" class="text"></span>
      </div>

      <div id="input1">
          <h3 id="tekst3"></h3>
          <p id="p3"></p>
          <span id="span3" class="text"></span>
      </div>


      <div id="input1">
          <h3 id="tekst4"></h3>
          <p id="p4"></p>
          <span id="span4" class="text"></span>
      </div>

</div>      <!-- end of input wrapper -->





<!-- input section for block 2 containing the html -->
<div id="inputsection2">

  <div id="labelcontainer2">
      <label class="label2" for="title2">Titel</label>
      <label class="label2" for="slug2">Website url</label>
      <label class="label2" for="description2">Beschrijving</label>
  </div>

  <div id="inputcontainer2">
      <input class="inputfield2" id="title2" maxlength="60"/>
      <input class="inputfield2" id="slug2"/>
      <input class="inputfield2" id="description2" maxlength="160"/>
  </div>

</div> <!-- input section2 close -->





<!-- input section for block 3 containing the html -->
<div id="inputsection3">
    <div id="labelcontainer3">
          <label class="label3" for="title3">Titel</label>
          <label class="label3" for="slug3">Website url</label>
          <label class="label3" for="description3">Beschrijving</label>
    </div>

     <div id="inputcontainer">
      <input class="inputfield3" id="title3" maxlength="60" />
      <input class="inputfield3" id="slug3"/>
      <input class="inputfield3" id="description3" maxlength="160"/>
    </div>
</div> <!-- input section 3 close -->





<!-- input section for block 4 containing the html -->
<div id="inputsection">

    <div id="labelcontainer">
      <label class="label" for="title">Titel</label>
      <label class="label" for="slug">Website url</label>
      <label class="label" for="description">Beschrijving</label>
    </div>

    <div id="inputcontainer">
      <form action='' method='post'>
      <label></label><br><input class="inputfield" id="title" maxlength="60" type='text' name='titlephp' value=''>
      <label></label><br><input type='text' name='slugphp' value='' class="inputfield" id="slug">
      <label></label><br><input type='text' name='descriptionphp' value=''class="inputfield" id="description" maxlength="160">
      <input class="button" type='submit' name='submit' value='Submit'>
      </form>
</div> <!-- input section4 close -->

<!-- php section goes over here -->






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

    //collect form data
    $titlephp = $_POST['titlephp'];
    $slugphp = $_POST['slugphp'];
    $descriptionphp = $_POST['descriptionphp'];


    //check name is set
    if($titlephp ==''){
        $error[] = 'Title is required';
    }


    //if no errors carry on
    if(!isset($error)){

        # Title of the CSV
        $Content = "Title, slug,description\n";

        //set the data of the CSV
        $Content .= "$titlephp, $slugphp,$descriptionphp\n";

        # set the file name and create CSV file
        $FileName = "formdata-".date("d-m-y-h:i:s").".csv";
        header('Content-Type: application/csv');
        header('Content-Disposition: attachment; filename="' . $FileName . '"');
        echo $Content;
        exit();
    }
}

//if their are errors display them
if(isset($error)){
    foreach($error as $error){
        echo "<p style='color:#ff0000'>$error</p>";
    }
}
?>






<!-- add javscript here -->
<script>

//code voor input nummer 2
$("#title2").on('change input',function(){
$('#tekst2').html($(this).val());
})

$("#slug2").on('change input',function(){
$('#p2').html($(this).val());
})

$("#description2").on('change input',function(){
$('#span2').html($(this).val());
})


// code voor input nummer 3
$("#title3").on('change input',function(){
$('#tekst3').html($(this).val());
})

$("#slug3").on('change input',function(){
$('#p3').html($(this).val());
})

$("#description3").on('change input',function(){
$('#span3').html($(this).val());
})



//code voor input nummer 4
$("#title").on('change input',function(){
$('#tekst4').html($(this).val());
})

$("#slug").on('change input',function(){
$('#p4').html($(this).val());
})

$("#description").on('change input',function(){
$('#span4').html($(this).val());
})





</script>

</body>
</html>

Posted 8-Nov-17 23:40pm

Member 13507633

Updated 9-Nov-17 2:01am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Accepted Answer · 2017-11-09T02:01:00

Solution 1

There are two ways to get your data from an HTML page (on the client) to a php file (on the server):

<forms>[^] - This goes directly to the php page and will open a new page
<AJAX>[^] - this uses javaScript to send the data and will update any part of your page (much more efficient).

Which you choose is up to you.

Posted 9-Nov-17 2:01am

W∴ Balboos, GHB

Comments

Member 13507633 9-Nov-17 8:42am

So i need to use AJAX to use the php code in the description to output the input of the formm to a csv file?

W∴ Balboos, GHB 9-Nov-17 8:44am

Neither I (nor anyone else around here) is going to wade through all of your code. AJAX transfers data to a php file on the server and you can manipulate it there. The technique is in the links. The logic must come form you.