Adding and removing buttons - javascript

I am currently developing a simple webpage for a school assignment and I was wondering it is possible to create a button that will add a button, also a button beside it to remove the button?
Basically a button called "Add Button" where if you click on it, a button with the same size(can be named anything appropriate with no functions required). no matter how many times I click it, more buttons will be added e.g. button1, button2, button3 etc. Also, next to "Add Button" button is a button called "Remove Button" where it removes the buttons desendingly e.g. from button3, button2, then button1

How about something like this? Change the increment slightly.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
button{
height:100px;
width: 80px;
text-align: center;
margin: 5px 4px;
}
#mainButtons button{
display: inline-block;
margin: auto;
}
</style>
<div id="mainButtons">
<button onclick="addButton()">Make Button</button>
<button onclick="removeButton()">Remove Button</button>
</div>
</br>
<div id="que"></div>
<script>
var increment = 0;
function addButton(){
$("#que").append($("<button id='btn"+(increment++)+"'>This is Button"+ (increment)+"</button>"));
}
function removeButton(){
$("#btn"+(increment-1)).remove();
increment--;
}
</script>

You can use append() jquery function.
This is example :
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button type="button" class="btn" id="add_button">add</button>
<button type="button" class="btn" id="delete_button">delete</button>
<div class="result">
</div>
Jquery :
var start = 0;
$(document).on("click","#add_button",function(){
start++;
$(".result").append($('<button id="add_button">Add'+start+'</button>').addClass('button'+start));
});
$(document).on("click","#delete_button",function(){
start--;
$(".result").find('#add_button').each(function(index, el) {
$('.button'+start).remove();
});;
});
Js fiddle : https://jsfiddle.net/p8y672oL/

Must they be numbered? If not you can append the buttons and use jQuery's last() and remove() functions without the need of an increment/decrement variable.
<div class="button-test">
<button type="button" id="add-button">Add Button</button>
<button type="button" id="remove-button">Remove Last Button</button>
<div id="new-buttons"></div>
</div>
<script>
$('#add-button').on('click', function () {
$('#new-buttons').append($('<button>', {
'type': 'button',
'class': 'temp',
'text': 'new button'
}));
});
$('#remove-button').on('click', function () {
$('#new-buttons button.temp').last().remove();
});
</script>

Related

How to toggle active class in two button and hide div using jQuery?

In my case, My button1 is active by default so my form1 is shown by default too and I want to switch the two forms by clicking the button1 and button2. How can we accomplish that using jQuery.
<button type="button" class="btn btn-light activate-form active-btn">
button 1 = show form1
</button>
<button type="button" class="btn btn-light activate-form">
button 2 = show form2
</button>
<form id="normal-user-form" class="custom-register">form1</form>
<form id="business-user-form" class="custom-register">form2</form>
<script>
$(function() {
$(".activate-form").click(function() {
$(".activate-form").removeClass("active-btn");
$(this).addClass("active-btn");
});
});
</script>
Use a .is-active (with the appropriate CSS) for both your buttons and forms
Cache your forms in a variable
Use the data-* attribute (i.e: data-target in the example below) to store the desired selector you want to target on click
jQuery(($) => {
const $actForms = $(".custom-register");
const $actFormsBtns = $(".activate-form");
$actFormsBtns.on("click", function() {
$actFormsBtns.add($actForms).removeClass("is-active");
$(this).add($(this.dataset.target)).addClass("is-active");
});
});
.activate-form.is-active { background: #0bf; }
.custom-register { display: none; }
.custom-register.is-active { display: block; }
<button type="button" data-target="#normal-user-form" class="btn btn-light activate-form is-active" >form1</button>
<button type="button" data-target="#business-user-form" class="btn btn-light activate-form" data-target="">form2</button>
<form id="normal-user-form" class="custom-register is-active">form1</form>
<form id="business-user-form" class="custom-register">form2</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
If I understand what you mean correctly, you're looking for something like this:
$(function() {
$(".activate-form").click(function() {
$(".activate-form").removeClass("active-btn");
var formId = $(this).addClass("active-btn").data('target');
$("form").removeClass("active-btn");
$(formId).addClass("active-btn");
});
});
.active-btn {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light activate-form active-btn" data-target="#normal-user-form">
button 1 = show form1
</button>
<button type="button" class="btn btn-light activate-form" data-target="#business-user-form">
button 2 = show form2
</button>
<form id="normal-user-form" class="custom-register active-btn">form1</form>
<form id="business-user-form" class="custom-register">form2</form>
You can try to add data-target attribute inside the <button> tag to refer the form id.

How to write a multiple click function that targets different divs?

I have numerous buttons on a page. Each is related to its own separate div on the page. When button 1 is clicked div 1 is shown. When button 2 is clicked div 2 is shown and so on.
What's the best way to write the following jQuery below, so I don't have to keep writing a new function for every new button and new div that will need to be added?
$("#bio-1").click(function () {
$('.one').toggle();
});
$("#bio-2").click(function () {
$('.two').toggle();
});
$("#bio-3").click(function () {
$('.three').toggle();
});
$("#bio-4").click(function () {
$('.four').toggle();
});
You can try using data-* attribute which on clicking you can use to find only the specific element to toggle.
Demo:
$("[id^=bio-").click(function () {
$(`div[data-id=${this.id}]`).toggle();
});
div{
width: 100%;
border: 1px solid lightgray;
margin: 5px;
padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bio-1">Button-1</button>
<button id="bio-2">Button-2</button>
<button id="bio-3">Button-3</button>
<button id="bio-4">Button-4</button>
<div class="one" data-id="bio-1">One</div>
<div class="two" data-id="bio-2">Two</div>
<div class="three" data-id="bio-3">Three</div>
<div class="four" data-id="bio-4">Four</div>
It depends on how you initialize your display... hidden or all visible divs. This is like a toggle based on a common identifier that would let you keep your actual HTML code and shorten and organize your javascript code.
To use a toggle function, you should initialize your styles following the expected visibility logic.
$('div[data-id!=""]').hide();
$("[id^=bio-]").on("click", function () {
$('div[data-id!=""]').hide();
$('div[data-id="'+$(this).data('id')+'"]').show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bio-1" data-id="1">One</button>
<button id="bio-2" data-id="2">Two</button>
<button id="bio-3" data-id="3">Three</button>
<button id="bio-4" data-id="4">Four</button>
<div class="one" data-id="1">One</div>
<div class="two" data-id="2">Two</div>
<div class="three" data-id="3">Three</div>
<div class="four" data-id="4">Four</div>
Demo
you have to used toggle as well as show jquery function.
$(".clickBUtton").click(function () {
var id = this.id; // click class id
$("#DIV"+id).show(); // toggle and you also add show
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="clickBUtton" id="one">ONE</button>
<button class="clickBUtton" id="two">TWO</button>
<div id="DIVone" style="display:none;">one div</div>
<div id="DIVtwo" style="display:none;">two div</div>

can we write script for the button which is inside the popover?

I have created a popover so that if I click on the image the popover should appear.
The popover is working. what my main problem is I have inserted buttons in the popover.
so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?
I have tried but it's not working!!!!
$(function() {
$('button').click(function() {
var x = $(this).attr('class');
alert(x);
});
});
$(function() {
$("[data-toggle=popover]").popover({
html: true,
container: 'body',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
placement: "auto"
});
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>
<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
<div class="popover-body">
<div class="list-group">
<button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
<button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
<button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
Here I an using html selector
:not(.main)
to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
.hidden {
display: none;
}
button {
float: left;
}
.class-0 {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>

Turn buttons to able to be clicked with middle mouse buttons

I want to turn buttons like the following to be clickable by the middle mouse button so it will be possible to open them in new tabs.
These buttons are on Aliexpress' orders page:
<button button_action="confirmOrderReceived" orderid="87428853391079" type="button" data-order-status="WAIT_BUYER_ACCEPT_GOODS" data-order-biztype="AE_COMMON" class="ui-button ui-button-normal button-confirmOrderReceived">
Confirm Goods Received
</button>
I tried to turn them into a but then they don't work.
These don't work either: Fiddle (note that the buttons on AE don't have a link).
Is there another way to inject a script that will turn all the buttons on a page to be tab clickable?
Try following code might help
Reference
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
var whichButton = function (e) {
// Handle different event models
var e = e || window.event;
var btnCode = e.button;
if (btnCode === 1) {
console.log('Middle button');
}
}
<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click With
Middle Button</button>
You can wrap your button in an anchor tag and add the target="_blank" to force the window to open in new tab.
<a href="link" target="_blank"><button button_action="confirmOrderReceived" orderid="87428853391079" type="button" data-order-status="WAIT_BUYER_ACCEPT_GOODS" data-order-biztype="AE_COMMON" class="ui-button ui-button-normal button-confirmOrderReceived">
Confirm Goods Received
</button></a>
You can simply write mousedown event instead of onclick like this
check updated fiddle : https://jsfiddle.net/1gd8m9y4/3/
<form action="http://google.com">
<input type="submit" value="Go to Google" href="google.com" onmousedown="window.open('http://www.gooogle.com/')" />
</form>
<input type="button" onmousedown="window.open('http://www.gooogle.com/')" value="Go to Google" />
Simple solution for detection of mouse middle click event
$('.test').mousedown(function(event) {
if(event.which == "2")
alert("middle click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://google.com">
<input type="submit" value="Go to Google" href="google.com" />
</form>
<input type="button" class="test" value="Go to Google" />
If you are using anchor tag use attribute target="_blank" to open a new tab and use href to add the link
I suppose that code snippet should solve your problem
.btn {
background-color: grey;
padding: 5px;
margin: 5px;
height: 15px;
width: 90px;
}
.btn-link {
text-decoration: none;
font-weight: normal;
display: inline-block;
color: #000000;
}
<a class="btn btn-link" rel="details" href="http://google.com" target="_blank">Go to Google</a>

How do I remove button formating in a form so the buttons are used as toggle buttons?

I built a checkout page and there's a form to get user data.
The form goes like this:
<form method="post" action="purchase" name="checkout"></form
When user clicks on "confirm order", they are being directed to the confirmation.jsp as supposed.
Inside of that form I added buttons to be used as toggling effect to hide and show a given section of the form.
The problem:
When I click on > + < the given section shows and when I click on > - < the given section hides but then the confirmation.jsp page loads up as if the buttons acted as link to that page, just like the "confirmation order button". I tried to add normal buttons, same event happens. Every button put on that form seems to automatically be formatted to act as a "confirm order button", no matter what I try.
The buttons go like this:
<button id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button>
And the scripts in the header:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
Thanks for your help!
try this:
<input type="button" id="show" class="toggle_button" onclick="doAction('show')" value="+" />
<input type="button" id="hide" class="toggle_button" onclick="doAction('hide')" value="-" />
<script>
$("#show").click(function( event ) {
event.preventDefault();
});
$("#hide").click(function( event ) {
event.preventDefault();
});
function doAction(action) {
if(action=="hide") {
$("p").hide();
} else {
$("p").show();
}
}
</script>
The default type for a button in a form is type="submit".
Try to add 'type="button"' on each of them.
<button type="button" id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button type="button" id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button>
hope this helps.
Try this CSS:
.btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family: Arial;
color: #000;
font-size: 60px;
background: #ffffff;
padding: 0px 0px 0px 0px;
text-decoration: none;
}
And the HTML:
<button id="show" class="toggle_button btn" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button btn" value=$("#hide").click action=$("#hide").click>-</button>
The issue is that when you put a button in a form it's default type is submit unless you explicitly set it to button.
You are therefore submitting the form unintentionally
Change to
<button type="button"></button>
Alternatively in javascript you can also use event.preventDefault() within click handlers

Categories

Resources