I have a stripe button and want to add my custom class. I found that you can manually create the CSS for it and it will work, although, I want to keep all the buttons on my site consistent by using my custom class.
Whatever I try I cannot remove the default button
<form action="/update-the-card" method="POST">
{{ csrf_field() }}
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="{{ env('STRIPE_KEY') }}"
data-name="My site"
data-panel-label="Update Card"
data-label="Update Card"
data-allow-remember-me=false
data-locale="auto">
</script>
</form>
My class is 'button fstyle1 thin' that id like on it
I've tried this but does not work.
$('button.stripe-button-el').removeAttr('style').addClass('button fstyle1 thin')
Found the answer. All you need to do is add your own custom submit button and just hide the one stripe provides you with. Very easy.
<form action="/update-the-card" method="POST">
{{ csrf_field() }}
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="{{ env('STRIPE_KEY') }}"
data-amount="44040"
data-name="nameeee"
data-description="descriptionnn"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
<button type="submit" class="button green fsize-16 f-weight-400">Purchase Here!</button>
</form>
I think that is your class (button fstyle1 thin) level is lower then .stripe-button-el
Try add !important in you css.
or add more css combinators like: .a .b .c form .fstyle1
Hope to help you.
Its maybe your .button.stripe-button-el element is not exist in the DOM at the time of binding(means created dynamically).
So you can bind your event handler to a higher element $(document).
Try to use $(document) here...
$(document).find("button.stripe-button-el").removeAttr("style").addClass("button fstyle1 thin");
Like #victory said, the easier solution is to hide the button given by stripe by this line :
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
If you have multiple stripe buttons on one page, this will do the job :
<script>
var all_buttons = document.getElementsByClassName("stripe-button-el");
for (var i = 0; i < all_buttons.length; i++) {
all_buttons[i].style.display = "none";
}
</script>
Happy coding !
Try this,
$(document).find("button.stripe-button-el").removeAttr("style").addClass("'button fstyle1 thin'");
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");
Related
I have a task in school and I think Javascript is really hard. Now in the beginning I need to google everything and I only find solutions in different libraries.
In this case I need to use Vanilla JS. When I click on logout button it need to toggle and show the login button.
In the task I cant change the HTML only add JS.
// student
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>
You can add click event listeners to both of the buttons to change its own display to none and display the other button.
var login = document.querySelector('.signin-btn'),
logout = document.querySelector('.signout-btn');
login.addEventListener('click', function(e){
this.classList.add('is-hidden');//adds is-hidden class
logout.classList.remove('is-hidden');//removes is-hidden class
});
logout.addEventListener('click', function(e){
this.classList.add('is-hidden');
login.classList.remove('is-hidden');
});
.is-hidden{
display: none;
}
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>
here's a extremely basic way to do it, I would recommend using more advanced techniques later
function change() {
document.getElementById('but').style.display = "none"
document.getElementById('butother').style.display = "block"
}
function changeother() {
document.getElementById('butother').style.display = "none"
document.getElementById('but').style.display = "block"
}
<html>
<body>
<button id="but" onclick='change()'>log in </button>
<button id="butother" onclick='changeother()'>log out </button>
</body>
</html>
I am building a "edit profile" page.
Here is what I want to do:
In each section, the employer will be shown and the edit form will be hidden.
When I click the "edit employer" button, the edit form will be shown and the employer will be hidden.
Here is what I did using jQuery. It does not work when I click on the "edit employer" button. I do not know why this does not work.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="edit">
<form class="editForm">
employer: <input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
$(this).children('.editButton').click(function() {
$(this).children('.editForm').show();
$(this).children('.contents').hide();
});
})
</script>
</body>
</html>
The $(this) inside the click function contains the local instance of the $(this).children('.editButton'). For that reason your code is not finding any .editForm elements.
For this to work you could do something like this:
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
var $this = $(this);
$(this).children('.editButton').click(function() {
$this.children('.editForm').show();
$this.children('.contents').hide();
});
})
</script>
If I may I would improve the code with some more changes:
<script>
$('.edit .editForm').hide(); // this will hide all instances of .editForm
$('.edit .editButton').click(function() { //assign 1 handler for all cases
$(this).siblings('.editForm').show(); // show the sibling edit form
$(this).siblings('.contents').hide(); // hide the sibling contents element
});
</script>
Reference:
Sibling Selector: https://api.jquery.com/siblings/#siblings-selector
The problem is the this inside the click handler referring to the button, not the div.edit. Here's one way to fix this:
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
});
$('div.edit').each(function() {
var $self = $(this);
$(this).children('.editButton').click(function() {
$self.children('.editForm').show();
$self.children('.contents').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit">
<form class="editForm">
employer:
<input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
You don't need to use .each() at all. Just do an .click() event on the class of .editButton and use this to find its parent. If you want to make a toggle, you're going to have to make use of a new class or something of that nature to make a conditional statement off of.
//This will hide *ANY* .editForm elements
$('.editForm').hide();
//This will fire off of *ANY* editButton clicks.
$('.editButton').click(function() {
var form = $(this).closest('.edit'); //Get the wrapper
if(form.hasClass('open')) { //Check to see if it is open or not
form.removeClass('open').addClass('close'); //Toggle Classes
form.find('.editForm').show();
form.find('.contents').hide();
} else {
form.removeClass('close').addClass('open');
form.find('.editForm').hide();
form.find('.contents').show();
}
});
I like to use closest and find more than parent and children (respectively). They can go 1-many layers up or down and search the hierarchy for whatever you're looking for, rather than parent and children going up or down a single layer.
If you are inserting your .edit form after the DOM loads, you're going to need to bind your click event to the document
$(document).on('click', '.editButton', function() {
var form = $(this).closest('.edit');
form.find('.editForm').hide();
form.find('.contents').show();
});
How can I make the button save visible when I click the edit button? This is my code so far, but it happends nothing. I'm working in a jsp
<INPUT TYPE="BUTTON" VALUE="Edit" ONCLICK="btnEdit()" class="styled-button-2">
<INPUT TYPE="BUTTON" VALUE="Save" ONCLICK="btnSave()" class="styled-button-2" style="visibility:hidden;" id="save">
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementsById("save").style.visibility="visible";}
}
</script>
DEMO
It is considered bad practice to add onclick in your html, and you miss-spelled a method. You should equally avoid adding your css in your html as well.
HTML:
<INPUT TYPE="BUTTON" VALUE="Edit" class="styled-button-2" id="edit">
<INPUT TYPE="BUTTON" VALUE="Save" class="styled-button-2" id="save">
JS:
var edit = document.getElementById("edit");
var save = document.getElementById("save");
edit.onclick = function() {
save.style.visibility = "visible";
}
CSS:
#save {
visibility: "hidden";
}
Must be a long day.
You have a misspelling.
Not right
document.getElementsById
Right Way
document.getElementById
document.getElementById("save").style.visibility="visible";
use getElementById not getElementsById
Probably a simple error, but you wrote getElementsById not getElementById, which meant you were trying to get more than one element, when infact you only need to get the "save" button.
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementById("save").style.visibility="visible";}
}
</script>
Side note: You may want to tidy your code:
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
document.getElementById("save").style.visibility="visible";
}
</script>
I'm trying to hide and show "form1". But even simply hiding doesn't work.
Where is the mistake?
<body>
<script type="text/javascript">
document.getElementById("F1").style.visibility = "hidden";
</script>
<form id="F1" name="form1">
<p class="style14">blah-blah
<input type="text" size="1" name="rd"> blah
</p>
</form>
</body>
Firstly you need to make sure your script tag is at the bottom of the body or use the DOMContentLoaded event
like so
document.addEventListener('DOMContentLoaded', function(){
var form = document.getElementById('F1');
form.style.visibility="hidden";
// OR
form.style.display = 'none';
});
Your F1 needs to be a string, right now you're referring to a undefined variable.
And I also recommend using display instead of visibility
#update to comment.
The opposites of them are
visibility: visible;
AND
display: block; // Or whatever
This line is wrong
document.getElementById(thediv).style.visibility="hidden";
What is "thediv" you should use :
document.getElementById("F1").style.visibility="hidden";
Try document.getElementById("F1").style.visibility=hidden;
F1 should be wrapped in quotes. You also might need to encompass your code within the onload function
window.onload = function(){
document.getElementById("F1").style.visibility = "hidden";
}
Can someone show me whats wrong with this:
<html>
<script type = "text/javascript">
function colourGreen()
{
document.getElementById("button1").style.bgColor = 0xFFFF00;
}
</script>
<body>
<form action="">
<div id = "button1">
<input type="button" value="Colour">
</div id>
<div id = "button2">
<input type="button" value="Price up" onclick = "colourGreen()">
</div id>
<div id = "button3">
<input type="button" value="Price down">
</div id>
</form>
</body>
</html>
document.getElementById("button1").style.backgroundColor = '#FFFF00';
Try:
document.getElementById("button1").style.backgroundColor = '#00ff00';
It is backgroundColor not bgColor
You can create a css rule and change the className of the button to link to that rule.
<style type="text/css">
.buttonColor{
background-color: green;
}
</style>
<script type ="text/javascript">
function colourGreen() {
document.getElementById("button1").className = "buttonColor";
}
</script>
That way if you for some reason decide to change the color or the background you will not have to change it on every page. You will be able to change that one css file.
I'd try
.style.backgroundColor = 0xFFFF00;
I assume your divs are only as big as your buttons and are therefore hidden by the buttons themselves. Change the colour on you button itself instead of the div?
A neater and more reliable way to to edit css of items is using jquery selectors. $("#button1").css("background-color","#ff0000");
Be sure to include the jquery .js file before trying this or you'll get an object expected error.