Click here to Skip to main content
13,253,159 members (51,184 online)
Rate this:
 
Please Sign up or sign in to vote.
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:


<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 9-Nov-17 0:40am
Updated 9-Nov-17 3:01am

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

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.
  Permalink  
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 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.

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web04 | 2.8.171114.1 | Last Updated 9 Nov 2017
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100