如何在外部使用我的HTML中的一些PHP代码 [英] How do I use some PHP code in my HTML externally
本文介绍了如何在外部使用我的HTML中的一些PHP代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建某种Web应用程序。
你填写标题等等，你得到一个样式的例子，我想将这个样式的例子导出到csv表，我有代码因为但无法在我的html页面中实现它。
那么如何在我的html之外访问php代码。
我尝试了什么：
我看过te intwerbs但是无法从中得到明确答案。
一个人说有可能另一个说不是或者只有服务器。
这就是我想用javascript输出做的事情。
[< a href =https://daveismyname.blog/form-to-csv-with-phptarget =_ blanktitle =New Window> ^ ]
这是我的代码：
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>推荐答案
_POST['submit'])){
//collect form data
_POST['submit'])){ //collect form data
titlephp =
titlephp =
_POST['titlephp'];
_POST['titlephp'];
这篇关于如何在外部使用我的HTML中的一些PHP代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
