Buttons and texts move back to original place - php

I have set when user types something in the search box, the suggestions will appear.
When suggestions appear, it will push the buttons and texts below down as I set its position relative.
But when user delete those words in the search box and the suggestion list disappears, the buttons and texts below the suggestion list did not move back to the original place.
How can I let the buttons and texts below the suggestion list move back to the original place when user delete those words in search box?
This is my current code:
<?php
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
?>
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: transparent;
z-index: 10;
}
.suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 10px;
}
.suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
</head>
<body>
<form method="GET" action="search.php" name="q">
<table align="center">
<div>
<h1><center>Brandon's Search Engine</center></h1>
</div>
<div align="center">
<input type="text" name="q" id="q" class="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
onkeyup="getSuggestion(this.value)" autocomplete="off" autoFill="on" onblur="closeBox()"/>
<script>document.getElementById('q').focus()</script>
<div id="suggestionBox" style="visibility: collapse;">
<div id="suggestion" style="width: 645px; text-align: left; padding: 2px;">
</div>
</div>
</div>
<br />
<div align="center">
<input type="submit" value="Search" name="submit" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
</div>
<div align="center">
Can't find your site? <br /> Insert here.
</div>
</table>
<input type="hidden" name="page" value="1" />
</form>
</body>
</html>
Thanks in advance.

On your function in your onkeyup, you can check the text value and if that was empty change css position of your element to original:
function getSuggestion(value){
if(!value.length()){
//change to original place
}
.
.
.
}
I hope to help

Related

Search Bars and Buttons in HTML

I'm currently making a website using PHP, HTML and a classless CSS (Water.css) Right now, I have a problem aligning my search bars and buttons into a row
<!-- Search Bar Name-->
<form action="search.php" method="GET">
<input type="text" name="query" placeholder="Search Equipment">
<input type="submit" value="Go">
</form>
<!-- Search Bar Price-->
<form action="searchprice.php" method="post">
<label for="min_price">Minimum price:</label>
<input type="text" name="min_price" id="min_price">
<label for="max_price">Maximum price:</label>
<input type="text" name="max_price" id="max_price">
<input type="submit" name="submit" value="Search">
</form>
<button onclick="window.location='add_equipment.php'">Add Equipment</a></button>
The search bars and the button work perfectly fine, however I have no clue why it stacks up like a column instead of being in a row.
It would be nice if someone could help me with this, I am a newbie to HTML
Not sure if this is what you are looking for:
Like Amir said lots of information on using divs,flex,grid in css. I feel like the classless link is making your inputs do that everytime I link to it, it puts everything in columns.
<!DOCTYPE html>
<html>
<head>
<title>Equipments</title>
<meta charset="utf-8">
<link rel="stylesheet" a href="./css/main.css">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css#2/out/water.min.css"> -->
</head>
<body>
<div class="nav">
<h2>List Of Equipments</h2>
<div class="navs">
<!-- Search Bar Name-->
<form action="search.php" method="GET">
<label for="Search">Search Equipment</label>
<input type="text" name="query" placeholder="Search Equipment"><br>
<input id="Sbutton" type="submit" value="Go">
</form>
</div>
<!-- Search Bar Price-->
<div class="navs">
<form action="searchprice.php" method="post">
<label for="min_price">Minimum price:</label>
<input type="text" name="min_price" id="min_price"><br>
<label for="max_price">Maximum price:</label>
<input type="text" name="max_price" id="max_price"><br>
<input id="Sbutton2" type="submit" name="submit" value="Search">
<button id="Sbutton3" onclick="window.location='add_equipment.php'">Add Equipment</button>
</form>
</div>
</div>
</body>
</html>
Here is the CSS when I am styling I like to change background of each div class so I can get a visual of what is happening as I change code.
.nav{
display: flex;
flex-direction: column;
margin: 10px;
margin-left: 15%;
margin-right: 15%;
padding-bottom: 20px;
background-color: rgb(77, 76, 76);
}
h2{
text-align: center;
font-size: 24px;
font-weight:bolder;
}
.navs {
width: 50%;
background-color: rgb(108, 109, 109);
height: 150px;
text-align: center;
margin-left: 25%;
margin-top: 20px;
padding-top: 10px;
}
#Sbutton{
font-size: 16px;
height: 150%;
width: 15%;
margin-left: 15%;
margin-top: 10px;
}
#Sbutton2{
font-size: 16px;
height: 150%;
width: 15%;
margin-left: 15%;
margin-top: 10px;
}
#Sbutton3{
font-size: 16px;
height: 150%;
width: 25%;
margin-top: 10px;
}
table{
border:3px solid gray;
border-collapse: collapse;
}
th{
border: 2px solid gray;
padding: 6px;
}
td{
border: 2px solid gray;
text-align: center;
}
Hope this helps.

Why does my form submit an empty string to php file in ie but not chrome or mozilla?

My goal is, when somebody fills out the form, for the information to be submitted on click of the submit button, to the php file, which in turn will email me with the form values. It works in chrome and mozilla apparently, but not in Edge or Safari. I've searched everywhere for an answer but I can't find anything. What am I not including? Did I code it wrong? I just cannot figure it out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type= "text/css" href="PMOM.css">
<link href="https://fonts.googleapis.com/css?family=Arimo|Fira+Sans|Muli|Nunito|Open+Sans|Roboto+Condensed|Ubuntu" rel="stylesheet">
<title>Photo Mirror of Memories</title>
<style>
h1{
text-align: center;
color: white;
}
.main{
padding-top: 80px;
height: 1500px;
width: 100%;
background-color: rgb(82, 117, 139);
}
.main_form{
margin: 0 auto;
padding: 100px 200px;
margin-top: 50px;
height: 700px;
width: 800px;
background-color: white;
border-radius: 15px;
}
.type-field{
width: 400px;
height: 40px;
margin-bottom: 10px;
}
.package-select{
margin-bottom: 8px;
}
.comments{
width: 400px;
height: 40px;
margin: 10px 0;
}
#media (max-width: 600px) {
.main{
color: white;
}
.main_form{
width: 50%;
height: 200px;
background-color: inherit;
padding: 0px;
/* border: 1px solid red; */
}
.type-field{
width: 200px;
height: 40px;
margin-bottom: 10px;
/* border: 1px solid red; */
}
.comments{
width: 200px;
/* border: 1px solid red; */
height: 40px;
margin: 10px 0;
}
}
</style>
</head>
<body>
<div class="main">
<h1 style="color: white;">Please fill out your information</h1>
<div class="main_form">
<form method="post" action="/emailSending.php">
<input class="type-field" type="text" name="fname" placeholder="First Name"><br>
<input class="type-field" type="text" name="lname" placeholder="Last Name"><br>
<input class="type-field" type="text" name="email" placeholder="Email"><br>
<input class="type-field" type="text" name="phone" placeholder="Phone Number"><br>
<input class="package-select" type="radio" name="package" value="Basic" checked> Basic Package
<br>
<input class="package-select" type="radio" name="package" value="Deluxe"> Deluxe Package
<br>
<input class="package-select" type="radio" name="package" value="Premium"> Premium Package
<br>
<input class="comments" type="text-field" name="notes" placeholder="Comments">
<button type="submit" name="button" value="Submit">Submit</button>
</form>
</div>
</div>
<!-- <div id="app2"></div> -->
<script src="/dist/build.js"></script>
</body>
</html>
<?php
$fname=$_POST[fname];
$lname=$_POST[lname];
$email=$_POST[email];
$phone=$_POST[phone];
$package=$_POST[package];
$comments=$_POST[comments];
$to='email#email.com';
$subject="Customer Package";
$message="Name: ".$fname."\n"."Last name: ".$lname."\n"."Email: ".$email."\n"."Phone number: ".$phone."\n"."Package: ".$package;
$headers="From: ".$email;
mail($to, $subject, $message, $headers);
echo "<h1>Thank you</h1>"
?>
For starters, your PHP variables are wrong. Note that I added single quotes to your post elements. I'm not sure how that could possibly be working with any browser.
Other than what I did below, I see no reason at all that it wouldn't work with any browser.
$fname=$_POST['fname'];
$lname=$_POST['lname'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$package=$_POST['package'];
$comments=$_POST['comments'];

Trying to create a submission form with preview

I am trying to make this form be able to submit a post and create a page with auto indexing and also be able to preview the page being created before hand. Can someone help? Thank you in advance, I am pretty bad with PHP files.
#wrapper{
margin: 0 auto;
margin-top: 200px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-top: 50px;
background-color: #2C2C2C;
position: relative;
width: 70%;
max-width: 1250px;
min-width: 300px;
z-index: 1;
color: white;
text-decoration-color: white;
box-shadow: 0px 2px 20px 5px #000;
}
.form-control .header {
width: 90%;
outline: inset #6B6B6B;
margin: 5px;
}
<div align="center" id="wrapper">
<h2>Welcome Back <Insert Name>!</h2>
<form id="submission" method="post" action="submission-handler.php" enctype="multipart/form-data">
Blog Title:<center></center>
<br>
Blog Content:<center><textarea name="message" class="form-control" placeholder="Type your blog post here" rows="10" required></textarea>
<textarea name="header" type="text" class="form-control" placeholder="Blog Post Header" rows="2" required></textarea>
</center>
<br>
Upload an image: (Not Currently Working)
<center><input type="file" name="filetoupload" id="filetoupload" disabled></center>
<br>
<br>
<hr>
<br>
<br>
<input type="submit" class="form-control submit" value="Preview Post" disabled>
<input type="submit" class="form-control submit" value="Finalize Post" disabled>
</form>
</div>
The actual page looks different than shown up on here. If anybody needs a reference , here
based on your code above your trying to pass a value to another page..
try to put this code in submission-handler.php
<?php
$message = $_POST['message'];
$header = $_POST['header'];
echo $message;
echo "<br>";
echo $header;
?>

Can't align <div> in center and can't manage opacity properly

Please have a look at the image and the code below. I am making simple signup html form. I am trying to keep in middle of the screen. also I just want to make div background opacity 50% but somehow, text input's and button's opacity is also changed to 50%.
Please help me to find a solution.
Here's a code of a simple signup form.
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<form>
<div style="background-color: rgb(255,255,255); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</body>
</html>
See Output of the code above
Please explain or answer deeply. Thanks in advance
just use this color code for the div if you want to make its opacity 50% only<div style="background-color: rgb(255,255,255,.5); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">and then you dont have to use the opacity for the div.
first give some width to your formform{width:600px;margin:auto; display:block; }it will makes your form in center.
to give margin from top and bottom give style like thisform{margin:150px auto;} so it will also give margin from top-bottom.
Try this your code will be run
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<form>
<div style="background-color: rgba(255,255,255, .5); display: table; padding: 20px; border-radius: 25px; margin: 0px auto; text-align: center; top: 50%; left:50%; position: absolute; transform: translate(-50%, -50%)">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none; background: #fff;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</body>
</html>
show code bellow:
body {
text-align: center;
}
form {
display: inline-block;
}
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<form>
<div style="background-color: rgb(255,255,255,0.5);display: inline-table; padding: 20px; border-radius: 25px;">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</body>
</html>
I have prepared a snippet for you, using the display: table(-X) properties:
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
</head>
<body background="back.jpg">
<div style="display:table; height:calc(100vh - 50px); width:100%;"><!-- Change the "-50px" part to whatever size your navbar is -->
<div style="display:table-row;">
<div style="display: table-cell; vertical-align:middle; text-align:center;">
<form style="margin:auto;">
<div style="background-color: rgb(255,255,255); opacity: 0.5; padding: 20px; border-radius: 25px;">
<input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
<input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
<p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
<input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Hope this helps!

3 clickable icons in textbox

I wanna have 3 clickable icons in textbox
can someone support me with this
I found this code for a single clickable icon
I tried more icons in it but is not working
#form1 div {
position: relative;
width: 400px;
padding: 5px;
border: 1px solid #000;
overflow: hidden
}
#form1 label {
float: left;
text-align: right;
width: 80px;
padding: 0 20px;
}
#form1 input {
width: 200px;
padding: 5px 40px 5px 5px;
float: left;
}
#form1 a {
float: left;
margin: 2px 0 0 -32px;
text-decoration: none;
width: 30px;
height: 25px;
background: transparant;
position: relative;
z-index: 99;
}
<form id="form1" method="post" action="">
<div>
<label for="text">Enter text:</label>
<input type="text" name="text" id="text" />
<a href="http://www.pmob.co.uk"><img src="/user/icos/6.gif" border="none">
</a>
</div>
</form>
How about this???
sample screenshot
<form id="form1" method="post" action="">
<div>
<label for="text">Enter text:</label>
<input type="text" name="text" id="text" />
<a href="http://www.url.com"><img src="/folder/img/name.png" height="20" width="20">
</a>
</div>
<input type="submit" value="submit"/>
</form>
You can expand from here, take a look at the picture.... if thats what you want

Categories