Develop Reference

Javascript change url onclick

I want to modify a url according to the click on the switch button (input checkbox).
I can not change the url on click as for the price. I would like that at the second click, the url (of the button) will return this initial value (url1).
The price is correct ... On click, change is good, but url is not good :/
Thank's for your help
function show() {
var x = document.getElementById("price");
if (x.innerHTML === "59€") {
x.innerHTML = "89€";
} else {
x.innerHTML = "59€";
}
var x = document.getElementById("url1").href;
if (x.href === "url1") {
document.getElementById("url1").href = "url2";
} else {
document.getElementById("url1").href = "url";
}
}
body{font-family:arial, 'sans serif';}
.btn{
background:#000;
padding:10px;
color:#fff;
text-decoration:none;
font-family:arial, 'sans serif';
margin:0 auto;
width:150px;
display:block;
text-align:center;
border-radius:10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3{
text-align:center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->

There are 2 problems. First, here:
var x = document.getElementById("url1").href;
if (x.href === "url1") {
You put the href into the x variable, but then you try to examine the x variable's href - but strings don't have a href property. Just examine the x itself instead.
Secondly, the .href property will return the full path of the link. For example, in the Stack Snippet, it returns https://stacksnippets.net/url1. Use getAttribute instead:
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url1' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->

You already set the url to variable "x". So the if-condition has to be directly on the string and not the element:
//[...]
var x = document.getElementById("url1").href;
if (x === "url1") {
document.getElementById("url1").href = "url2";
}
//[...]

Perfect ! Thank you
Just ! : 'url' ? 'url2' : 'url'; VS 'url1' ? 'url2' : 'url'; :)
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->

How to create a switch / checkbox to turn on or off a chrome extension?

I am creating a chrome extension that has a content script that changes the style of dom text elements that it finds with regex.
I want the popup of the extension to have switches that save state after closing.
For example - a turn on and off switches for the extension in the popup menu.
From what I've read online, I have to use chrome.storage to save the state of the checkboxes but I don't quite get how to read the state of the checkbox in the popup.js and how to store it.
HTML
<input class = "power-switch" type="checkbox" id="toggle"/>
<div class="toggle-wrap">
<div style= "text-align: right;width: 190px;font-weight: bolder;">ON / OFF</div>
<label class= "toggle-label"for="toggle"></label>
</div>
CSS
*,
*::before,
*::after {
transition: 400ms all ease-in-out 50ms;
box-sizing: border-box;
backface-visibility: hidden;
}
input[type="checkbox"] {
display: none;
}
a{ color: rgba(43,43,43,1); text-decoration: none; padding: 10px; border-bottom: 2px solid rgba(43,43,43,1); }
a:hover{ background: rgba(43,43,43,1); color: rgba(255,255,255,1); }
/*Button is :CHECKED*/
input[type="checkbox"]:checked ~ div {
background: rgba(73,168,68,1);
box-shadow: 0 0 2px rgba(73,168,68,1);
}
input[type="checkbox"]:checked ~ div label {
left: 27px;
/* 110px */
transform: rotate(360deg);
}
/*shared*/
.toggle-wrap,
.toggle-label {
border-radius: 50px;
}
/*'un':checked state*/
.toggle-wrap {
height: 26px;
width: 50px;
background: rgba(43, 43, 43, 1);
position: relative;
/* top: calc(50vh - 50px);
left: calc(50vw - 100px); */
box-shadow: 0 0 2px rgba(43,43,43,1);
}
.toggle-label {
height: 20px;
/* 80 */
width: 20px;
/* 80 */
background: rgba(255, 255, 255, 1);
position: absolute;
top: 3px;
/* 10 */
left: 3px;
/* 10 */
cursor: pointer;
}
.toggle-label::before {
content: '';
height: 16px;
/* 60 */
width: 4px;
position: absolute;
top: calc(50% - 8px);
/* - 30 px*/
left: calc(50% - 2px);
/*- 2.5px */
transform: rotate(45deg);
}
.toggle-label::after {
content: '';
height: 4px;
width: 16px;
/* 60 */
position: absolute;
top: calc(50% - 2px);
/*- 2.5px */
left: calc(50% - 8px);
/* - 30 px*/
transform: rotate(45deg);
}
.toggle-label::before,
.toggle-label::after{
background: rgba(43,43,43,1);
border-radius: 5px;
}
/* pesduo class on toggle */
input[type="checkbox"]:checked ~ .toggle-wrap .toggle-label::before{
height: 14px;
/* 50px */
top: calc(55% - 7px);
/* 25px */
left: calc(60% - 2.5px);
background: rgba(73,168,68,1);
}
input[type="checkbox"]:checked ~ .toggle-wrap .toggle-label::after{
width: 7px;
/* 20px */
top: calc(95% - 9px);
/* -25px */
left: calc(22.5% - 2px);
/* 2.5px */
background: rgba(73,168,68,1);
}
I'm not quite sure if the CSS is needed for the the example.

You need to check the checked property of the element.
const checkbox = document.getElementById("checkbox"),
text = document.getElementById("text");
checkbox.onchange = function() {
//this is referring to checkbox
text.innerHTML = this.checked;
};
<input type="checkbox" id="checkbox" />
<p id="text">false</p>
For storing the values, here is an example from google:
//setting data
chrome.storage.sync.set({key: value}, function() {
console.log('Value is set to ' + value);
});
//getting data
chrome.storage.sync.get(['key'], function(result) {
console.log('Value currently is ' + result.key);
});

Also, you can be done like this and store theme in local storage
<div class="switchtodark ">
<span>SWITCH TO DARK</span>
</div>
function change() {
const darkMode = document.getElementById("dark");
darkMode.addEventListener('click', () => {
document.body.classList.toggle('dark');
localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
});
};
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark');
}
Css
.maintext h1 {
font-size: 120px;
z-index: 1000;
color: #171717;
}
.dark .maintext h1 {
color: white;
}

How to save the textarea value with a save-button?

I need help with some text blocks that have to be able to be saved and loaded again by choice in a dropdown menu. I've tried it with JS but somehow it doesn't go. What to do?
I've tried it with JS but somehow it doesn't go.
var firstTemplate = $('.mail-template').val();
var secondTemplate = $('.mail-template').val();
var thirdTemplate = $('.mail-template').val();
function templateOne(a) {
a = event || window.event;
$('.mail-template').val(firstTemplate);
$('button#template-choice').html("Template 1");
return true;
}
function templateTwo(b) {
b = event || window.event;
$('.mail-template').val(secondTemplate);
$('button#template-choice').html("Template 2");
return true;
}
function templateThree(c) {
c = event || window.event;
$('.mail-template').val(thirdTemplate);
$('button#template-choice').html("Template 3");
return true;
}
function save(s) {
c = event || window.event;
if ($('#template>a:first-child').clicked == true) {
firstTemplate = $('.mail-template').val();
return true;
} else if ($('#template>a:nth-child(2)').clicked == true) {
secondTemplate = $('.mail-template').val();
return true;
} else if ($('#template>a:nth-child(3)').clicked == true) {
thirdTemplate = $('.mail-template').val();
return true;
}
}
.bg-text h1 {
margin-top: 20px;
font-size: 30px;
}
a.invisible-link {
color: unset;
text-decoration: none;
padding: 0 3px;
}
a.invisible-link:hover {
color: #788bb6;
}
p.sprachen a.invisible-link:hover {
color: #fcaf17;
}
.spalte {
display: inline-block;
}
span.current-language {
color: #fcaf17;
padding: 0 3px;
}
p.sprachen {
font-family: "univers_47", Arial, sans-serif;
font-size: 20px;
}
button.send-quote {
text-decoration: underline;
}
input {
font-family: "univers_47", Arial, sans-serif;
font-size: 14px !important;
}
input[type="file"] {
visibility: hidden;
width: 100px;
transform: translateY(-20px);
}
label.upload-button {
/* background: #788bb6;
color: #fff;*/
padding-top: 18px;
border-radius: 3px;
position: relative;
transition: 300ms;
display: inline-block;
}
img[src*="upload.png"]:hover {
cursor: pointer;
transform: translateY(-5px);
transition: 300ms;
}
img[src*="upload.png"]:not(:hover) {
transition: 300ms;
}
img[src*="enter.png"]:hover {
transform: translateX(5px);
transition: 300ms;
}
img[src*="enter.png"]:not(:hover) {
transition: 300ms;
}
img[src*="download.png"]:hover {
cursor: pointer;
transform: translateY(5px);
transition: 300ms;
}
img[src*="download.png"]:not(:hover) {
transition: 300ms;
}
.download:disabled img {
opacity: 0.7;
}
div.quote-form-content p {
margin-bottom: 10px;
}
.form textarea.mail-template {
height: 150px;
width: 600px;
border-color: #2c3459;
border-radius: 3px;
font-family: "Courier New", serif;
}
/* Dropdown Button */
.dropbtn {
background-color: #788bb6;
color: white;
padding: 10px 15px;
font-size: 13px;
cursor: pointer;
border: none;
border-radius: 3px;
}
/* Dropdown button on hover & focus
.dropbtn:hover, .dropbtn:focus {
background-color: #2C3459;
} */
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000;
padding: 10px 15px;
text-decoration: none;
display: block;
font-size: 13px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #788bb6;
color: #fff;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
label.checkbox {
font-size: 13px;
border: none;
}
div.checkboxes {
margin-top: 15px;
display: none;
}
h4#kriterium {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Ihr Mail-Template</h2>
<h4>Wählen Sie zunächst Ihre gewünschtes Template aus:</h4>
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn" id="template-choice">Ihr gewünschtes Template</button>
<div id="Template" class="dropdown-content">
Template 1
Template 2
Template 3
</div>
</div>
<h4>Hier können Sie Ihr Mail-Template konfigurieren.</h4>
<div class="form">
<textarea name="Mail-Template" class="quote-form-element quote-form-client-email last mail-template" cols="90" rows="20"></textarea>
<button class="button button-navy-blue send-quote" type="button" onclick="save()">Speichern <i class="fa fa-save"></i></button>
The entered text is not loaded the next time and obviously it's not saved. So what is wrong?

What i understand is that your text area is not saving. In your save function you are not getting the text area data because of the if you implement. I have commented that code and its getting data and updating the fields. I hope this will work for you.
var firstTemplate = $('.mail-template').val();
var secondTemplate = $('.mail-template').val();
var thirdTemplate = $('.mail-template').val();
function templateOne(a) {
a = event || window.event;
$('.mail-template').val(firstTemplate);
$('button#template-choice').html("Template 1");
return true;
}
function templateTwo(b) {
b = event || window.event;
$('.mail-template').val(secondTemplate);
$('button#template-choice').html("Template 2");
return true;
}
function templateThree(c) {
c = event || window.event;
$('.mail-template').val(thirdTemplate);
$('button#template-choice').html("Template 3");
return true;
}
function save(s) {
debugger
c = event || window.event;
//if ($('#template>a:first-child').clicked == true) {
firstTemplate = $('.mail-template').val();
return true;
//} else if ($('#template>a:nth-child(2)').clicked == true) {
//secondTemplate = $('.mail-template').val();
//return true;
//} else if ($('#template>a:nth-child(3)').clicked == true) {
//thirdTemplate = $('.mail-template').val();
//return true;
//}
}
.bg-text h1 {
margin-top: 20px;
font-size: 30px;
}
a.invisible-link {
color: unset;
text-decoration: none;
padding: 0 3px;
}
a.invisible-link:hover {
color: #788bb6;
}
p.sprachen a.invisible-link:hover {
color: #fcaf17;
}
.spalte {
display: inline-block;
}
span.current-language {
color: #fcaf17;
padding: 0 3px;
}
p.sprachen {
font-family: "univers_47", Arial, sans-serif;
font-size: 20px;
}
button.send-quote {
text-decoration: underline;
}
input {
font-family: "univers_47", Arial, sans-serif;
font-size: 14px !important;
}
input[type="file"] {
visibility: hidden;
width: 100px;
transform: translateY(-20px);
}
label.upload-button {
/* background: #788bb6;
color: #fff;*/
padding-top: 18px;
border-radius: 3px;
position: relative;
transition: 300ms;
display: inline-block;
}
img[src*="upload.png"]:hover {
cursor: pointer;
transform: translateY(-5px);
transition: 300ms;
}
img[src*="upload.png"]:not(:hover) {
transition: 300ms;
}
img[src*="enter.png"]:hover {
transform: translateX(5px);
transition: 300ms;
}
img[src*="enter.png"]:not(:hover) {
transition: 300ms;
}
img[src*="download.png"]:hover {
cursor: pointer;
transform: translateY(5px);
transition: 300ms;
}
img[src*="download.png"]:not(:hover) {
transition: 300ms;
}
.download:disabled img {
opacity: 0.7;
}
div.quote-form-content p {
margin-bottom: 10px;
}
.form textarea.mail-template {
height: 150px;
width: 600px;
border-color: #2c3459;
border-radius: 3px;
font-family: "Courier New", serif;
}
/* Dropdown Button */
.dropbtn {
background-color: #788bb6;
color: white;
padding: 10px 15px;
font-size: 13px;
cursor: pointer;
border: none;
border-radius: 3px;
}
/* Dropdown button on hover & focus
.dropbtn:hover, .dropbtn:focus {
background-color: #2C3459;
} */
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000;
padding: 10px 15px;
text-decoration: none;
display: block;
font-size: 13px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #788bb6;
color: #fff;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
label.checkbox {
font-size: 13px;
border: none;
}
div.checkboxes {
margin-top: 15px;
display: none;
}
h4#kriterium {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Ihr Mail-Template</h2>
<h4>Wählen Sie zunächst Ihre gewünschtes Template aus:</h4>
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn" id="template-choice">Ihr gewünschtes Template</button>
<div id="Template" class="dropdown-content">
Template 1
Template 2
Template 3
</div>
</div>
<h4>Hier können Sie Ihr Mail-Template konfigurieren.</h4>
<div class="form">
<textarea name="Mail-Template" class="quote-form-element quote-form-client-email last mail-template" cols="90" rows="20"></textarea>
<button class="button button-navy-blue send-quote" type="button" onclick="save()">Speichern <i class="fa fa-save"></i></button>

How to get my PHP output back to a page via Ajax?

I'm trying to get a response back from a php script, so I dont have to reload the page and display some animations.
I have both parts working, but when I try to put them together, nothing works.
Right now I send the input data via Ajax, but I can't bring the results back.
Please help me, thanks in advance.
HTML
<head>
<title>
Consultapp :: Consultar
</title>
<?php include_once('head-attrib.php'); ?>
</head>
<body>
<div class="content">
<section>
<img src="source/img/logo.png" class="logo logo-small logo-search">
<p class="copy">Para consultar, ingresa un numero de cedula.</p>
<div class="card card-searchcard animated" >
<form id="searchBar" method="get">
<input type="search" class="field" name="searchBox" id="searchBox" placeholder="Ingresa una identificacion aqui" min="11111111" max="9999999999">
<button class="btn btn-main btn-bar right"><span class="text">CONSULTAR</span><i class="material-icons md-36 md-light">search</i></button>
</form>
</div>
<br>
<?php print($message) ?>
<div style="margin-bottom:85px"> <!-- Prevents cropped results -->
<?php print($info) ?>
<div class="scroller-box">
<!-- Search Trasition-->
<script type="text/javascript">
$(function() {
var box = $('.card-searchcard');
var logo = $('.logo-search');
var copy = $('.copy');
var button = $('#searchBar button');
button.one('click', function(){
box.toggleClass('active');
logo.toggleClass('active');
copy.toggleClass('active');
var dataString = document.getElementById("searchBox").value; // Post data to send
console.log("Data Collected Susccessfully");
return false;
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function() {
alert("Hi gorgeous!");
}
});
});
});
</script>
</div>
</div>
</div>
<?php include_once('navbar.php'); ?>
</section>
</div>
</body>
PHP
<?php
include_once("scripts/global.php");
// Collecting input variables
$entry = '';
$message = '';
$search = $_POST['searchBox'];
if(isset($search)) {
// Validation
if (empty($search)) {
$message = "Necesito un numero para consultar"; //Empty field message
}
else{ //MySQL DB search query
$searchquery = mysql_query("SELECT * FROM submissions WHERE id='$search'") or die("Could not check ID, I'm search");
$count = mysql_num_rows($searchquery);
if ($count == 0) {
$no_results = array( //Funny Error Messages goes here
'<span>Ups</span><br>Esta persona aun no ha sido calificada<br>Puedes añadir una calificacion si lo deseas',
'<span>Hay Caramba</span><br>nadie sabe acerca de esta persona<br> Tu sabes? Genial, añade una calificacion.',
);
$message = $no_results[array_rand($no_results)];
}
else{
while ($row = mysql_fetch_array($searchquery)) {
$name = $row['name'];
$id = $row['id'];
$amount = $row['amount'];
$submitter = $row['submitter'];
$rating = $row['rating'];
//Thumbs up or thumbs down icon
if ($rating == 'good') {
$ratingIcon = '<i class="material-icons">thumb_up</i>';
}
else{
$ratingIcon= '<i class="material-icons">thumb_down</i>';
}
$entry .= ( //Display individual entries (Can repeat)
"<div class='entry animated slideInEntry'>
<div>
<span>$submitter</span>
<span>$amount</span>
</div>
<div>$ratingIcon</div>
</div>
");
}
$info .=( //Display Person data (Not reapeat)
"<div class='card card-infocard animated slideInEntry'>
<label for='id'>CEDULA</label>
<span name='id'>$id</span>
<span name='name'>$name</span>
<button class='btn btn-fab btn-main'></span><i class='material-icons md-36 md-light'>add_circle_outline</i></button>
</div>
");
}
}
}
?>
The CSS in case you want it
/* Reset CSS & Global Attributes */
*{
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
padding: 0;
border: 0;
}
/*Hiiden Scrollbar*/
::-webkit-scrollbar{
display: none;
}
a{
text-decoration: none;
color: inherit;
}
button, input{
margin: 0;
border: none;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark{
color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive{
color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
.material-icons.md-light{
color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive{
color: rgba(255, 255, 255, 0.3);
}
.left{
float: left;
}
.right{
float: right;
}
/*Small Devices*/
#media all and (max-width: 699px){
/* Rules for sizing the icon. */
.material-icons.md-18{
font-size: 18px;
}
.material-icons.md-24{
font-size: 24px;
}
.material-icons.md-36{
font-size: 36px;
}
.material-icons.md-48{
font-size: 48px;
}
/* Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes */
.logo-big{
width: 102px;
margin: 70px auto;
}
.logo-small{
width: 66px;
}
.logo-search{
margin: 55px 0 30px ;
}
/* Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes */
.btn{
color: #FFFFFF;
font-weight: 600;
font-size: 15px;
}
.btn-main{
background-color: #80CCFF;
}
.btn-secondary{
background-color: #4C4C4C;
}
.btn-card{
border-radius: 0 0 3px 3px;
width: 100%;
height: 60px;
line-height: 60px;
}
.btn-fab{
width: 60px;
height: 60px;
border-radius: 100%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.12);
line-height: 10px;
}
.card-infocard > .btn-fab{
position: absolute;
bottom: 0;
right: 0;
z-index: 9999;
margin: 0 20px -20px 0;
}
.btn-bar{
height: 55.5px;
width: 56px;
border-radius: 0 3px 3px 0;
}
.btn-bar > .text{
display: none;
}
/* Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes */
.card{
background-color: #FFFFFF;
color: #4C4C4C;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.12);
text-align: left;
border-radius: 3px;
}
.card-small{
max-width: 350px;
margin: 0 auto;
}
.card-searchcard{
width: 315px;
height: 56px;
margin: 35px auto 20px;
padding: 0 0 0 20px !important;
}
.card-infocard{
max-width: 315px;
padding: 23px 5%;
margin: 0 auto 35px;
}
.card-infocard > label{
display: inline;
}
.card-infocard > span:nth-child(3){
font-size: 16px;
font-weight: bolder;
display: block;
margin: 12px 0 0;
}
.entry{
background-color: rgba(0,0,0,0.3);
max-width: 300px;
padding: 10px 0;
margin: 20px auto;
border-radius: 5px;
}
.entry > div{
display: inline-block;
}
.entry > div:nth-child(1){
margin: 0 55px 0 20px;
}
.entry > div:nth-child(2){
margin: 0 20px 0 55px;
}
.entry > div > span{
display: block;
margin: 5px 0;
text-align: left;
}
.entry > div > span:nth-child(1){
font-weight: bolder;
font-size: 16px;
}
.entry > div > i{
vertical-align: baseline;
font-size: 30px;
}
/* Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes */
label{
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #393950;
display: block;
}
/* No blue outline on inputs */
textarea, input{
outline: none;
}
input[type=mail], input[type=password]{
padding: 15px 0 10px 0;
margin-bottom: 30px;
font-size: 14px;
color: #4C4C4C;
font-family: 'Raleway';
width: 100%;
font-weight: 600;
border: solid rgba(0,0,0,0.18);
border-width: 0 0 2px 0;
display: block;
}
input[type=search]{
height: 56px;
width: 70%;
font-size: 14px;
}
/* Placeholder Styling */
::-webkit-input-placeholder{
color: #808080;
font-family: 'Raleway';
}
:-moz-placeholder{
/* Firefox 18- */
color: #808080;
font-family: 'Raleway';
}
::-moz-placeholder{
/* Firefox 19+ */
color: #808080;
font-family: 'Raleway';
}
:-ms-input-placeholder{
color: #808080;
font-family: 'Raleway';
}
/* No arrows on number input*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
/*No color autofill*/
input:-webkit-autofill{
background-color: rgba(255,255,255,1); !important;
background-color: #FFFFFF !important;
}
/* Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes */
body{
font-size: 14px;
background-color: #0C77F8;
text-align: center;
font-size: 14px;
color: #FFFFFF;
}
.remora{
margin: 25px 0;
font-size: 12px;
color: #FFFFFF;
font-weight: 400;
}
.navbar{
width: 100%;
font-size: 12px;
color: #FFFFFF;
background-color: #0C77F8;
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
}
.navbar-icon{
margin: 15px 50px;
display: inline-table;
}
.navbar-icon > i{
margin-bottom: 5px;
}
.wrapper{
padding: 45px 12% 0;
}
span.link > a{
border-bottom: solid 2px #80CCFF;
font-weight: 600;
}
.scroller-box{
}
/* End of small devices styling - End of small devices styling - End of small devices styling - End of small devices styling - End of small devices styling*/
}
And the animation code, again, in case you want it.
.animated{
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/* Searchbar Animation -Searchbar Animation -Searchbar Animation -Searchbar Animation -Searchbar Animation */
.logo-search.active{
-webkit-animation-name: logoSearchActive;
animation-name: logoSearchActive;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
}
.copy.active{
opacity: 0;
transition: 0.5s ease-in;
}
.card-searchcard.active{
-webkit-animation-name: searchcardActive;
animation-name: searchcardActive;
z-index: 9999;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
transition: 0.8s ease-in;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#-webkit-keyframes searchcardActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
60%{
width: 315px;
}
100%{
-webkit-transform: translateY(-221px);
transform: translateY(-221px);
border-radius: 0px;
width: 100vw;
}
}
#keyframes searchcardActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
60%{
width: 315px;
}
100%{
-webkit-transform: translateY(-221px);
transform: translateY(-221px);
border-radius: 0px;
width: 100vw;
}
}
#-webkit-keyframes logoSearchActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
visibility: hidden;
}
}
#keyframes logoSearchActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
visibility: hidden;
}
}

I think that all you need is to fix the PHP script and fix the response from your Ajax call.
First of all, you PHP need and 'echo' statement to print some output. The output will be passed to the response from the ajax call, than JS have some material to work on.
An example:
<?php echo $info; ?>
After fix the php, try to edit this JS part:
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function(data) {
console.log(data);
}
});
If you PHP script return to you an HTML markup or print HTML, you can use the .append() or .prepend() functions from jQuery to append the data on the body like:
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function(data) {
$('body').append(data);
}
});
To show some CSS animation, I think you need to use .addClass() to the element you want to animate.

Problem is your the post data that you are sending. Change
var dataString = document.getElementById("searchBox").value;
To
var dataString = $("#searchbar").serialize();
Your search.php is expecting a value in $_POST['searchBox']
if(isset($search)){...
but never finds it so its skips that whole process of the search

Got double "onmouseover" Javascript

first can you look on those two image so you understand.
When not hover: http://s15.postimg.org/sn6rk45rf/not_Hover.png
When hover: http://s16.postimg.org/yk6beg1ad/on_Hover.png
Right now when I have my mouse over a image, both image get buttons.
But I just want each image have theve own buttons on mouse over and the other image hide the buttons.
I don't really know how to fix it, and I'm very beginner with Javascript.
Here is my HTML/CSS/Javascript codes.
var buttonNew = document.getElementsByClassName('buttonNewest');
var buttonRan = document.getElementsByClassName('buttonRandom');
function imageOver() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "block";
buttonNew[i].style.animation = "moveButtonsRight 2s";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "block";
buttonRan[i].style.animation = "moveButtonsLeft 2s";
}
}
function imageLeave() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "none";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "none";
}
}
.charSelect[role="Background"] {
width: 1600px;
min-height: 600px;
margin: 25px auto;
}
.charSelect[role="Background"] > h1 {
width: 300px;
margin: 0 auto;
border: dashed 2px rgba(255, 207, 0, 0.75);
text-align: center;
text-transform: uppercase;
font-size: 2.6em;
text-shadow: 2px 2px 3px rgb(0, 0, 0);
}
.charSelect[role="Characters"] {
position: relative;
display: inline-block;
width: 250px;
height: auto;
background: rgba(42, 42, 42, 0.7);
border: dashed 2px rgba(255, 207, 0, 0.4);
color: rgba(255, 207, 0, 1);
opacity: 0.6;
-webkit-transition: opacity 1s;
margin-left: 250px;
}
.charSelect[role="Characters"]:hover {
opacity: 1;
transform: scale(1.05);
}
.charSelect[role="Names"] {
width: 100%;
font-size: 1.8em;
}
.charSelect[role="Names"] > p {
margin: 0 !important;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
/* Buttons */
.charSelect[role="LatestVid"], .charSelect[role="RandomVid"] {
width: 170px;
height: 45px;
background: -webkit-linear-gradient(top, rgb(255, 207, 0), rgba(255, 207, 0, 0));
text-align: center;
line-height: 45px;
color: black;
-webkit-transition: background 1s;
transition: background 1s;
box-shadow: 0px 0px 3px;
}
.charSelect[role="LatestVid"] {
display: none;
position: absolute;
top:50%;
right: 70%;
}
.charSelect[role="RandomVid"] {
display: none;
position: absolute;
top:50%;
left: 70%;
}
.charSelect[role="RandomVid"]:hover , .charSelect[role="LatestVid"]:hover {
background: rgb(255, 207, 0);
}
/* Animation */
#-webkit-keyframes moveButtonsLeft {
0% {
left: 50%;
}
100% {
left: 70%;
}
}
#-webkit-keyframes moveButtonsRight {
0% {
right: 50%;
}
100% {
right: 70%;
}
}
<!-- Character one -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
<!-- Character two -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>

You're calling an imageOver() that loops all your elements.
Instead of using JS (at all) I'd go with pure CSS:
*{font: 14px/1 sans-serif;}
.charSelect{
position: relative;
display: inline-block;
vertical-align: top;
}
.charButtons{
position: absolute;
bottom: 40px;
width: 100%;
text-align:center;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
}
.charButtons a{
display: block;
margin-top: 1px;
text-align: center;
color: #fff;
background: #444;
padding: 10px;
opacity: 0.9;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.charButtons a:hover{ opacity:1; }
.charSelect:hover .charButtons{
visibility: visible;
opacity: 1;
}
<div class="charSelect">
<img src="http://placehold.it/180x150/4af/&text=Hero+1">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 1</h2>
</div>
<div class="charSelect">
<img src="http://placehold.it/180x150/fa4/&text=Hero+2">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 2</h2>
</div>

The problem is that you're not reffering tot the current object that you have cursor on. If you go with with cursor over and image, your function will apply those changes for all buttonNew and buttonRan that can be found on page.