Hey guys well I figured out how to style a php echo, which was quite common sense, but instead having an ugly colored box just waiting for an answer, is there a way to just display the box when the user hits the calculation they want? my website - http://codepen.io/willc86/pen/BrEmt though php wont work, just have it for styling purpose, but I am sure you will understand the concept.
this is my php/html
<html>
<body>
<style><?php include "style.css" ?></style>
<form action="index.php" method="POST">
<table border="1">
<td>
<p>insert value one: <input type="text" name="num1"> <br>
<p>insert value two: <input type="text" name="num2"> <br>
</td>
<td>
<input type="submit" name="add" value="Addition">
<input type="submit" name="sub" value="Subtraction">
<input type="submit" name="mult" value="Multiplication">
<input type="submit" name="div" value="Division">
<input type="submit" name="all" value="Display All">
</td>
</table>
</form>
<div id="answer">
hello
<?php
if (isset($_POST['num1']) && ($_POST['num2'])){
$val1 = $_POST['num1'];
$val2 = $_POST['num2'];
$add = $val1+$val2;
$sub = $val1-$val2;
$mult = $val1*$val2;
$div = $val1/$val2;
}
if (isset($_POST['add'])){
echo $add;
}
?>
</div>
</body>
</html>
and this is my CSS
body{
background-color:#f0f0f0;
}
table{
margin:50px auto;
background-color: tan;
border: 2px solid black;
}
#answer{
margin:auto;
width:100px;
height: 100px;
background-color: tan;
text-align:center;
border: solid black 1px;
line-height: 100px;
}
Put your tags within your PHP's if condition, like this:
<?php
if (isset($_POST['num1']) && ($_POST['num2'])){
echo("<div id=\"answer\">");
$val1 = $_POST['num1'];
$val2 = $_POST['num2'];
$add = $val1+$val2;
$sub = $val1-$val2;
$mult = $val1*$val2;
$div = $val1/$val2;
if (isset($_POST['add'])){
echo $add;
}
echo("</div>");
}
?>
Related
I have the following code :
i = 0;
function add_task(){
return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}
#pos{
position: absolute;
bottom: 25px;
text-align:center;
}
form{
padding-left:70px;}
h1{padding:50px; color:blue}
#body {border:5px solid black;}
<form name="form1">
<label for="addtask">Add task : </label>
<input type="text" id="addtask"/>
<button id="ad" onclick="add_task()">Add task</button><br><br>
<label style="vertical-align:top;">Task list :</label>
<textarea id="tasklist" rows=10>
</textarea>
<div id="pos">
<label for="nexttask">Next task : </label>
<input type="text" id="nexttask"/>
<button id="nt" onclick="next_task">Show Next task</button><br>
</div>
</form>
I need to copy the text entered in textbox and paste in the textarea. But the text is displayed and erased immediately like blinking. I want that to be displayed permanently.
Please guide me!
<button>s, by default are type="submit", so clicking is submitting your form. Add type="button" to your button.
Here's a working version. I think your issue was that buttons within a form will default to type submit if no type is specified.
i = 0;
function add_task(){
return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}
function formSubmitted(e) {
// Handle form submit, if needed
return false;
}
function next_task() {
// Not yet implemented
}
#pos{
position: absolute;
bottom: 25px;
text-align:center;
}
form{
padding: 1rem;
}
h1{
padding: 1rem;
margin: 0;
color: blue;
}
#body {
border: 5px solid black;
}
<header>
<h1>To Do list</h1>
</header>
<form name="form1" onsubmit="return formSubmitted(event)">
<label for="addtask">Add task : </label>
<input type="text" id="addtask"/>
<button id="ad" onclick="add_task()">Add task</button><br><br>
<label style="vertical-align:top;">Task list :</label>
<textarea id="tasklist" rows=10></textarea>
<div id="pos">
<label for="nexttask">Next task : </label>
<input type="text" id="nexttask"/>
<button id="nt" onclick="next_task">Show Next task</button><br>
</div>
</form>
After click on submit button I get the result in innerhtml. I need to copy the results using the copy button. Please help me out....
Script mentioned below :enter link description here
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="getCopy();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
It is a bit tricky, because as it is not a TextElement you can not select() it as a text.
So what we do here is to get the innerText of the div element, then we create a Textarea element an we append the value, then we can select() it and copy it to the clipboard, here you have the working code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
function copyToClipBoard() {
var str = document.getElementById('display').innerText;
var el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="copyToClipBoard();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
Ok, I think this is what you want...
Javascript:
function copyToClipboard() {
document.querySelector('#display').select();
document.execCommand('copy');
}
And I couldn't figure out how to take it from anything but an input, so if you do this, and then style the input with no borders so it doesn't look like an input...
<button id="copyToClipboard" onclick="copyToClipboard()" style=" height:30px; width:100px" >Copy</button>
<input id = "display" name="exampleClipboard" style="width:500px; border: none;" type="text">
I played around with the first answer and couldn't get it to work for me either. So I tried it this way. Note: I'm giving you a function that creates a dialog for testing. The actual function is shown below. But I switched to a textarea instead of a div which may not be quite what you want.
function innerHtmlTest() {
var html='<textarea rows="2" cols="40" id="display" style="border:none;">This is just a text string.</textarea>';
html+='<br /><input type="button" value="Copy" onClick="getHtml();" />';
html+='<br /><textarea rows="2" cols="40" id="dsply" placeholder="Paste Here"></textarea>';
html+='<script>function getHtml(){ document.getElementById("dsply").select();document.execCommand("copy");}</script>';
var userInterface=HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModelessDialog(userInterface, "Copy");
}
function getHtml(){
document.getElementById("display").select();
document.execCommand("copy");
}
So perhaps you would like to change to a text area instead of a div. I use this technique with text boxes a lot but never tried it before with a div.
UPDATE: To future readers
The solution has been provided make sure you look at my answer and charlietfl's answers below.
Post before solution
I have this script that I made that sends values to a page call x.php. The way it works is each red container has it's own inputs and button so if you click on any
of those red container button it will send their container input values to page x.php so those values can be echoed.
The problem is that it can send any of the buttons request but it only sends the first red container input values if I would do that to the other containers it just sends the first red container input values to be echoed
but not their own so how can I do it in a way where it will send their red container values.
This is how it will look like if I get it to work the way I want it to work
.gif-screenshot
Here is the code
index.php
<style>
.dataContainer{
background-color: red;
width: 185px;
position: relative;
margin-bottom: 25px;
}
.dataContainerDesign .a,.b,.send{
display: block;
margin: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
var containerButtons = document.querySelectorAll('.dataContainer .send');
for (var i = 0; i < containerButtons.length; i++) {
containerButtons[i].addEventListener('click', perContainer);
}
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
document.querySelector('.dataContainer').innerHTML= xhr.responseText;
}
};
function perContainer(){
var data = new FormData();
//Var structrue
var a= document.querySelector('.a').value;
var b= document.querySelector('.b').value;
//
//Data var
data.append('a', a);
data.append('b', b);
//
xhr.open('POST','x');
xhr.send(data);
}
});
</script>
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
x.php
<p style='display: inline-block;'>
<?php
$a= $_POST['a'];
$b= $_POST['b'];
echo 'Sent Values: ';
echo $a.','.$b;
?>
</p>
The problem is that document.querySelector('.a') will return the first element with that class found in the document.
You need to look for that class within the specific button's siblings
One way is to isolate the parent of the button and query within that parent. I left out the XHR and FormData just to simplify demo and to log the associated values to console instead
document.addEventListener('DOMContentLoaded', function() {
var containerButtons = document.querySelectorAll('.dataContainer .send');
for (var i = 0; i < containerButtons.length; i++) {
containerButtons[i].addEventListener('click', perContainer);
}
});
function perContainer(evt) {
// from event object get button clicked
let button = evt.currentTarget,
// and isolate the parent container
div = button.parentNode;
//query only within the parent container
var a= div.querySelector('.a').value;
var b= div.querySelector('.b').value;
console.log([a, b]);
}
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text' value="a1">
<input class='b' type='text' value="b1">
<button class='send'>Send</button>
</div>
<!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text' value="a2">
<input class='b' type='text' value="b2">
<button class='send'>Send</button>
</div>
<!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text' value="a3">
<input class='b' type='text' value="b3">
<button class='send'>Send</button>
</div>
<!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text' value="a4">
<input class='b' type='text' value="b4">
<button class='send'>Send</button>
</div>
<!--</dataContainer>-->
Thanks to charlietfl for teaching me how to solve this because of charlietfl I was able to solve this so i'm ma reward charlietfl's answer as the hint solution but I combine charlietfl's
way and my way just in case if any future reader wants to know how this looks completed, how I always intended it to be.
Ok here is the completed code that works.
index.php
<style>
.dataContainer{
background-color: red;
width: 205px;
position: relative;
margin-bottom: 25px;
}
.dataContainerDesign .first_name,.last_name,.send{
display: block;
margin: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
var dataContainerSendButtons = document.querySelectorAll('.dataContainer .send');
for (var i = 0; i < dataContainerSendButtons.length; i++) {
dataContainerSendButtons[i].addEventListener('click', dataContainerProcess);
}
function dataContainerProcess(execution){
var send = execution.currentTarget;
var dataContainer = send.parentNode;
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
dataContainer.innerHTML= xhr.responseText;
}
}
var data = new FormData();
//Var structrue
var first_name= dataContainer.querySelector('.first_name').value;
var last_name= dataContainer.querySelector('.last_name').value;
var image= dataContainer.querySelector('.image').files[0];
//
//Data var
data.append('first_name', first_name);
data.append('last_name', last_name);
data.append('image',image);
//
xhr.open('POST','x');
xhr.send(data);
}
});
</script>
<div class='dataContainer dataContainerDesign'>
<input class='first_name' type='text'>
<input class='last_name' type='text'>
<input class='image' type='file'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='first_name' type='text'>
<input class='last_name' type='text'>
<input class='image' type='file'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='first_name' type='text'>
<input class='last_name' type='text'>
<input class='image' type='file'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='first_name' type='text'>
<input class='last_name' type='text'>
<input class='image' type='file'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
x.php
<?php
$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];
if($_FILES['image']['name'] != '')
{
$image_test = explode('.', $_FILES['image']['name']);
$image_ext = end($image_test);
$image_prefix= 'random';
$image_file_name = $image_prefix . uniqid() . '.' . $image_ext;
$image_directory = 'images/';
$image_location = $image_directory.$image_file_name;
move_uploaded_file($_FILES['image']['tmp_name'], $image_location);
$profile_image= $image_location;
}
?>
<style>
img{
display: block;
width: 200px;
height: 200px;
margin: auto;
}
h1{
text-align: center;
margin: 0;
}
</style>
<img src='<?php echo $profile_image; ?>'>
<h1><?php echo $first_name; ?></h1>
<h1><?php echo $last_name; ?></h1>
I having a bit of a problem in my code. What I am trying t achieve is that I want to change some contents of CSS like changing the style of a page using javascript inside php, but I have an error saying there is no id or null
<!DOCTYPE html>
<?php
if (isset($_POST["get_name"])) {
$theName = $_POST["my_name"];
echo "<script>
document.getElementById('text').style.display = 'block';
document.getElementById('name').style.display = 'none';
</script>";
}
?>
<html>
<head>
<style>
#check {
background-color: yellow;
color: black;
border-color: yellow;
border-radius: 15px;
display: inline-block
}
#text {
display: none;
}
#name {
}
</style>
</head>
<body>
<form id="name" action="" method="post">
Name: <input type="text" name="my_name" placeholder="Your name here" required>
<input type="submit" name="get_name" value="Enter">
</form>
<form id="text" action="" method="post">
Your text: <textarea name="getText" row="10" col="10"></textarea>
<input type="submit" name="get_text" value="Enter">
</form>
</body>
</html>
You should put script tag in head :
<!DOCTYPE html>
<html>
<head>
<?php
if (isset($_POST["get_name"])) {
$theName = $_POST["my_name"]; ?>
<script>
document.getElementById('text').style.display = 'block';
document.getElementById('name').style.display = 'none';
</script>
<?php
}
?>
<style>
#check {
background-color: yellow;
color: black;
border-color: yellow;
border-radius: 15px;
display: inline-block
}
#text {
display: none;
}
#name {
}
</style>
</head>
<body>
<form action="" method="post">
Name: <input type="text" name="my_name" placeholder="Your name here" required>
<input type="submit" name="get_name" value="Enter">
</form>
<form id="text" action="" method="post">
Your text: <textarea name="getText" row="10" col="10"></textarea>
<input type="submit" name="get_text" value="Enter">
</form>
</body>
</html>
I'm trying to replace these two text nodes with each other. It suppose to be like a correction verification. What its suppose to do is to see if the input is correct after you focus on another input.
This is the html
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" value="" onblur="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
function validatefirst() {
if (document.myform.first_name.value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
this is the css file:
.one {
color:#000;
position:absolute;
top:400px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:400px;
}
So if you can help me out that will be great. Please no jquery. Thank you
I'm not sure quite what you're trying to accomplish with the function-within-a-function. The following does something, not sure if it's what you want or not:
<html>
<head>
<style>
.one {
color:#000;
position:absolute;
top:200px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:200px;
}
</style>
</head>
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" onchange="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
<script>
function validatefirst() {
if (document.getElementById("first_name").value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
one_container.appendChild(one);
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
</script>
</body>
</html>