We Keep Coding

How do you send input from a form in a webpage to a search bar in a different website?

Lets use https://www.wolframalpha.com/ as an example. In the website there is a search bar. I want to pass user input from my websites search bar Search Bar to the search bar in wolframalpha.com. If a user entered "euler" in my form, I would want the string "Euler" to be sent to Wolframalphas search bar and entered.
I want to avoid the solution of appending the parameter to the destination page's URL because it doesn't work in my particular case.
<div>
<style type="text/css">
label {
color: black; font-style: bold; font-size: 20px;
}
form.index-search-form {
position: relative; display: inline-flex;
}
input.search-box {
width: 400px; height: 40px; padding: 2px 0; border-radius: 50px; padding-left: 20px;
}
button[name="submit"] {
position: absolute; top: 0; right: 0; border-radius: 50px; background: #f2f2f2; border: 1px solid #f2f2f2; background: #e21e2d; color: white; cursor: default; font-size: 16px; width: 180px; height: 40px; outline: none;
}
input:focus {
border-color: #4d90fe; outline: none;
}
input.search-box:hover {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); background: #f8f8f8; border: 1px solid #c6c6c6; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); color: #222;
}
</style>
<script type="text/javascript">
function redirect()
{
}
</script>
<div class="container">
<form action="javascript:redirect()" class="index-search-form">
<label>FIND A CHURCH </label>
<input id="search" class="search-box" type="search" maxlength="24" placeholder="Search...">
<button name="submit" type="submit">SEARCH</button>
</form>
</div></div>

JS Function Not Defined Chrome Extension Popup.js

I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>

I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});

How to remove a div in javascript with no jquery?

I'm trying to remove a div when you login (I know it's not secure!). I need it in javascript! I tried everything but it doesn't want to remove. the code is here ---------------------------------------------------------------------------------------> I KNOW IT'S NOT SECURE! For some reason the script doesn't work! tried everything I know in javascript.
var box = document.getElementById("loginbox");
function pasuser(form) {
if (form.email.value=="GG#gmail.com") {
console.log(form.email.value)
if (form.password.value=="123") {
//window.location.assign('/index2.html');
var next = document.createElement("IFRAME");
next.src='https://codepen.io';
next.classList.add("codepen");
document.body.appendChild(next);
//box.classList.remove("box");
//box.style.display = "none";
box.parentNode.removeChild(box);
//box.outerHTML = "";
} else {
alert("Invalid Password");
}
} else { alert("Invalid UserID");
}
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(https://i.ytimg.com/vi/WLs_DST6dTA/maxresdefault.jpg);
background-size: cover;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
padding: 40px;
background: rgba(0,0,0,.8);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
}
.box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.box h2:hover{
letter-spacing: 5px;
}
.box .inputBox {
position: relative;
}
.box .inputBox input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.box .inputBox label {
position: absolute;
top: 0;
left: 0;
letter-spacing: 1px;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label {
top: -24px;
left: 0;
color: #03a9f4;
font-size: 12px;
}
.box .inputBox input:focus,
.box .inputBox input:valid {
top: -26px;
left: 0;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
}
.box .inputBox input:active + .placeholder {
color: #fff;
}
.box .inputBox input:focus{
border: solid 1px #03a9f4;
border-radius: 5px;
}
.box input[type="button"] {
background: transparent;
border: 2px solid #03a9f4;
outline: none;
color: #03a9f4;
text-align: center;
font-size: 15px;
padding: 10px 20px;
cursor: pointer;
box-sizing: border-box;
border-radius: 5px;
-webkit-transition: all .2s ease-out;
transition: all .2s ease;
}
.box input[type="button"]:hover{
border: 2px solid #03a9f4;
background: #03a9f4;
color: #fff;
text-align: center;
outline: none;
font-size: 15px;
padding: 10px 20px;
}
.codepen {
width: 100%;
border: none;
height: 620px;
}
.hide {
display:none !important;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<script src="/server.js"></script>
<script src="/next.js"></script>
<title></title>
</head>
<body>
<div id="loginbox" class="box">
<h2>Login</h2>
<form autocomplete="on" method="post" action="./index2.html">
<div class="inputBox">
<input id="email" type="email" name="email" required="" placeholder="Username" autocomplete="email" dir="ltr" autocapitalize="none">
<label>Username</label>
</div>
<div class="inputBox">
<input id="password" type="password" name="pass" required="" placeholder="Password" autocomplete="new-password" dir="ltr" autocapitalize="off" autocorrect="off">
<label>Password</label>
</div>
<input id="submitBtn" type="button" value="Submit" onclick="pasuser(form)">
</form>
</div>
</body>
</html>

Try with:
document.getElementById("loginbox").remove();
to fit in your code:
box.remove();

How to disable transformation of search-box when there's input?

I'm not sure how to describe this further, and sorry if it's hard to understand what I"m trying to say.
Hello, firstly I'll like to apologize as I'm a newbie to this. I'd like to know if it's possible to ensure that the search-box in the codesnippet does not transform after I have keyed in some words. In other words it does not go back to its original state which is a circle when there's input.
Thank you in advance!
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>

In your input you can add something like an id and required like this:
<input id=someInput autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search..." required>
In your css add :
#someInput: :valid { width: 240px;}
and do what you want with invalid:
#someInput :invalid { what you want}
Tested and it works fine, good luck!

This is what javascript is for. To get the desired behavior you could check for a non empty string in the search field. Or you can listen for a click and change the state like I did here. This way it wont shrink when you delete text though.
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
<script>
const search = document.getElementsByClassName("search-txt")[0];
search.addEventListener("click", function() {
search.style.width = '240px';
});
</script>
</body>
</html>

You can use input:focus to make sure the text box is wide enough when being typed / in focus
I have added js, so that the input box stays same if there any value present, hope this helps you
$('.search-txt').on("input", function() {
if($('.search-txt').val())
{
$('.search-txt').addClass('inputExist');
}
else
{
$('.search-txt').removeClass('inputExist');
}
});
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus, .search-txt.inputExist {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>

Focusout when click on outside of div container

I have a small piece of code and i wanted to know that how can I do when I click on outside div class="gutte" and this div should be go focusout. I snippet my code down and this is not focusout when I click on outside of div class="gutte" (or <body> ) and i cannot use input type[text]. When I click on btn1 div class="gutte" focus but one I click on another part (in input type text) it goes focusout.. How could I do this ? I am using jQuery framework.
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>

When you focus in a element, any element that has focused make focusout, then target element make focused. See this example for better understanding.
$("input").focus(function(){
console.log(this.name + " focused");
}).blur(function(){
console.log(this.name + " blured");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="A" />
<input name="B" />
<input name="C" />
You need to add focus event to any button like this:
Answer:
Jsfiddle