Develop Reference

Select a button by its value and click on it

How can I select a button based on its value and click on it (in Javascript)?
I already found it in JQuery:
$('input [type = button] [value = my task]');
My HTML Code for the Button is :
<button type="submit" value="My Task" id="button5b9f66b97cf47" class="green ">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">Lancer le pillage</div>
</div>
<script type="text/javascript" id="button5b9f66b97cf47_script">
jQuery(function() {
jQuery('button#button5b9f66b97cf47').click(function () {
jQuery(window).trigger('buttonClicked', [this, {"type":"submit","value":"My Task","name":"","id":"button5b9f66b97cf47","class":"green ","title":"","confirm":"","onclick":""}]);
});
});
</script>
What is the equivalent in JS and how may i click on it
(probably like this: buttonSelected.click(); ) .
And how do i run the javascript of the button clicked ?

Use querySelector to select it. Then click()
Your HTML has a button and not an input element so I changed the selector to match the HTML.
let button = document.querySelector('button[value="my task"]');
button.click();
<button type="submit" value="my task" id="button5b9f54e9ec4ad" class="green " onclick="alert('clicked')">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">Launch</div>
</div>
</button>
Otherwise, use this selector:
document.querySelector('input[type="button"][value="my task"]')
Note that if you have multiple buttons with the same value you'll need to use querySelectorAll and you'll get a list of all the buttons.
Then you can loop over them and click() them all.
Edit - new snippet after question edit
jQuery(function() {
jQuery('button#button5b9f66b97cf47').click(function() {alert('success')});
document.querySelector('button[value="My Task"]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" value="My Task" id="button5b9f66b97cf47" class="green ">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">Lancer le pillage</div>
</div>

you can try:
var elements = document.querySelectorAll("input[type = button][value=something]");
note that querySelectorAll returns array so to get the element you should use indexing to index the first element of the returned array and then to click:
elements[0].click()
and to add a event listener u can do:
elements[0].addEventListener('click', function(event){
event.preventDefault()
//do anything after button is clicked
})
and don't forget to add onclick attribute to your button element in html to call the equivalent function in your javascript code with event object

I am not recommended this way because of excess your coding but as you mentioned, below are the equivalent way.
$(document).ready(function() {
var selectedbuttonValue = "2"; //change value here to find that button
var buttonList = document.getElementsByClassName("btn")
for (i = 0; i < buttonList.length; i++) {
var currentButtonValue = buttonList[i];
if (selectedbuttonValue == currentButtonValue.value) {
currentButtonValue.click();
}
}
});
function callMe(valuee) {
alert(valuee);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="button" class="btn" value="1" onclick="callMe(1)" />
<input type="button" class="btn" value="2" onclick="callMe(2)" />
<input type="button" class="btn" value="3" onclick="callMe(3)" />

Using JavaScripts querySelector in similiar manner works in this case
document.querySelector('input[type="button"][value="my task" i]')
EDIT
You might save your selection in variable and attach eventListener to it. This would work as you desire.
Notice event.preventDefault() -function, if this would be part of form it would example prevent default from send action and you should trigger sending form manually. event-variable itselfs contains object about your click-event
var button = document.querySelector('input[type="button"][value="my task" i]')
button.addEventListener('click', function(event){
event.preventDefault() // Example if you want to prevent button default behaviour
// RUN YOUR CODE =>
console.log(123)
})

Javascript button not working on android mobile for website

So I've been trying to get a button to work on my phone (Android) running Firefox. I've tried changing from the onClick to on('click touchstart' that was recommended on other posts here without success. I also added cursor: pointer to my css file for the button. Not sure what else to do. Maybe something to do with hover?
I'm using jquery 1.12.0
$(".add-to-cart").on('click touchstart',function(event){
event.preventDefault();
var name = $(this).attr("data-name");
var price = Number($(this).attr("data-price"));
RWC_shoppingCart.addItem(name, price, 1);
RWC_shoppingCart.displayCart();
RWC_shoppingCart.saveCart();
});
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
<h2>$30</h2>
</div>
<div class="project-name">
Short Candles
</div>
<br>
<button class="add-to-cart btn btn-default btn-xl" href="#" data-name="Short Candle" data-price="30.00">Add To Cart</button>
<!--
<form paypal stuff
</form>
-->
</div>
</div>

Loading animation is not working

So I am using the following jQuery snippet to make a loading animation run (created in CSS) when a file is selected in an input field and then an upload button is clicked.
The form has 3 input fields with 3 upload buttons and is quite flexible. For e.g if a user selects a file in the first input field but clicks on the second upload button the loading animation should run around the first input field only. Another example is that if a user selects a file in the first input field and the second input field but clicks on the third upload button then the loading animation should run in the first and second input fields only.
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function() {
$(".p").each(function(file) {
if ($(this).val()) {
$(this).next(".loader").show();
$(this).next(".loader").find(".spinner").show();
$(this).next(".loader").find(".UploadBtn").hide();
}
});
});
});
The code fails to run in the IF statement function. If i change the code (mentioned below) it will make the animation run but it ends up making the loading animation run in all 3 selection fields even if only one file was selected. This is not what is required but does tell me that the part of the code which has the IF statement breaks down in the code above;
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function() {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$(".UploadBtn").hide();
}
})
});
});
I am a beginner level coder and I have spent hours trying to fix this issue but nothing worked. Your help is greatly appreciated!
HTML snippet added as per recommendation
(It also has some Python code which was done by my friend) form.photo1, 2 and 3 have class = "p" ;
<div class="mtl mbl">
{{ form.photo1 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo2 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo3 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

OnChange event on Input File using JQuery doesnt work properly

Hi every one i have this piece of code:
$("input#fileBrowse").click();
$('#fileBrowse').change(function() {
if($('#fileBrowse').val() != "")
{
//AJAX call to send the file
}
else
{
return;
}
});
#fileBrowse is the id for the input file element, i trigger his event from code.
When someone insert rightly the file path, this code works properly. But if i press the close button in the input file dialog the code doesn't enter in the ELSE statement and send anyway the ajax call with an empty file name. Where's my problem?
<button class="nuovoButton" style="vertical-align:middle" onclick="displayDopdown();">
<span> Nuovo </span>
<div class="dropdown-content-nuovo" id="dropdown-content-nuovo">
<a style="border-bottom:none;" id="newFile" onclick="openFileOption();"> <img src="upload.png" class="a-image"> Carica File </a>
<input type="file" id="fileBrowse" style="display:none" >
<a onclick="createDirectory();"> <img src="create-new-folder.png" class="a-image"> Crea Cartella</a>
</div>
</button>
Here's the markup

using jQuery for buttons/ajax requests

I am fairly new to jQuery, and even though there are a lot of tutorials on how to bind to buttons, I believe my set up is a little more complicated (beyond the scope).
What I have:
-I am using Django to populate my Makes on a view.
Here is my template:
<div class="container">
<div class="row">
<div class="btn-group" id="makesTable">
{% if makes %}
{% for make in makes %}
<button type="button" name="button" class="btn btn-default" id="{{ make.id }}">
<br />
<img class="center-block" src="[REDACTED]" />
<br />
<p>{{ make.name }}</p>
</button>
{% endfor %}
{% endif %}
</div>
</div>
</div>
I am currently having an issue with responsive design. I would like for the buttons to be arranged in a 5x7 grid, however, sometimes, I get the following issue:
This is how it looks when everything is good!
This is the problem. Notice the spacing with a ?
The Workflow:
User sees (35) different buttons to select from. As you can see name, and id are unique, where id is the Primary Key from the database (this is obviously important)
I can capture the primary key using jQuery using this function:
$(document).ready(function() {
$("button").click(function() {
var make_id = $(this).attr('id')
});
});
At the same time, jQuery is going to hide/remove the button elements (trivial)
This is done with the following code snippet (anf adding fadeout to the click listener:
function fadeOut() { $( "#makesTable" ).fadeOut( "slow", function() {}); };
Then I would like to use the id from button clicked to do an AJAX request to my API, where django URL routing is:
url(r'^makes/(?P<pk>[\d]+)/$', views.MakesDetail.as_view(), name='makes-instance'),
in other words, the AJAX request goes to mysite.com/api/makes/(this.id) and returns a JSON file (already set-up thanks to DRF.)
Sample Response:
{
"name": "BMW",
"model": [
{
"name": "2 Series",
},
{
"name": "3 Series",
}]
}
Finally, using this API response, I wish to populate a similar template of buttons (replacing makes with models.)
This is for a single page app in a sense where no page refresh is necessary with the use of JSON and AJAX.
Full disclosure: I am an entry level programmer/web developer.
code snippet:
<div class="main-content container-fluid">
<div class="container">
<div class="row">
<div class="btn-group" id="makesTable">
<button type="button" name="button" class="btn btn-default" id="200002038">
<br />
<img class="center-block" src=" " />
<br />
<p>Acura</p>
</button>
<button type="button" name="button" class="btn btn-default" id="200464140">
<br />
<img class="center-block" src="" />
<br />
<p>Alfa Romero</p>
</button>
<script>
$(document).ready(function() {
$(document).on( "click", "button", function() {
alert($(this).attr('id')); //testing functionality
});
});
</script>
<script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//initialize the javascript
App.init();
});
</script>
</div>
</div>
</div>
</div>

Since the buttons are dynamically generated. You have to make the handler like this:
$(document).on('click', 'button.btn', function(e) {
alert($(this).attr('id')); //testing functionality
});

First of all, event association to buttons should be better via classes (it's a better practice).For the javascript click code check the other answers.
For ajax requests, you can refer to this links:
https://api.jquery.com/jquery.post/
https://api.jquery.com/jquery.get/
https://api.jquery.com/jquery.when/
By example 'when' function, it allows you to know when request ended and execute any actions after.

from your replied comment I expect that you attach the handler before the button already rendered so I recommend you to use bubbling event concept like this:-
$(document).ready(function() {
$(document).on( "click", "button", function() {
alert($(this).attr('id')); //testing functionality
});
});
and the the alert will pop up and you can do whatever else you want to do.