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>
Related
Hey everone, I am trying to make a validation of radio button. Once submit without clicking the button, it will be a red warning text next to the text-input as this image
The code is below here,I am very appreciated if someone fixes this problem.
<html>
<head>
<link rel ="stylesheet" type="text/css" href="456.css">
<meta charest ="utf-8">
<title>error-msg will not display correctly at the same time</title>
<script>
function validation(thisForm) {
// other
if(!thisForm.other.value.length)
{
document.getElementById('other-error').style.display= "inline-block";
}
else
{
document.getElementById('other-error').style.display= "none";
}
if (!thisForm.other.value.length) {
return false;
}
return true;
}
</script>
<style>
.error-msg {
display: none;
color:red;
border: 1px solid;
width: 120px;
margin-left: 10px;
}
</style>
</head>
<body>
<form action="#" onSubmit="return validation(this);">
<fieldset>
<div class="Other">
<label for="other">Other</label>
<input type="radio" id="other" name="other" />
<input type="text" id="o-text" name="o-text">
<span class="error-msg" id="other-error">other error</span>
</div>
</fieldset>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>```
you can just check with checked property.
if(document.getElementById("yourRadiobuttonID").checked==false){
document.getElementById('other-error').style.display= "inline-block";
}
else{
document.getElementById('other-error').style.display= "none";
}
I am making a registration form. I have finished making the registration form, but I just need to add one more thing to the registration form: a button that adds text to the registration form. How do I make that button appear in the text input? Can someone help? Here is a runnable current snippet of the registration form:
function ValidationForm() {
let username = document.forms["RegForm"] ["Name"];
let email = document.forms ["RegForm"] ["Email"];
let phoneNumber = document.forms ["RegForm"] ["Telephone"];
let pass = document.forms ["RegForm"] ["Password"];
if (username.value == "") {
alert("Please enter your name.");
username.focus();
return false;
}
if (email.value == "") {
alert("Please enter a valid email address.")
email.focus();
return false;
}
if (phoneNumber.value == "") {
alert("Please enter your telephone number.")
phoneNumber.focus();
return false;
}
if (pass.value == "") {
alert("Please enter your password.")
pass.focus();
return false;
}
return true;
}
.regform {
margin-left: 70px;
font-weight: bold;
text-align: left;
font-family: sans-serif, bold, Arial, Helvetica;
font-size: 14px;
}
.buttons {
display: flex;
align-items: center;
width: 100%;
}
div input {
margin-right: 10px;
}
form {
margin: 0 auto;
width: 600px;
}
form input {
padding: 10px;
}
form label {
display: block;
width: 100%;
margin-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 style="text-align: center;"> Registration Form </h2>
<form name="RegForm" action="hidden for no hackers" onsubmit="return ValidationForm()" method="POST" class="regform">
<div>
<label for="Name">Name:</label>
<input type="text" id="Name" size="60" name="Name">
</div>
<br>
<div>
<label for="E-mail">E-mail Address:</label>
<input type="email" id="E-mail" size="60" name="Email">
</div>
<br>
<div>
<label for="Password">Password:</label>
<input type="password" id="Password" size="60" name="Password">
</div>
<br>
<div>
<label for="Telephone">Telephone:</label>
<input type="tel" id="Telephone" size="60" name="Telephone">
</div>
<br>
<div class="buttons">
<input type="submit" value="Send" name="Submit">
<input type="reset" value="Reset" name="Reset">
</div>
</form>
</body>
</html>
Here is a "button that adds text":
document.getElementById("btn").addEventListener("click", () => {
document.getElementById("input").value += "Text";
});
<button id="btn">Click to add text to input below</button>
<br /><br />
<input id="input" />
I am trying to build a form that will calculate average pay. Very simply the calculation needs to be x/y = z. I would like it to autocomplete and not need to submit a form. This is what I have so far, I got close but I am going to insert the code onto a Weebly website and it could not read it. Any help would be massively appreciated!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(output1)
{
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>
OK. There are a number of issues here.
First, your javascript is referring to the HTML element, not it's value.
you need to add ids to the inputs and ensure that you convert the values to numbers.
This might help:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate()
{
var input1Val = Number(document.getElementById("input1").value);
var input2Val = Number(document.getElementById("input2").value);
var result = (input1Val/input2Val);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" id="input2" name="input2" value=""/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
<input type="button" value="Go!" onclick="calculate()">
</div>
</form>
</body>
</html>
Following code will work. You have to watch out the difference to understand the problem in your code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(input2)
{
var input1 = document.getElementById("input1").value;
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>
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>");
}
?>
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>