How do I make a button disappear once clicked? - javascript

This is my code. https://jsfiddle.net/3phzezfj/3/
function showhidediv(rad){
var rads=document.getElementsByName(rad.name);
document.getElementById('one').style.display=(rads[0].checked)?'block':'none' ;
document.getElementById('two').style.display=(rads[1].checked)?'block':'none' ;
document.getElementById('three').style.display=(rads[2].checked)?'block':'none' ;
document.getElementById('four').style.display=(rads[3].checked)?'block':'none' ;
}
function switchVisible()
{
$("#newpost").hide();
$("#newpost2").show();
}
function previousVisible()
{
$("#newpost").show();
$("#newpost2").hide();
}
How do I make the next button disappear once I've clicked it but if I press back, it will reappear?
Thanks.

You can use toggle();
Description: Display or hide the matched elements.
$("#newpost2").toggle();
If #newpost2 is hidden, it will show it, if it's shown, it will hide it.

Instead of onclick use addEventListener for click event.
I have edited your code here codepen
And you don't have to mix js and jquery like this
document.getElementById('four') and $("#newpost")
it's better to decide which one you want to use

Your fiddle was not having jquery js included.
Please check updated fiddle here.
Attached the event handler like below.
$("#btnBack").click(previousVisible);
$("#btnNext").click(switchVisible);
And moved the Next button inside the div.
Hope this is what you were trying to achieve.

I think this is what you want right?
var check = 0;
$(document).ready(function() {
$("#Button1").click(function() {
if(check == 0)
{
$("#Button1").hide();
}
});
$("#Button2").click(function() {
if(check == 0)
{
$("#Button1").show();
}
});
});
.btnSubmit {
background-color: #7f0000;
background-image: -webkit-linear-gradient(top, #7f0000, #6c0404);
background-image: -moz-linear-gradient(top, #7f0000, #6c0404);
background-image: -o-linear-gradient(top, #7f0000, #6c0404);
background-image: -ms-linear-gradient(top, #7f0000, #6c0404);
background-image: linear-gradient(top, #7f0000, #6c0404);
border: 0;
text-transform: uppercase;
color: white;
font-size: 14px;
font-weight: bolder !important;
height: 42px;
padding: 0 20px;
margin: 0;
text-shadow: -1px -1px 2px 2px #000, 1px 1px 2px 2px #aa4242;
border-bottom: 1px solid #383838;
font-family: garamond, serif;
text-shadow: 1px -1px 0px #090909;
width: 150px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid eightwidth" align="center" style="background-color: #282828; padding: 1px; padding-bottom: 0px;" id="disappear">
<button class="btn btnSubmit" id="Button1" type="button" value="Click">NEXT</button>
<button class="btn btnSubmit" id="Button2" type="button" value="Click">Appear</button>
</div>

Button disappear!!
$("#next").click(function(){
$("#next").hide();
$("#back").show();
});
$("#back").click(function() {
$("#back").show();
$("#next").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="button" id="next" value="Next"/>
<input type="button" id="back" value="Back"/>

Related

Unable To Post HTML Form Data & Redirect

I have an HTML Form that uses Google Sheets as a database, but I'm unable to get the form to redirect after posting the form data.
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
border: 1px solid #dfe1e5;
border-radius: 8px;
padding: 10px 20px;
}
.form-inline label {
margin: 5px 10px 5px 0;
}
span.form-cta {
font-weight: 600;
text-transform: uppercase;
color: #333;
font-size: 1.15rem;
margin-right: 30px;
}
.form-inline input.email {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #dfe1e5;
border-radius: 4px;
width: 20vw
}
textarea:focus,
input:focus,
input[type]:focus,
.uneditable-input:focus {
border-color: rgba(0, 123, 255, 0.67);
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 123, 255, 0.13) inset, 0 0 8px rgba(0, 123, 255, 0.53);
outline: 0 none;
}
.form-inline input.button {
padding: 10px 25px;
background-color: #ff7300;
border: 1px solid #dfe1e5;
border-radius: 4px;
color: white;
font-size: 1rem;
cursor: pointer;
margin: 0;
}
.form-inline input.button:hover {
background-color: #dfe1e5;
color: #475299;
}
#media (max-width: 720px) {
.form-inline input {
margin: 10px 0;
width: 80vw;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
<form target="_blank" class="form-inline"
action="https://docs.google.com/forms/u/3/d/e/1FAIpQLSfU_zBaPh8gPdQ0b3EpGck-2mZP1FzVG6JP9SFTE3E4ul6hAw/formResponse"
method="POST">
<span class="form-cta">Get The Template</span><br>
<input class="email" type="email" class="form-control" id="inputPassword2" placeholder="email"
name="entry.2035384378">
<input type="submit" class="button" onclick="window.location.href = '/thank-you.html';" value="Send it!" />
</form>
There are no scripts or functions (I have 0 experience with JS, JQuery, and Ajax).
I've been trying to get this working for 2+ weeks :,)
I've read several posts on this, and the above info reflects my most recent edits after reading this post: Redirecting to a page after submitting form in HTML
"onclick" will not work because the button type is submit and after clicking on it, it will already redirects to the URL mentioned in action attribute of form.
Do not try to save the data via action attribute, instead use AJAX method in jQuery
Create button like this:
<input type="submit" class="button" id="saveForm" />
Here is jQuery ajax Code:
$(document).ready(function(){
var $form = $('form'),
url = '<action-url>'
$('#saveForm').on('click', function(e) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject()
}).success(
window.location.href = '/thank-you.html';
);
})
}
You can also refer this great reference:
https://medium.com/#dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175
Since you have zero experience with JavaScript, use this reference to setup jQuery: Jquery Setup
You can replace the code with above code
If 'thank-you.html' file is in the same directory as that of the file having this code,
Replace -
<input type="submit" class="button" onclick="window.location.href = '/thank-you.html';" value="Send it!" />
with
<input type="submit" class="button" onclick="window.location.href = 'thank-you.html';" value="Send it!" />
"/" redirects to root directory. If 'thank-you.html' is one level up in the directory u need to use this line as -
<enter code here input type="submit" class="button" onclick="window.location.href = '../thank-you.html';" value="Send it!" />

I can't pick the Search bar value and use to search in other website [duplicate]

This question already has answers here:
Appending form input value to action url as path
(2 answers)
Closed 2 years ago.
I'm having a problem, I want to search something on my website and when I click in the button, it should take the search value and go to the website I want and search the same think I put in the search bar of my website but now I get this problem.
I have this html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<style type="text/css">
#tfheader{
background-color:#c3dfef;
}
#tfnewsearch{
float:right;
padding:20px;
}
.tftextinput2{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
.tfbutton2 {
margin: 0;
padding: 5px 7px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton2:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
.tfbutton2::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
</style>
</head>
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="https://spyse.com/target/domain/">
<input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" value="Search our website"><input type="submit" value=">" class="tfbutton2">
</form>
<div class="tfclear"></div>
</div>
</body>
</html>
And this JS:
<script type="text/javascript">
window.onload = function(){
var submitbutton = document.getElementById("tfq");
if(submitbutton.addEventListener){
submitbutton.addEventListener("click", function() {
if (submitbutton.value == 'Search our website'){
submitbutton.value = '';
}
});
}
}
</script>
When I search for sapo.pt on my website the result is https://spyse.com/target/domain?q=sapo.pt, and my objective is to get https://spyse.com/target/domain/sapo.pt, how can I take of the ?q= and put /sapo.pt?
You can use onsubmit attribute and set the action inside a function for example:
<form id="tfnewsearch" method="get" onsubmit="onSubmit()">
<input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" value="Search our website">
<input type="submit" value=">" class="tfbutton2">
</form>
Your JavaScript function will look like this:
function onSubmit(){
var action_src = "https://spyse.com/target/domain/" + document.getElementById("tfq").value;
var your_form = document.getElementById('tfnewsearch');
your_form.action = action_src ;
}

How do I add/remove div color onclick of the div but not the button?

I have an add and remove button which selects the complete div and adds a green color to the div. The function only works on the "add this extra" and "remove" button. How do I make it work like clicking anywhere on the div instead of the particular button itself?
I would look to hear someone help from you guys.
Regards,
Bilal
$('.btn_extras').addClass('force-hide');
$('.btn-rmv-item').hide();
// Add btn onClick
$('.btn-add-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).next("button.btn-rmv-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").addClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// Remove btn onClick
$('.btn-rmv-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).prev("button.btn-add-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").removeClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// function to Show/Hide Continue Button w.r.t SELECTIONS
function showHideContinueBtn() {
$('.btn_extras').addClass('force-hide').removeClass('force-block');
$('.btn_skip').removeClass('force-hide').addClass('force-block');
$('div.card').each(function(index) {
if($(this).hasClass('card-bg')) {
$('.btn_extras').removeClass('force-hide').addClass('force-block');
$('.btn_skip').removeClass('force-block').addClass('force-hide');
}
});
}
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button class="btn btn-add-item">Add this extra</button>
<button class="btn btn-rmv-item">Remove</button>
</div>
<div class="clearfix"></div>
</div>
You can have the click handler directly on the div (I assume it is .card-border here).
And you need only one button which you toggle the classes and change the text.
I added a .card-bg CSS rule that seemed to be missing in the question...
I also added type="button" to prevent form submission if the button is clicked.
Have a look at the comments in the code below. It replaces the two click handlers you had... And the showHideContinueBtn() function.
$(".card-border").on("click",function(){
// Toggle the div background color
$(this).toggleClass("card-bg");
// Find the button
var btn = $(this).find(".btn");
// Toggle classes for ONE button
btn.toggleClass('btn-add-item btn-rmv-item');
// Depending on a button's class, change it's text
(btn.hasClass("btn-rmv-item"))?btn.text("Remove"):btn.text("Add this extra");
});
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
/* This class was not posted in question... So I improvised one */
.card-bg{
background-color:#44bb44;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button type="button" class="btn btn-add-item">Add this extra</button>
<!--button class="btn btn-rmv-item">Remove</button-->
</div>
<div class="clearfix"></div>
</div>
Change
$('.btn-add-item').on('click', function(e) {
to
$(e.currentTarget).closest("div.card-border").on('click', function(e) {
If you want a toggle functionality, also add a variable that holds the crt state:
var state="default";
...on('click',function(){
if(state=='default'){
state='checked';
....
} else {
state='default';
....
}
});
If I understood you question right then this is answer you are looking for.
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()" style="width:200px; height:100px; border: 1px solid black;">
This Div's background color will change.
</p>
<script>
var color=0;
function myFunction() {
// Just Specify The Id you need
var myDiv = document.getElementById("demo");
if(color == 0)
{
myDiv.style.backgroundColor = "red"; color=1;
}
else
{
myDiv.style.backgroundColor = "white"; color=0;
}
}
</script>
</body>
</html>
Hope This Solves the Issue.

expand search bar onclick

Well, I´m trying to do a basic jQuery example that expands a search bar on mouse click, and I dont understand why nothing is happening with my code. I have a basic jQuery to show the input when I click in my (button class="expand"), but when I click in this button the input that is setting in css with display:none dont appears.
My basic jQuery script:
<script type="text/javascript">
$('.expand').click(function() {
$('#test').show(500);
});
My html:
<nav id="menu">
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
<li id="sb-search" style="float:right; list-style:none; height:20px;">
<div id="pesquisar-container">
<span id="pesquisar" class="form-container cf">
<form name="form1" >
<input id="test" type="search" placeholder="Pesquisar..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />
<button class="expand" type="submit"><i class="fa fa-search"></i></button>
</form>
</span>
</div>
</li>
</ul>
</nav>
My css:
.form-container input {
width: 150px;
height: 25px;
padding: 5px 5px;
float: left;
font: bold 15px;
font-size:15px;
font-family:'bariol_lightlight';
border: 0;
background: #f3f3f3; /*#fcfcfc se o fundo for branco, ver as diferenças */
border-radius: 3px 0 0 3px;
margin-top: 9px;
color:#000;
display:none;
}
.form-container button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 25px;
width: 35px;
text-transform: uppercase;
background: #363f48;
border-radius: 0 5px 5px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
margin-top:9px;
}
Try to wrap your code inside DOM ready handler $(function() {...});
$(function() {
$('.expand').click(function() {
$('#test').show(500);
});
});
There can be the couple of reasons.
1. Put your click listeners on document ready
2. Better assign some id to button. let's say its btnSubmit.
3. following methods can be used to show or hide the elements.
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
or its better to use toggle.
$(document).ready(function() {
$("#btnSubmit").click(function(){
$("#test").toggle();
});
});
Hope this will help.

Onfocus of submit image button not getting highlighted in IE 8

I am trying to highlight the selection of a image using a javascript function but this doesn't seem to have any effect when using IE but works fine in Chrome. Can someone let me know how to highlight the submit image(button) in IE?
HTML submit button code:
<input type="submit" onfocus="changeBorder(this);" onclick="saveDeviceInfo();"
title="Save" alt="Save" value="Save" id="save-button" style="background-image:
url(btn.png); border: 2px solid rgb(51, 129, 183); background-position: initial initial;
background-repeat: repeat no-repeat;">
JS function:
function changeBorder(_this){
jQuery(_this).css("border","2px solid #3381b7");
}
EDIT:
I tried adding the below CSS to my CSS file, but still it doesn't seem to work in IE 8.
#save-button:hover{
border: 1px solid #3381b7;
}
#save-button:focus{
border: 4px solid #3381b7;
}
#save-button:focus{
outline: #177f7f dotted medium;
}
#save-button:selected{
outline: #177f7f dotted medium;
}
You could use CSS, like:
#save-button{
background:url('btn.png') no-repeat;
}
#save-button:hover{
background:url('btn2.png') no-repeat;
}
or
#save-button{
background-image:url('btn.png'); background-repeat:no-repeat;
}
#save-button:hover{
background-image:url('btn2.png'); background-repeat:no-repeat;
}
Here's a Fiddle
HTML
<input type="submit" onclick="saveDeviceInfo();" title="Save" alt="Save" value="Save" id="save-button">
CSS
#save-button {
border: 2px solid rgb(51, 129, 183);
background-image: url(btn.png);
background-position: initial initial;
background-repeat: no-repeat;
}
#save-button:hover{
border: 1px solid #3381b7;
}
#save-button:focus{
border: 4px solid #3381b7;
outline: #177f7f dotted medium;
}
#save-button:selected{
outline: #177f7f dotted medium;
}
jQuery
$(function() {
$('#save-button').click(function() {
$(this).css({ border: '2px solid #ccc'});
});
});

Categories