I have a PHP page that contained the following HTML elements.
<div id="templatemo_banner" onClick="parent.location='../index.php'">
<div id="logo"></div>
</div>
<div id="templatemo_menu_search">
<div id="templatemo_menu">
<?php include("../template/menu.php"); ?>
</div> <!-- end of menu -->
<div id="search_section">
<form action="#" method="get">
<input type="text" value="Enter keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" />
</form>
</div>
<div class="cleaner"></div>
</div>
In the respective CSS file:
#templatemo_banner {
width: 960px;
height: 288px;
margin: 0 auto;
background: url(images/templatemo_banner_bg.jpg) no-repeat;
border-bottom: 5px solid #cfd389;
}
#templatemo_banner #logo {
float: left;
margin: 100px 0 0 80px;
width: 673px;
height: 128px;
background: url(images/templatemo_logo.jpg) no-repeat;
}
#templatemo_menu_search {
clear: both;
width: 960px;
height: 50px;
background: url(images/templatemo_menu_bg.jpg) no-repeat;
}
#templatemo_menu {
float: left;
width: 650px;
height: 50px;
}
#templatemo_menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#templatemo_menu ul li {
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
padding: 0 30px;
height: 35px;
padding-top: 18px;
text-align: center;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #333333;
font-weight: bold;
outline: none;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #ffffff;
background: url(images/templatemo_menu_hover.jpg) no-repeat;
}
I face this problem where the aforementioned html elements repeated itself once after I perform the form submission. You can picture it as if after I have my banner and menu there is an extra banner and menu below the original set. Anyway the extra elements disappear after I refresh the page.
I will appreciate any advise. I run this code in XAMPP 1.7.7 using Google Chrome as my browser.
Remove the hash in the action...
<form action="" method="get">
Related
When I try to display content from another blade template, it will only show certain data on the webpage. What I want is inside this page, the content from test.blade.php together with the button, when click will pop up a form(I don't want the test.blade.php content to be inside). But whenever I try to do it, only certain information is shown and when I view page source, all the data has already been loaded. I have asked this question before already and someone told me it was the fault of my css, but I when I try to look at it, I don't really see anything which is causing this to happen. Can someone help me please? Thanks in advance!
I will put the screenshot here first in the question.
This is what it is suppose to look like where it will have a scroll down bar, and below there should be a button for the popup form.
But this is what I am getting (I have checked that all the data are already loaded)
elements.css (here is the css that I used)
#abc {
width: 100%;
height: 100%;
opacity: .95;
top: 0;
left: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: auto;
}
img#close {
position: absolute;
right: -14px;
top: -14px;
cursor: pointer;
}
div#popupContact {
position: absolute;
left: 50%;
top: 17%;
margin-left: -202px;
font-family: 'Raleway', sans-serif;
}
form {
max-width: 300px;
min-width: 250px;
padding: 10px 50px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
background-color: #fff;
}
p {
margin-top: 30px;
}
h2 {
background-color: #FEFFED;
padding: 20px 35px;
margin: -10px -50px;
text-align: center;
border-radius: 10px 10px 0 0;
}
hr {
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
}
input[type=text] {
width: 82%;
padding: 10px;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
}
#name {
background-image: url(../images/name.jpg);
background-repeat: no-repeat;
background-position: 5px 7px;
}
#email {
background-image: url(../images/email.png);
background-repeat: no-repeat;
background-position: 5px 7px;
}
textarea {
background-image: url(../images/msg.png);
background-repeat: no-repeat;
background-position: 5px 7px;
width: 82%;
height: 95px;
padding: 10px;
resize: none;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
margin-bottom: 30px;
}
#submit {
text-decoration: none;
width: 100%;
text-align: center;
display: block;
background-color: #FFBC00;
color: #fff;
border: 1px solid #FFCB00;
padding: 10px 0;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
span {
color: red;
font-weight: 700;
}
button {
width: 10%;
height: 45px;
border-radius: 3px;
background-color: #cd853f;
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 18px;
cursor: pointer;
}
evaltest.blade.php
<html>
<head>
<title>Popup form </title>
<meta name="robots" content="noindex, nofollow">
<link href="{{ asset('css/elements.css') }}" rel="stylesheet">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43981329-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<!-- body starts here -->
<body id ="bdy" style="overflow:hidden;">
<div id="abc">
<!-- Popup div starts here -->
<div id="popupContact">
<!-- contact us form -->
<form class="form-horizontal" method="post" action="{{ url('/evaltest/'.$data0->id) }}">
{{ csrf_field() }}
<img id ="close" src="{{ URL::to('/image') }}/3.png" onclick ="div_hide()">
<input type="hidden" name="user_id" value="{{$data0->id}}">
<div class="form-group">
<label class="col-md-2"><b>Recommendation:</b></label>
<div class="col-md-6">
<input type="radio" id ="recommendation" name="recommendation" value="Yes"> Yes<br>
<input type="radio" id ="recommendation" name="recommendation" value="No"> No<br>
</div>
</div>
<div class="form-group">
<div class="col-md-6-offset-2">
<input id= "submit" type="submit" href="javascript: check_empty()" class="btn btn-primary" value="Save">
</div>
</div>
</form>
</div>
<!-- Popup Div Ends Here -->
// #include('test')
//it will show all data if I were to put here but I don't want to put it together with the popup form
</div>
<!-- Display Popup Button -->
//this will show a few info but no button
#include('test')
<h1>Click Button to Evaluate</h1>
<button id="popup" onclick="div_show()">Popup</button>
<script src="{{ asset('/js/my_js.js') }}"></script>
//this will show even lesser info but button is shown
//#include('test')
</body>
</html>
test.blade.php (there are more information inside but I only put some as an example of how I got the information)
<div class="container">
#foreach ($data as $object)
<b>Name: </b>{{ $object->Name }}<br><br>
<b>Alias: </b>{{ $object->Alias }}<br><br>
<b>Email: </b>{{$object->Email}}<br><br>
#endforeach
</div>
I have tried removing some of the things inside the css but nothing happen, I even try removing those with the position: fixed and also added .container but it still doesn't work.
myjs.js
// function to display popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
// function to hide popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
I have figured it out how to show my data is that I have to remove the style="overflow:hidden;" part so that it will work
I am trying to make a way that I can decide in what table the name and the hour goes, by selecting it from one or both checkboxes.
For example, if I have a new name and hour, I can choose whether it is going in the table of "standard" or "advanced" or both by selecting it through the checkboxes.
#myform .plus, .minus {
text-decoration: none;
color: #fff;
background-color: #fdd818;
text-align: center;
letter-spacing: .5px;
-webkit-transition: .2s ease-out;
transition: .2s ease-out;
cursor: pointer;
}
.collapsible-header{
color: #ffffff;
}
.row{
margin: 0;
width: 100%;
}
.uren{
display: -webkit-inline-box;
padding-left: 10px;
padding-right: 10px;
}
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #ffcc00;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
.btn:hover {
background: #dbaf00;
text-decoration: none;
}
/* Pop up */
.letspop{
background-color: #fff;
width: 120px;
display: block;
margin: 5% auto;
padding: 20px;
position: relative;
text-align: center;
float: right;
margin-right: 20px;
margin-top: 0px;
}
.letspop:hover{
cursor: pointer;
}
.overlay{
display: none; /* Default Hidden */
position: fixed;
left: 0;
top: 0;
z-index: 1;
background-color: rgba(0,0,0,0.6);
height: 100%;
width: 100%;
}
.popup{
display: none; /* Default Hidden */
position: fixed;
left: 50%;
top: 5%;
z-index: 2;
background-color: #fff;
height: 450px;
width: 300px;
overflow: hidden;
padding: 40px;
transform: translate(-50%, 0);
}
#new_module{
width: 195px;
}
h1, h2{
color: steelblue ;
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
line-height: 1;
}
h2{
color: dodgerblue ;
}
small{
color: #444 ;
font-size:0.4em;
display: block;
margin: 0.2rem auto 0;
}
.close{
position: absolute;
top: 8px;
right: 8px;
display: block;
color: #666666;
font-family: sans-serif;
}
.close:hover{
cursor: pointer;
color: #444444;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<form action="#" method="POST">
<div class="row">
<div class="input-field col s6">
<input id="new_module" type="text" class="validate">
<label class="active" for="new_module">Name</label>
</div>
</div>
<form action="#">
<p class="range-field">
<input type="range" id="test" min="0" max="20" />
</p>
</form>
<p>
<input type="checkbox" class="filled-in" id="standard"/>
<label for="standard">Standard</label>
</p>
<p>
<input type="checkbox" class="filled-in" id="advanced"/>
<label for="advanced">Advanced</label>
</p>
<hr>
<button class="btn waves-effect waves-light" type="submit" name="action">
<i class="material-icons right">send</i>
</button>
<div class="close">X</div>
</form>
You need to set name for html elements to submit to server.
try the following changes:
<form action="checkbox.php" method="post">
<p>
<input type="checkbox" class="filled-in" id="standard" name="chk[]" value="standard"/>
<label for="standard">Standard</label>
</p>
<p>
<input type="checkbox" class="filled-in" id="advanced" name="chk[]" value="advanced"/>
<label for="advanced">Advanced</label>
</p>
<input type="submit" />
</form>
and try the following php code to find selected checkbox
foreach($_POST['chk'] as $key => $chk){
if($chk == 'standard'){
// do some code
}
if($chk == 'advanced'){
// do some code
}
}
quick answer to begin to help you.
Do a "indatabase.php" where there is your SQL actions in. After, do something like :
<form action="/indatabase.php" method="POST">
See this :
https://stackoverflow.com/a/22836074/8695939
If you want a bit more security, use PHP PDO instead.
You can have sqli and PDO exemples here :
https://www.w3schools.com/php/php_mysql_insert.asp
visit link1
search for "check" using CTRL + F, than you can see :
I wanted to display like this as link2
we are using following code :
css
font: 12px/1.35 Arial, Helvetica, sans-serif;
padding: 2px 8px !important;
border: 1px solid FFFFFF;
color: FFFFFF;
height: 29px;
line-height: 29px;
border-radius: 0;
}
.catalog-product-view button.button span span {
color: #fff;
float: left;
font-size: 16px;
font-weight: normal !important;
text-align: center;
Phtml
<?php if ($this->isFieldVisible('postcode')): ?>
<li class="item">
<label for="estimate_postcode"<?php if ($this->isFieldRequired('postcode')):?> class="required" <?php endif;?>><?php if ($this->isFieldRequired('postcode')):?><em>*</em><?php endif;?><?php echo Mage::helper('webdevlopers_productpageshipping')->__('') ?></label>
<div class="input-box">
<img src ="http://totaltoys.com/media/font-100.png" height= '35' width= '70'>
<input placeholder="Enter your PIN Code" class="input-text validate-postcode<?php if ($this->isFieldRequired('postcode')):?> required-entry<?php endif;?>" type="text" id="estimate_postcode" name="estimate[postcode]" value="<?php echo $this->htmlEscape($this->getFieldValue('postcode')) ?>" />
</div>
</li>
<?php endif; ?>
Edit your HTML like this:
li.item {
align-items: center;
display: flex;
}
li.item img {
opacity: .3;
height: 20px;
width: 40px;
}
li.item label {
color: #aaa;
font-family: 'ubuntu';
}
li.item .search {
margin-left: 6px;
}
li.item .search input {
border: 1px solid #ddd;
border-radius: 3px;
padding: .5rem;
}
li.item .search button {
background-color: #00bfff;
border: none;
border-radius: 3px;
color: #fefefe;
padding: .5rem .5rem;
}
<li class="item">
<img src="http://totaltoys.com/media/font-100.png" alt="" />
<label for="search">Check availability</label>
<div class="search">
<input type="text" id="search" placeholder="Enter your PIN code"/>
<button>Check</button>
</div>
</li>
Add this classes to your CSS file:
.actions {
float: left;
margin-top: 9%;
}
ul#shipping-estimation-form {
float: left;
}
I have an existing div and I want to add some new data (5 spans) to this existing div. The method I was using makes the following GUI
I want it to display the search results in existing div (in black translucent region). My HTML Code is
<title>Search your Friends</title>
<body>
<div class="title">
GTBIT's Almuni Diary
</div>
<div class="main">
<form id="myForm" method="POST">
<input placeholder="Enter some text to search"type="text" class="name" name="query">
<br>
<span class="searchby">Search Criteria</span>
<select name="criteria">
<option value="name" selected="selected">Search by Name</option>
<option value="enrno">Search by Enrollment No.</option>
<option value="email">Search by Email ID</option>
<option value="phno">Search by Phone No.</option>
</select>
<br>
<input type="button" class="search" value="Search">
</form>
<div class="sr">
Search Results
</div>
<div class="dynamicData">
<div class="header">
<span class="heading">Name</span>
<span class="heading">Email ID</span>
<span class="heading">Enrollment No.</span>
<span class="heading">Nickname</span>
<span class="heading">Batch</span>
</div>
<div class='dataDiv'>
</div>
</div>
</div>
CSS :
body
{
font-family: "source sans pro";
font-size: 20px;
background-image: url("../images/searchbg.jpg");
background-size: 100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
.title
{
display: none;
color: #03C9A9;
background-color: rgba(0,0,0,0.8);
padding: 5px;
font-weight: 500;
font-size: 54px;
height: 90px;
text-align: center;
}
.main
{
display: none;
width: 90%;
margin: 0 auto;
margin-top: 20px;
background-color: rgba(0,0,0,0.5);
padding: 20px;
}
.searchby, input, select
{
color: white;
font-family: inherit;
font-size: 28px;
display: inline-block;
}
.name
{
color: black;
width: 80%;
}
.searchby
{
margin-top: 40px;
}
select
{
border: 0px solid white;
margin-left: 30px;
margin-right: 30px;
color: black;
font-size: 22px;
}
.search
{
background-color: rgba(0,0,0,0.8);
color: #03C9A9;
margin: 0 auto;
margin-top: 30px;
padding: 5px;
display: block;
border: 0px solid white;
cursor: pointer;
font-size: 32px;
}
.name
{
margin-left: 10px;
border: 0px solid white;
}
.sr
{
margin-top: 75px;
font-family: inherit;
font-size: 32px;
width: 100%;
text-align: center;
background-color: rgba(0,0,0,0.8);
color: #03C9A9;
margin-bottom: 50px;
}
.dynamicData
{
width: 98%;
margin-left: 10px;
padding: 2px;
background-color: rgba(0,0,0,0.3);
}
.header
{
padding: 5px;
width: 90%;
text-align: center;
padding: 5px 0px 5px 0px;
margin: 0 auto;
}
.heading
{
background-color: #03C9A9;
color: white;
font-family: inherit;
font-size: 24px;
height: 30px;
width: 202px;
display: inline-block;
margin-bottom: 10px;
}
.dataDiv
{
padding: 2px;
width: 90%;
text-align: center;
margin: 0 auto;
}
.data
{
font-family: inherit;
font-size: 24px;
height: 30px;
width: 202px;
display: inline-block;
margin-bottom: 5px;
color: black;
background-color: rgba(255,255,255,0.75);
}
PHP Script responsible for adding (after getting data form database)
while($stmt->fetch())
{
echo "<br>
<span class='data ndata'>$nm</span>
<span class='data emaildata'>$em</span>
<span class='data enrnodata'>$eno</span>
<span class='data nicknamedata'>$nn</span>
<span class='data batchdata'>$bt</span>";
}
My client looks great in Firefox but looks a little funky in Chrome :(
Here's some of my html code.. from the Inventory layout
<div class="clientinventory">
<div class="objtitle">
<p>Ore Inventory</p>
</div>
<div class="invitemvalue">10</div>
<div class="invitemtxtholder">Copper</div>
<div class="invitemvalue">0</div>
<div class="invitemtxtholder">Iron</div>
<div class="invitemvalue">0</div>
<div class="invitemtxtholder">Gold</div>
<div class="invitemvalue">0</div>
<div class="invitemtxtholder">Platnium</div>
</div>
Here's some of my css code.. from the Inventory layout
.invitemtxtholder {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
background-color: #543C25;
border: 1px solid #000;
color: #FFF;
width: 60px;
text-align: center;
float: left;
clear: left;
}
.invitemvalue {
clear: right;
float: right;
font-style: italic;
color: #000;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
width: 65px;
}
NOTE: I'm not allowed to post pictures apparently lol so heres the link
http://www.ultimate-miner.com/UM2/Client.php
I can see a difference.
The Submit button jumps down in firefox but stays inline in chrome.
Add some width with css to the submit button and that will be fixed :)