PHP (Hypertext PreProcessor) - PHP is a server side scripting language designed primarily for web development. PHP code may be embedded into HTML, or it can be used in combination with various web template systems ,web content management systems and web frameworks.

What is PHP Online Sandbox?

The Online PHP Sandbox was created to help with debugging, testing and running your php code online. Also it allows developers to share their PHP code with the community. This tool works with a whitelist of functions. All functions that do require disk, system or network access are blacklisted, others whitelisted. Max execution time is set to 3 seconds. If you find a disabled function that should be whitelisted or if you run into other problems, please contact us. For echo output line break in the CLI mode, need to use PHP_EOL or \n Test your PHP code online without the need of a web server.

Can I run PHP program online?

Using our tool you can edit PHP code, and view the result in your browser. Just paste your PHP code to the textarea above and click to the button "Execute" and you will get result of executing PHP Online .

How to validate PHP syntax online?

With our tool you can paste your code into the PHP editor and it will immediately show syntax errors if any. Also, you can try to run your code online to find more hidden problems and bugs.

Why do you need to run PHP script online?

Very often, developers need to test some small logic, and it's faster to test it in our PHP compiler than to create a separate script and test it on their local server or on a remote server.

closer - PHP Online

Form of PHP Sandbox

*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.

Enter Your PHP code here for testing/debugging in the Online PHP Sandbox. As in the usual PHP files, you can also add HTML, but do not forget to add the tag <?php in the places where the PHP script should be executed.

Full code of closer.php

<button onclick="copyTemplate()">Copy Template</button>
<script>
function copyTemplate() {
// Get the template element (which contains the table and associated elements and functions)
var template = document.getElementById("template");
// Clone the template element and its contents
var copiedTemplate = template.cloneNode(true);
// Give the cloned template element a unique id
copiedTemplate.id = "copiedTemplate";
// Clear the user input fields in the copied template
// Only clear the fillable and content editable fields, not the orange bar field
var inputElements = copiedTemplate.querySelectorAll(".field");
var contentEditable = copiedTemplate.querySelector("#contenteditable");
for (var i = 0; i < inputElements.length; i++) {
inputElements[i].value = "";
}
contentEditable.innerHTML = "";
// Clear the user input areas in tables 3 and 4
var table3InputElements = copiedTemplate.querySelectorAll("#table3 .field");
for (var i = 0; i < table3InputElements.length; i++) {
table3InputElements[i].innerHTML = "";
}
var table4InputElements = copiedTemplate.querySelectorAll("#table4 .field");
for (var i = 0; i < table4InputElements.length; i++) {
table4InputElements[i].innerHTML = "";
}
// Append the cloned template element to the document body
document.body.appendChild(copiedTemplate);
// Get the table element from the copied template
var table = copiedTemplate.querySelector("table");
// Give the table a unique id
table.id = "copiedTable";
// Create a new element to hold the "add row" button and its associated function
/*
var addRowButtonContainer = document.createElement("div");
// Add the "add row" button to the container element
var addRowButton = document.createElement("button");
addRowButton.innerHTML = "Add Row";
addRowButton.onclick = function() {
// Add a new row to the table
var row = document.getElementById("copiedTable").insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<input class='field' type='text' placeholder='Enter Filename' style='width: 430px'>";
cell2.innerHTML = "<input class='field' type='text' placeholder='Enter Graphic Description' style='width: 430px'>";
cell3.innerHTML = "<input class='field' type='text' placeholder='Enter Alt Text/Title Tag' style='width: 430px'>";
}
// Append the button to the container element
addRowButtonContainer.appendChild(addRowButton);
// Create a new element to hold the "toggle table" button and its associated function
var toggleTableButtonContainer = document.createElement("div");
// Add the "toggle table" button to the container element
var toggleTableButton = document.createElement("button");
toggleTableButton.innerHTML = "Toggle Table";
toggleTableButton.onclick = function() {
// Toggle the display style of the table
var table = document.getElementById("copiedTable");
if (table.style.display === "none") {
table.style.display = "table";
} else {
table.style.display = "none";
}
}
// Append the button to the container element
toggleTableButtonContainer.appendChild(toggleTableButton);
// Append the button container elements to the copied template element
copiedTemplate.appendChild(addRowButtonContainer);
copiedTemplate.appendChild(toggleTableButtonContainer);
*/
}
</script>
<div id="template">
</script>
<style>
table {
width: 70%;
}
</style>
<table id="table1">
<tr style="background-color: gray;">
<td>Page <input type="number"></td>
<td>Screen <input type="number"></td>
</tr>
<tr style="background-color: orange;">
<td colspan="2"><input type="text" style="width: 500px;">
</td>
</tr>
<tr>
<td colspan="2">
<div id="contenteditable" contenteditable=""></div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">Select Navigate to Continue</td>
</tr>
<tr style="background-color: gray;">
<td colspan="2" style="text-align: center;">Navigation Bar</td>
</tr>
<table id="myTable" style="table-layout: fixed; resize: both;">
<tbody>
<tr style="background-color: gray;">
<th style="width: 430px">Filename</th>
<th style="width: 430px">Graphic Description</th>
<th style="width: 430px">Alt Text/Title Tag</th>
</tr>
<tr>
<td><input class="field" type="text" placeholder="Enter Filename" style="width: 430px"></td>
<td><input class="field" type="text" placeholder="Enter Graphic Description" style="width: 430px"></td>
<td><input class="field" type="text" placeholder="Enter Alt Text/Title Tag" style="width: 430px"></td>
</tr>
<button onclick="addRow(this)">Add Row</button>
<button onclick="toggleTable(this)">Toggle Table</button>
</tbody>
<script>
function addRow(e) {
var table = e.parentNode.querySelector("#myTable");
console.log(table);
var row = table.insertRow(-1); // Insert a new row at the end of the table
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<input class='field' type='text' placeholder='Enter Filename' style='width: 430px'>";
cell2.innerHTML = "<input class='field' type='text' placeholder='Enter Graphic Description' style='width: 430px'>";
cell3.innerHTML = "<input class='field' type='text' placeholder='Enter Alt Text/Title Tag' style='width: 430px'>";
}
function toggleTable(e) {
var fields = document.getElementsByClassName("field");
var table = e.parentNode.querySelector("#myTable");
console.log(table);
// If the table is collapsed, expand it
if (table.open === false) {
for (var i = 0; i < fields.length; i++) {
fields[i].style.display = "block";
}
table.open = true;
} else {
// Otherwise, collapse it
for (var i = 0; i < fields.length; i++) {
fields[i].style.display = "none";
}
table.open = false;
}
}
</script>
<table id="table3">
<tbody>
<tr style="background-color: gray;">
<td>Programming</td>
</tr>
<tr>
<td colspan="2"><textarea style="width:100%; height:100%;"></textarea></td>
</tr>
<table id="table4">
<tbody>
<tr style="background-color: lightblue;">
<th>Narrated Text</th>
<th>Graphics</th>
</tr>
<tr>
<td style="width: 50%;">
<div contenteditable="true" class="editable-area"></div>
</td>
<td style="width: 20%;">
<div contenteditable="true" class="editable-area"></div>
</td>
</tr>
<style>
.editable-area {
white-space: pre-line;
overflow-wrap: break-word;
min-height: 100px;
max-height: 100px;
resize: vertical;
}
</style>
</tbody>
</table>
</div>

File Description

closer
PHP Code
19 Dec-2022
6.38 Kb

You can Share it:

Latest PHP Pastes

Full list

Tools

closer - PHP Online

Form of PHP Sandbox

Result of php executing

Full code of closer.php