Turn buttons to able to be clicked with middle mouse buttons - javascript

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>

Related

js is showing [object HTMLButtonElement] onclick?

When button clicked JS is showing [object HTMLButtonElement] instead of original value.
I want that whenever a button is clicked the value of button is showed.
like when button having value 3 is pressed it will show 3 and not [object HTMLButtonElement]
this is my html file
<div class="col-3">
<button onclick="val(this)" id="n1" value="1" type="button" class="btn btn-outline-primary "
style="width:100%" value="1">1</button>
</div>
<div class="col-3">
<button onclick="val(this)" id="n1" value="2" type="button" class="btn btn-outline-primary "
style="width:100%" value="2">2</button>
</div>
This is my script.js
function val(num) {
let n = num;
document.getElementById("ta").innerHTML = n;
}
when using this inside the onclick html attribute, it will be valued with the html element firing the event so the object being passed to val() will be the whole element.
If you need to know the value of the button being clicked, you should retrieve its value property
function val(num) {
let n = num.value;
document.getElementById("output").innerHTML = n;
}
button{
cursor: pointer;
}
<button
type="button" class="btn btn-outline-primary "
id="n1" value="1" onclick="val(this)">1</button>
<button
type="button" class="btn btn-outline-primary "
id="n2" value="2" onclick="val(this)">2</button>
<div id="output"></div>
Using onClick directly on Elements is not really ideal, try using addEventListener.
Another advantage of addEventListener you can create a delegated event handler, so if you have lots of buttons doing the same thing you can attach one handler to a parent element and all the buttons can be handled.
Buttons don't store values like INPUT, but if you want to associate data with buttons try using the data- attribute. eg.. data-val="1", you can then access this using the dataset property.
Below is a simple example of using addEventListener as a delegated event handler, plus using data- attributes on buttons.
Update: Buttons do have the value attribute, so you could still do
e.target.value too, but I'll leave the data- attribute as it's
pretty handy anyway.. :)
const d = document.querySelector('div');
document.body.addEventListener('click', e => {
const val = e.target.dataset.val;
if (val) d.innerText = val;
});
div {
border: 1px solid black;
margin-top: 10px;
padding: 20px;
font-size: 30pt;
font-family: arial;
}
<button data-val="1">1</button>
<button data-val="2">2</button>
<button data-val="3">3</button>
<button data-val="4">4</button>
<div>
Click button above.
</div>

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.

Adding and removing buttons

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>

page reload in asp.net

I made a master page and added a button to it and some js code to the button, but when i clicked the button it reloads the page due to which the js file stop working.
The button code is :
<button id="database" onclick="myFunction()" style="background-color:transparent; color: #FFFFFF; border:none;"">
<img class="image" id="database_" src="images/database.png" style="width: 81px" /><br />
DataBase</button>
The Js code is :
function myFunction() {
$("#database_").removeClass("image");
}
image code is :
.image{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
so can anyone help to stop page refresh and js code running
You have to set the button type, like this:
<button type="button" id="database" onclick="myFunction()" style="background-color:transparent; color: #FFFFFF; border:none;"">
<img class="image" id="database_" src="images/database.png" style="width: 81px" /><br />
DataBase</button>
The default, is submit, that submits the form when you click.

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