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
Related
I'm working on a custom PHP, modal login form. When I click the Login button, I receive the 404 resource not found, being my PHP file that handles the authentication.
The two files are here:
action_page.php
<?php
session_start();
$name = 'user1';
$pwd = 'home';
if(isset($_POST['submit'])){
// get vars
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $name and $password == $pwd){
redirect('http://www.mden.com');
} else {
redirect('http://www.youtube.com');
}
} else {
redirect('login.html');
}
?>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
background-color: rgb(0,0,0,0.4);
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5px auto;
border: 1px solid #888;
width: 20%;
}
/* The Close Button */
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: white;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
</style>
</head>
<body>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" method="post" action="/action_page.php">
<!-- No Avatar!!! -->
<!-- Login Info -->
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required><br /><br />
<label><b>Password</b></label>
<input type="text" placeholder="Enter Password" name="psw" required><br /><br />
<button name="do_login" type="submit">Login</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
The file path used in your form's action is correct?
Try remove the "/" from action="/action_page.php" if action_page.php stay on same directory.
Hi im working on a page wich allows my viewers on twitch to donate for my stream...
When a user clicks on paypal he gets redirected to paypal and if he clicks on visa it opens the popup
The problem i have now is that the donation ammount alway has the same opacity as the popup....
Popup screenshot
Did someone knows what the problem could be?
My index.php:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- META -->
<meta name="description" content="RyuZockt.at StreamDonations" />
<meta name="keywords" content="stream, livestream, ryuzockt, donation, spende, support" />
<meta name="author" content="RyuZockt">
<meta name="revisit-after" content="3 days" />
<title> RyuZockt.at Donations</title>
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Comfortaa:400,700" rel="stylesheet" type="text/css">
<!-- STYLE -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<!-- Font Awesome 4.1.0 -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Theme -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/popup.css" rel="stylesheet">
<!-- /STYLE -->
</head>
<body oncontextmenu="return false;" style="background-image: url(assets/img/bg.jpg);">
<!-- Modal PopUp-->
<div id="myModal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<span class="close"><i class="fa fa-times" aria-hidden="true"></i></span>
<p><strong>Diese Zahlungsmethode ist momentan noch nicht verfügbar <img src="assets/img/sad.png"></strong></p>
</div>
</div>
<div class="col-md-12">
<div class="container-md">
<div class="panel cart panel-default">
<div class="panel-heading text-center">
<img class="avatar" src="assets/img/ryu.jpg">
<h1>RyuZockt</h1>
</div>
<div class="panel-body cart-form">
<form method="post" enctype="multipart/form-data" action="startDonation.php">
<!-- Name und Betrag -->
<div class="row">
<!-- Name -->
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control" placeholder="Benutzername">
</div>
</div>
<!-- Betrag -->
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<input type="text" name="betrag" required="required" class="form-control" placeholder="Betrag (frei wählbar)" value="5">
<span class="input-group-addon" id="basic-addon2"><i class="fa fa-eur fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<!-- /Name und Betrag -->
<!-- Nachricht -->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="8" maxlength="50" type="text" name="msg" class="form-control" placeholder="Nachricht an RyuZockt (max. 50 Zeichen)"></textarea>
</div>
</div>
</div>
<!-- /Nachricht -->
<!-- Spacer -->
<div class="labelled-separator">
<div class="label-wrapper">
<label class="required"> Donaten mit</label>
</div>
</div>
<!-- /Spacer -->
<!-- Pay Buttons -->
<div class="row small-gap">
<!-- PayPal -->
<div class="col-md-6 col-xs-6 payment-mean payment-paypal">
<div class="form-group">
<button type="submit" style="width: 100%;" name="paypal" required="required" class="btn btn-default btn-bump btn-paypal" value="PAYPAL">PayPal</button>
</div>
</div>
<!-- /PayPal -->
<!-- Sofort -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="sofort" type="button" style="width: 100%;" name="mangopay-sofort" required="required" class="btn btn-default btn-bump btn-mangopay-sofort" value="MANGOPAY_SOFORT">MangoPay-Sofort</button>
</div>
</div>
<!-- /Sofort -->
<!-- Paysafe Card -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="psc" type="button" style="width: 100%;" name="mangopay-psc" required="required" class="btn btn-default btn-bump btn-mangopay-psc" value="MANGOPAY_PSC">MangoPay-PSC</button>
</div>
</div>
<!-- /Paysafe Card -->
<!-- Visa-Mastercard -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="visa" type="button" style="width: 100%;" name="mangopay-visa" required="required" class="btn btn-default btn-bump btn-mangopay-visa" value="MANGOPAY_VISA_MASTERCARD">MangoPay-Visa-Mastercard</button>
</div>
</div>
<!-- /Visa-Mastercard -->
</div>
<!-- /Pay Buttons -->
</form>
</div>
</div>
</div>
</div>
<!-- Scripte -->
<script src="assets/js/modal-popup.js"></script>
</body>
</html>
My style.css:
html, body{
min-height: 100%;
font-family: 'Comfortaa', 'sans-serif';
letter-spacing: -0.5px;
width: 100%;
}
h1{
font-family: 'Comfortaa', 'sans-serif';
letter-spacing: -0.5px;
font-size: 2.6rem;
word-break: break-word;
}
.div{
display: block;
}
.img{
vertical-align: middle;
}
.h1{
font-size: 2.6rem;
margin-top: 0;
margin-bottom: 20px;
}
.form{
display: block;
margin-top: 0em;
}
.form-group{
margin-bottom: 15px;
}
.textarea{
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 6px 12px 6px 12px;
resize: none;
overflow: hidden;
border-bottom: 0;
}
.input-group{
position: relative;
display: table;
border-collapse: separate;
font-family:
}
.input-group-addon{
border-radius: 0;
background-color: #f9f9f9;
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
color: #555555;
text-align: center;
border: 1px solid #ccc;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
box-sizing: border-box;
}
.cart-body .form-control{
font-size: 1.8rem;
line-height: 3rem;
min-height: 45px;
}
.form-control{
display: block;
width: 100%;
padding: 6px 12px;
color: #555555;
background-color: #FFF;
border: 1px solid #ccc;
border-radius: 2px;
height: 40px;
border-width: 1px;
}
textarea {
resize: none;
}
.row{
margin-left: -15px;
margin-right: -15px;
}
.cart{
position: relative;
margin-top: 100px;
border: none;
box-shadow: none;
}
.panel{
margin-bottom: 20px;
background-color: #FFF;
border: 1px solid transparent;
border-radius: 2px;
}
.cart .avatar{
margin-top: -60px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #FFF;
}
.cart-body .panel-body{
padding: 20px;
background-color: #FFF;
box-sizing: border-box;
}
.col-md-12{
width: 100%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.container-md{
width: auto;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
max-width: 500px;
}
.labelled-separator{
border-top: 1px solid #ccc;
margin-bottom: 20px;
margin-top: 40px;
position: relative;
}
.labelled-separator .label-wrapper{
position: absolute;
top: -13px;
width: 100%;
text-align: center;
}
.cart-body .labelled-separator label{
background-color: #f4f4f4;
}
.labelled-separator label{
display: inline-block;
padding: 0 10px;
background: #fff;
}
label{
font-size: 10px;
font-family: sans-serif;
color: #777788;
text-transform: uppercase;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.row.small-gap{
margin-left: -3px;
margin-right: -3px;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.btn-bump{
line-height: 3rem;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
border-width: 2px;
}
.btn-paypal{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/paypal.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-sofort{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-sofort.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-psc{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-psc.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-visa{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-visa.png) no-repeat 50% 50%;
background-size: auto 60%;
}
and at least
my popup style.css
/* Modal PopUp */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 45%;
text-align: center;
}
/* The Close Button */
.close {
float: right;
font-size: 20px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
It looks like the z-index of the input is greater than the z-index of the modal. I removed this line from the code and the donation amount has the same opacity as the background...
change this styling:
.input-group .form-control{
z-index: 2;
}
to this:
.input-group .form-control{
z-index: 0;
}
As mentioned by the other answer the problem is due to the z-index. I would not recommend you changing or generally overwriting the bootstrap code as long as you are not 100% secure in what you do. Better just increase the z-index of your modal like this.
.modal {
/* your other properties */
z-index: 10; /* Sit on top */
}
My blade view shows a empty page, but if I press CTRL + U to show the source code, then I get this:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://localhost/portal_testing/public/css/style.css'/>
<script src='http://localhost/portal_testing/public/js/main.js'/>
</head>
<body>
<div>
<div class='infoBox'>
<h4 class='infoBoxTitle'>Log:</h4>
<div class='infoBoxContent'>
<p>test</p>
</div>
</div>
<div class='errorBox'>
<h4 class='errorBoxTitle'>Error Log:</h4>
<div class='errorBoxContent'>
<p>test</p>
</div>
</div>
</div>
</body>
</html>
Why is it not rendering even though there is valid code?
UPDATE:
Javascript:
//Accordion:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
CSS
.infoBox {
font-family: arial;
padding:2px;
background-color: #DADADA;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.infoBoxTitle {
padding:4px;
font-size: 13px;
color: red;
margin: 1px;
text-decoration: underline;
}
.infoBoxContent {
font-size: 10px;
padding-left:5px;
margin-left:10px;
border: 1px solid gray;
}
.errorBox {
font-family: arial;
padding:2px;
background-color: #838383;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.errorBoxTitle {
padding:4px;
font-family: calibry;
font-size: 13px;
color: white;
margin: 1px;
text-decoration: underline;
}
.errorBoxContent {
color: white;
font-size: 11px;
padding-left:5px;
margin-left:10px;
border: 4px solid white;
}
I found the problem...
I noticed that all the content was rendered inside of the script tag:
The reason is, becaues the script element was missing it's closing tag.
Fix:
<script type="text/javascript" src='{{ URL::asset("js/main.js") }}'></script>
This is what I have so far - JSFiddle
I want to submit the data from the form to the database and was wondering if there is any way with the code I have to submit the selected color of the note depending on the color the user has chosen.
I know how to use $_POST['x']; and all but to get the data from the clicked color div I am unsure of. Any help would be amazing!
$(document).ready(function() {
/* Listening for keyup events on fields of the "Add a note" form: */
$('.pr-body,.pr-author').on('keyup', function(e) {
if (!this.preview)
this.preview = $('.previewNote');
/* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
this.preview.find($(this).attr('class').replace('pr-', '.')).html($(this).val().replace(/<[^>]+>/ig, ''));
});
/* Changing the color of the preview note: */
$('.color').on('click', function() {
$('.previewNote').removeClass('yellow blue pink').addClass($(this).attr('class').replace('color', ''));
});
});
.note-wrapper {
position: relative;
height: 150px;
width: 150px;
float: left;
margin: 5px;
}
.note {
height: 150px;
padding: 5px;
width: 150px;
overflow: hidden;
font-family: Trebuchet MS, Tahoma, Myriad Pro, Arial, Verdana, sans-serif;
font-size: 18px;
-moz-box-shadow: 2px 2px 0 #333;
-webkit-box-shadow: 2px 2px 0 #333;
box-shadow: 2px 2px 0 #333;
}
.pink {
background-color: #ff99ff;
border: 1px solid #e589e5;
}
.yellow {
background-color: #FDFB8C;
border: 1px solid #DEDC65;
}
.blue {
background-color: #A6E3FC;
border: 1px solid #75C5E7;
}
.author {
bottom: 5px;
color: #666666;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
position: absolute;
right: 8px;
}
.note-form label {
display: block;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 3px;
}
.note-form textarea,
.note-form input[type=text] {
background-color: #FCFCFC;
border: 1px solid #AAAAAA;
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
height: 60px;
padding: 5px;
width: 300px;
margin-bottom: 10px;
}
.note-form input[type=text] {
height: auto;
}
.color {
/* The color swatches in the form: */
cursor: pointer;
float: left;
height: 10px;
margin: 0 5px 0 0;
width: 10px;
}
#note-submit {
margin: 20px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="note-wrapper">
<div id="previewNote" class="previewNote note yellow" style="left:0;top:65px;z-index:1">
<div class="body"></div>
<div class="author"></div>
<span class="data"></span>
</div>
</div>
<form action="post.php" method="post" id="note-form" class="note-form">
<label for="note-body">Text of the note</label>
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea>
<label for="note-name">Your name</label>
<input type="text" name="note-name" id="note-name" class="pr-author" value="" />
<label>Color</label>
<!-- Clicking one of the divs changes the color of the preview -->
<div class="color yellow"></div>
<div class="color blue"></div>
<div class="color pink"></div>
<button id="note-submit" class="remodal-confirm">Submit</button>
</form>
Add a hidden input with name say color.
On click of color update the color value (as pointer out in the comment .css will return RGB not Hex) of the color you are chosing as value to the hidden input of the form.
On submit you have your chosen color - on your server side you can access the color value with the name of the input like any other string
Updated fiddle https://jsfiddle.net/5erjuo7o/
Note: add hidden attribute to the
<input name="note-color" hidden type="text"/><!-- to hide from view of the form-->
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">