'Input and output values for php into the browser?
I just started my module on php for school, having completed Javascript two months ago I am familiar with a lot of the elements but a bit rusty. Basically I setup a form with html and added a bit of css to make it pretty. The school is making us do some generic exercices. I now how to grab values etc using this with Javascript
document.getElementById("textBox").value;
and to return the output through my div I created with
document.getElementById("return").innerHTML = ... ;
I honestly can't figure out how to do this with php and I am sure it's real easy but can't for the life of me find a solution online and the schools videos are very vague.
The exerciser is "Create an application that ask the user for number (1-7) and return the day of the week associate with the number entered. You must validate the number"
This is the code I have so far....
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>PHP exercise 1</title>
<link rel="stylesheet" type="text/css" href="./styling1.css"/>
</head>
<body>
<!--E X C E R S I S E 3 !-->
<section id="allContent">
<section>
<button class="hide" id="clic"> <h4> E X E R C I C E 1 </h4></button>
</section>
<div id="container" class="hidden">
<div id="Barbox"><p class="pClass"> Create an application that ask the user for number (1-7) and return the day of the week associate with the number entered. You must validate the number</p>
</div>
<div id="background"></div>
<div class="ball"></div><div id="ball2"></div>
<div id="titleBox">
<p id="titlePRG">Enter a number!</p>
</div>
<form>
<input type="text" value="<?php echo $number = 1 ; ?>" id="textField">
<input type="button" value="Enter" class="button" onclick="return_day()">
</form>
<div id="valueReturned">
<p id="returnText"><p>
</div>
<a href="index4.html" id="jButton"><h3> Next Exercise </h3></a>
</div>
</section>
<?php
function return_day(){
$number = 1 ;
if ($number == 1){
echo "The day of the week is Monday";
}
else if ($number == 2){
echo "The day of the week is Tuesday";
}
else if ($number == 3){
echo "The day of the week is Wednesday";
}
else if ($number == 4){
echo "The day of the week is Thursday";
}
else if ($number == 5){
echo "The day of the week is Friday";
}
else if ($number == 6){
echo "The day of the week is Saturday";
}
else if ($number == 7){
echo "The day of the week is Sunday";
}
else{
echo ("Wrong input, try again!");
}
}//end of function
?>
This is what the browser looks like if it makes any difference so you understand my question
The answer is supposed to display in the white box at the bottom which is
Solution 1:[1]
Unlike Javascript, php is totally different! Javascript's functions can be accessed in HTML by using onclick, onload, etc. attributes, but php's functions are quite different and can only be accessed through php codes. First you need to create a prom with a method and then send to the same page(in your case) and then run the conditions that you have applied and at last echo the result as i have done in it.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<title>PHP exercise 1</title>
<link rel="stylesheet" type="text/css" href="./styling1.css" />
</head>
<body>
<!--E X C E R S I S E 3 !-->
<section id="allContent">
<section>
<button class="hide" id="clic">
<h4> E X E R C I C E 1 </h4>
</button>
</section>
<div id="container" class="hidden">
<div id="Barbox">
<p class="pClass"> Create an application that ask the user for number (1-7) and return the day of the week associate with the number entered. You must validate the number</p>
</div>
<div id="background"></div>
<div class="ball"></div>
<div id="ball2"></div>
<div id="titleBox">
<p id="titlePRG">Enter a number!</p>
</div>
<form method="get" action="<?php $_SERVER['PHP_SELF']; ?>">
<input type="text" value="" id="textField" name="number">
<input type="submit" value="Enter" class="button" name="submit">
</form>
<?php
if (isset($_GET['submit']))
$number = isset($_GET['number']) ? $_GET['number'] : '';
if ($number == 1) {
$returntext = "The day of the week is Monday";
} else if ($number == 2) {
$returntext = "The day of the week is Tuesday";
} else if ($number == 3) {
$returntext = "The day of the week is Wednesday";
} else if ($number == 4) {
$returntext = "The day of the week is Thursday";
} else if ($number == 5) {
$returntext = "The day of the week is Friday";
} else if ($number == 6) {
$returntext = "The day of the week is Saturday";
} else if ($number == 7) {
$returntext = "The day of the week is Sunday";
} else {
$returntext = ("Wrong input, try again!");
}
?>
<div id="valueReturned">
<p id="returnText"><?php echo $returntext; ?><p>
</div>
<a href="index4.html" id="jButton">
<h3> Next Exercise </h3>
</a>
</div></section>
Hope that, you must be running these php codes in a suitable server! Good go!
Solution 2:[2]
Below code should help you understand.
<?php
$response = "";
if(isset($_POST) && isset($_POST["mytext"])): /// check if user submitted form
$num = $_POST["mytext"]; //put form mytext variable.. retrieved from html <input name="mytext"....
if(is_numeric($num)):
switch($num):
case "1":
$response = "Monday";
break;
case "2":
$response = "Tuesday";
break;
case "3":
$response = "Wednesday";
break;
case "4":
$response = "Thursday";
break;
case "5":
$response = "Friday";
break;
case "6":
$response = "Saturday";
break;
case "7":
$response = "Sunday";
break;
default:
$response = "Invalid number";
endswitch;
else:
$response = "Invalid number";
endif;
endif;
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PhpFiddle Initial Code</title>
<!--
http://phpfiddle.org
-->
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
<div style="margin: 30px 10%;">
<h3>My form</h3>
<form id="myform" name="myform" action="" method="post">
<label>Text</label> <input type="text" value="" size="30" maxlength="100" name="mytext" id="" /><br /><br />
<br />
<button id="mysubmit" type="submit">Submit</button><br /><br />
<?php if (isset($_POST)): ?>
<div style="background-color:red;color:white;"><?php echo $response; ?></div>
<?php endif; ?>
</div>
</form>
</div>
<?php
?>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Sazad Ahemad |
| Solution 2 | dweb |