MadLibs overwrite inputfields - php

im trying to make a madlibs kind of game, right now i got everything working besides 1 thing. the output should overwrite the questions instead of showing above the questions. how can i manage to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Mad Libs</title>
<link rel="stylesheet" type="text/css" href="MadLibs.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<form action="" method="POST">
<h1> MadLibs</h1>
<?php
if($_SERVER["REQUEST_METHOD"] == "POST"){
$Input1 = $_POST["Input1"];
$Input2 = $_POST["Input2"];
$Input3 = $_POST["Input3"];
$Input4 = $_POST["Input4"];
echo "here is a test $Input1. here is an other test $Input2 and again an other test
$Input4 test $Input3.";
}else{
<p id="Text">test question <input type="text" required name="Input1" placeholder="Enter your answer.."></p>
<p id="Text">test question <input type="text" required name="Input2" placeholder="Enter your answer.."></p>
<p id="Text">test question<input type="text" required name="Input3" placeholder="Enter your answer.."></p>
<p id="Text">test question <input type="text" required name="Input4" placeholder="Enter your answer.."></p>
<input id="Submit" type="submit" name="submit" value="Send">
</form>
?>
<footer>
<p> A #2021 website</p>
</footer>
</body>
</html>
The end result shows like this but the questions and the input field should be gone when the submit button is pressed

Related

How can i make it so that the server creates a new html page every time i post a blog on my site?

So i am trying to make the server create a new HTML file every time i create a blog on my page on the make page of my website.
So what i tried is getting all the details with $_POST with this:
HTML:
<form name="bloginput" action="blogpost.php" method="POST" class="bloginputform">
<input type="text" name="bloginput" placeholder="Type your blog here..." id="bloginput" class="bloginput">
<div class="popup">
<input type="button" placeholder="Submit" id="popupbtn" onclick="toggleHideShow()">
<span class="popuptext hide" id="myPopup">
<input type="name" name="author" placeholder="Name:" id="nameinput" class="nameinput">
<br>
<input type="email" name="authoremail" id="emailinput" placeholder="E-mail..." class="emailinput">
<br>
<label class="filelabel" id="filelabel">
<input type="file" name="post-image" accept="image/*" id="fileinput" class="fileinput">
<p class="fileinputtext" id="fileinputtext">
Upload Image:
</p>
</label>
<p><button class="crossbtn" onclick="toggleHideShow()" id="crossbtn">✕</button><input type="submit" value="Post" placeholder="Post" class="submitbtn" id="submitbtn"></p>
</form>
PHP:
<?php
$blogtext = $_POST["bloginput"];
$author = $_POST["author"];
$email = $_POST["authoremail"];
$image = $_POST["post-image"];
$Title = "My blog."
$file = "blogposttest.html"
$code = '
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
<link rel="stylesheet" href="CSS/Blogs.css">
</head>
<body>
<div class="wrapperdiv" id="wrapperdiv">
<h1 class="Title" id="Title">$Title<br>By: $author</h1>
<br>
<br>
<br>
<center>
<img src="$image" name="Blogimage" class="blog-img" id="blog-img">
</center>
<br>
<br>
<br>
<p class="blogtext" id="blogtext">$blogtext</p>
</div>
</body>
</html>
';
file_put_contents($file, $code)
header("Location: http://blogmedia.nl")
?>
I would really like some help on this.

You have some syntax errors in your code. you can use the below code and when I test it will create an HTML file but consider that if you want to create multiple files you should give a dynamic name and also it's better to validate your variables in PHP.
<form name="bloginput" action="#" method="POST" class="bloginputform">
<input type="text" name="bloginput" placeholder="Type your blog here..." id="bloginput" class="bloginput">
<div class="popup">
<input type="button" placeholder="Submit" id="popupbtn" onclick="toggleHideShow()">
<span class="popuptext hide" id="myPopup">
<input type="name" name="author" placeholder="Name:" id="nameinput" class="nameinput">
<br>
<input type="email" name="authoremail" id="emailinput" placeholder="E-mail..." class="emailinput">
<br>
<label class="filelabel" id="filelabel">
<input type="file" name="post-image" accept="image/*" id="fileinput" class="fileinput">
<p class="fileinputtext" id="fileinputtext">
Upload Image:
</p>
</label>
<p><button class="crossbtn" onclick="toggleHideShow()" id="crossbtn">✕</button><input type="submit" value="Post" placeholder="Post" class="submitbtn" id="submitbtn"></p>
</form>
<?php
$blogtext = $_POST["bloginput"];
$author = $_POST["author"];
$email = $_POST["authoremail"];
$image = $_POST["post-image"];
$Title = "My blog.";
$file = "blogposttest.html";
$code = <<<EOD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
<link rel="stylesheet" href="CSS/Blogs.css">
</head>
<body>
<div class="wrapperdiv" id="wrapperdiv">
<h1 class="Title" id="Title">$Title<br>By: $author</h1>
<br>
<br>
<br>
<center>
<img src="$image" name="Blogimage" class="blog-img" id="blog-img">
</center>
<br>
<br>
<br>
<p class="blogtext" id="blogtext">$blogtext</p>
</div>
</body>
</html>
EOD;
file_put_contents($file, $code)
?>
Use the below condition to check $_POST is empty or not. This resolves as true even if all $_POST values are empty string
if (!empty($_POST))
{
// Your code
}
Check specific key is available in post data. You can use this condition:
if (isset($_POST['author']) )
{
}
Using this code you can check before creating a new file to avoid rewriting an old HTML file.
If the file with the same name exists:
if (file_exists( $file )) {
// todo acction. for example create a random name for your new file.
}

Beginner PHP $_POST issue (input type?)

I'm trying to figure out what's going wrong here. I'm trying to post a question number to the page, so as you answer questions it increments up. For some reason I can't get it to post, the only way I got it to work was when I include var_dump($q_num); after the part where I increment the $q_num variable.
I'm assuming this is something very simple but I'm not sure what it is. Any help would be appreciated, thanks!
I know I should sanitize the input, and I've tried a FILTER
<?php
include('inc/quiz.php');
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math Quiz: Addition</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<?php
if (isset($_POST['page'])){
$q_num = (int)$_POST['page'];
} else {
$q_num = 1;
}
$p_num = 10;
?>
<?php var_dump($q_num);?>
<div class="container">
<div id="quiz-box">
<p class="breadcrumbs">Question #<?= $q_num;?> of <?= $p_num;?></p>
<p class="quiz">What is <?php
?> </p>
<form action="index.php" method="POST">
<input type="hidden" name="page" value="<?php ($q_num+1);?>" />
<input type="submit" class="btn" name="answer" value="135" />
<input type="submit" class="btn" name="answer" value="125" />
<input type="submit" class="btn" name="answer" value="115" />
</form>
</div>
</div>
</body>
</html

PHP produces a blank webpage

When ever I use this piece of PHP, it makes the webpage blank (white) and does not show anything. Here is my code:
<?php
if(isset($_POST['submit'])){
//
$user = $_POST['username'];
$pwrd = $_POST['pwrd'];
//include database connection
include('../includes/db_connect.php');
if(empty($user) || empty($pwrd)){
echo 'Missing information';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="container">
<form action="Login.php" mthod="post">
<p>
<label>Username</label><input type="text" name="username" />
</p>
<p>
<label>Password</label><input type="password" name="pwrd" />
</p>
<input type="submit" name="submit" value="logIn" />
</form>
</div>
</body>
</html>
After testing different pieces of the PHP code, I have noticed only this code make the page blank
if(empty($user) || empty($pwrd)){
echo 'Missing information';
}
?>
Is this possibly something to do with Apache, or is there something wrong with my PHP?

There are following problem:-
your first if bracket is not closed. So closed it.
your form method is not correct. Spelling mistake:-
So the correct code is here :-
<?php
if(isset($_POST['submit'])){
//
$user = $_POST['username'];
$pwrd = $_POST['pwrd'];
//include database connection
include('../includes/db_connect.php');
if(empty($user) || empty($pwrd)){
echo 'Missing information';
}
}// missing
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="container">
<form action="Login.php" method="post"> // method is written mthod
<p>
<label>Username</label><input type="text" name="username" />
</p>
<p>
<label>Password</label><input type="password" name="pwrd" />
</p>
<input type="submit" name="submit" value="logIn" />
</form>
</div>
</body>
</html>
Output:- before submit :- http://prntscr.com/74xhb7
After submit :- http://prntscr.com/74xhmm
Note:- the bracket that i said you to close you can close it based on your convinence. Thanks.
Also don't panic with error you seen in second screenshot. It's because i am not having included files at my end.

Form not using the file in action attribute

I have a very simple HTML form that is supposed to send information to the file written in action attribute via GET but somehow it's transfering the information back to index.php:
index.php
<!doctype html>
<html>
<head>
<title>Sandbox</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>PHP Forms Sandbox</h1>
<form acton="process_form.php" method="get">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" />
<label for="email">E-mail:</label>
<input type="text" name="email" id="email" value="" />
<input type="submit" name="submit_btn" id="submit_btn" value="Submit" />
</form>
</body>
</html>
process_form.php
<!doctype html>
<html>
<head>
<title>Sandbox</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>PHP Response Sandbox</h1>
<?php
$username = $_GET["username"];
$email = $_GET["email"];
echo $username . " : " . $email . "<br />";
?>
</body>
</html>
The bizarre aspect is that when I submit the form, the URL shows that it is not even using process_form.php:
http://127.0.0.1/Learning/?username=test&email=x%40test.com&submit_btn=Submit
If I manually change the URL to include process_form.php it seems to be working fine and I get the results I am looking for:
http://127.0.0.1/Learning/process_form.php?username=test&email=x%40test.com&submit_btn=Submit
On my development computer, I'm running EasyPHP 14.1 local WAMP server and thought it might be the root of the problem so I uploaded the files to my website that is running newest PHP on Apache, but the problem still exists there.
What am I doing wrong?

you have a typo error in action; you have given acton. Should be like this:
<form action="process_form.php" method="get">

First thing - you have a typo:
<form action="process_form.php" method="get">
^
The second thing - in my opinion the best method of handling forms is using POST method, not GET, so I would change it to:
<form action="process_form.php" method="post">
and in process_form.php I would use $_POST instead of $_GET

After digging around your question,
Index.php
<!doctype html>
<html>
<head>
<title>Sandbox</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>PHP Forms Sandbox</h1>
<form action="process_form.php" method="get">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" />
<label for="email">E-mail:</label>
<input type="text" name="email" id="email" value="" />
<input type="submit" name="submit_btn" id="submit_btn" value="Submit" />
</form>
</body>
</html>
process_form.php
<!doctype html>
<html>
<head>
<title>Sandbox</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>PHP Response Sandbox</h1>
<?php
$username = $_GET["username"];
$email = $_GET["email"];
echo $username . " : " . $email . "<br />";
?>
</body>
</html>
Note: If you will not specify form method, By default it will take GET method. So please make sure action should be perfect.
Above code just copy and paste, it should work perfect.
Ask me for further clarification.
Thanks,
Gauttam

php/jquery-mobile: Second page not running validation on two page form

I'm new to php and am trying to make a very simple two page form. Any help or guidance would be very appreciated!
Problem:
The second page does not run error validation when coming to it from the first page.
Both pages run error validation correctly URL's entered directly
Setup:
Page 1 one is HTML. It POSTS to Page2.
Page 2 is php and the data from Page 1 is stored in an input field
Live example:
http://www.linplusg.com/page1.html
In IE the Page 2 URL after coming from Page 1 looks to be incorrect:
http://www.linplusg.com/page1.html#/page2.php
In FF and Chrome the URL looks fine but I think there's a flicker/refresh happening.
Does something else happen besides just opening the page when doing a POST to a page? Does something value get stored the new fields? Am I doing the form action wrong? Dazed and confused...
Thank you so much for any help or suggestions. I've been searching around for answers all night and my brain feels like jello. It seems like I'm missing something simple?!
Page1 Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js">
</script>
<script>
$(document).ready(function(){
$("#initialForm").validate();
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<form id="initialForm" method="post" action="page2.php">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput3">
Zip Code
</label>
<input name="zip" id="zip" maxlength=5 value="" type="text" class="required" />
</fieldset>
</div>
<input type="submit" data-theme="e" value="Submit" />
</form>
</div>
</div>
</body>
</html>
Page 2 code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js">
</script>
<script>
$(document).ready(function(){
$("#fullForm").validate();
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<form id="fullForm" method="get" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<input name="zip" id="zip" value="<?php echo $_POST["zip"]; ?>" type="" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput3">
First Name
</label>
<input name="first_name" id="first_name" placeholder="" value="" type="text" class="required"/>
</fieldset>
</div>
<input type="submit" data-theme="e" value="Submit" />
</form>
</div>
</div>
</body>
</html>

To prevent this you need to specify data-ajax="false" in the form element in page1.
<form id="initialForm" method="post" action="page2.php" data-ajax="false">
see http://jquerymobile.com/test/docs/forms/forms-sample.html for more information.

Without the PHP code, I can just guess, but maybe it is because in the second form you have a method="get" instead of method="post", and in PHP you check the $_POST variable?

You could preserve the ajax transitions and still have your javascript execute on your second page by moving your script inside the div with the data-role "page".
See this answer here: https://stackoverflow.com/a/6428127/2066267

Categories