well guys i need to know how give a button a name like dont paye attention to the link it's not that necessary:
<button class="btn btn-success pull-right" name="next">Suivant</button>
here what i did in javascript but i need to add the attribute "name" with value "next" in "q" button
function(a){a.fn.smartWizard=function(m){var c=a.extend({},a.fn.smartWizard.defaults,m),x=arguments;
return this.each(function(){function C(){var e=b.children("div");
b.children("ul").addClass("anchor");
e.addClass("content");
n=a("<div>Loading</div>").addClass("loader");
k=a("<div></div>").addClass("actionBar");
p=a("<div></div>").addClass("stepContainer");
q=a("<a>"+c.labelNext+"</a>").attr("href","#").addClass("btn btn-default pull-right");
r=a("<a>"+c.labelPrevious+"</a>").attr("href","#").addClass("btn btn-default pull-left");
s=a("<a>"+c.labelFinish+"</a>").attr("href","#").addClass("btn btn-success pull-right");
c.errorSteps&&0<c.errorSteps.length&&a.each(c.errorSteps,function(a,b){y(b,!0)});
p.append(e);
k.append(n);
b.append(p);
b.append(k);
c.includeFinishButton&&k.append(s);
k.append(q).append(r);
How about using the attr() function like you use for defining a href:
$('#yourButton').attr('name', 'yourName');
To create a button on the fly:
var btn = $('<button/>').attr('name', 'next').addClass('btn btn-success pull-right');
Which results in the following HTML:
<button class="btn btn-success pull-right" name="next"></button>
Related
So I have 5 buttons at the top of my webpage:
<button class="btn btn-sm btn-outline-primary" id="inbox" name="mailbox">Inbox</button>
<button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
<button class="btn btn-sm btn-outline-primary" id="sent" name="mailbox">Sent</button>
<button class="btn btn-sm btn-outline-primary" id="archived" name="mailbox">Archived</button>
<a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
As you can see, I've already given all 5 buttons the same class because I'm using Bootstrap and I've already given them all individual id's. The problem is I want to apply a function to just three of the buttons (inbox, sent and archive) so I planned on giving 3 of the buttons the same name attribute. I discovered that if you want to use name in document.querySelectorAll() I can give the 3 mailboxes a name attribute of "mailbox" and then do something like:
document.addEventListener('DOMContentLoaded', function(){
document.querySelectorAll('[name="mailbox"]')
But at the end of this querySelectorAll I want to add a .forEach() but I can't figure out how I would do that. Would it be something like this? :
document.addEventListener('DOMContentLoaded', function(){
document.querySelectorAll('[name="mailbox"]').forEach([name="mailbox"] => {
[name="mailbox"].onclick = function(){....
}
Alternatively I saw that you can use multiple id's in querySelectorAll but then I ran into the same problem of not really knowing how to correctly syntax the rest of the statement:
document.querySelectorAll('#inbox, #sent, #archive').forEach(inbox, sent, archive)...?
The right way to do this is to use a common class for those three buttons.
Then, you can put the result of the querySelectorAll in an array and iterate over each element using forEach to set the click listeners:
document.addEventListener('DOMContentLoaded', function(){
const mailboxElements = [...document.querySelectorAll('.mailbox')];
mailboxElements.forEach(mailboxElement => {
mailboxElement.onclick = function(){
console.log("mailboxElement: " + this.id);
}
})
})
<button class="btn btn-sm btn-outline-primary mailbox" id="inbox">Inbox</button>
<button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
<button class="btn btn-sm btn-outline-primary mailbox" id="sent">Sent</button>
<button class="btn btn-sm btn-outline-primary mailbox" id="archived">Archived</button>
<a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
I have four buttons:
<button id="button-yardSize" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize" class="btn btn-success" value="4"><h1>4</h1></button>
<button id="button-yardSize" class="btn btn-success" value="6"><h1>6</h1></button>
<button id="button-yardSize" class="btn btn-success" value="8"><h1>8</h1></button>
And I want to capture the value of the button clicked so that I may add it later with another button and add them together.
I added this for the JS:
var inputYardSize = $("#button-yardSize").on("click", function(){
$("#button-yardSize").val();
console.log(inputYardSize);
});
I read that I may need to use .attr instead, however not sure how to add a custom attribute to the buttons?
First of all, you should use a class, not an ID. IDs should be unique, and $("#button-yardSize") will only select the first button.
In the event listener you can use this to refer to the button that was clicked.
You need to assign the inputYardSize variable inside the function. .on() just returns the jQuery object you're binding the handler to, not the value from inside the function.
$(".button-yardSize").on("click", function() {
var inputYardSize = $(this).val();
console.log(inputYardSize);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success button-yardSize" value="2"><h1>2</h1></button>
<button class="btn btn-success button-yardSize" value="4"><h1>4</h1></button>
<button class="btn btn-success button-yardSize" value="6"><h1>6</h1></button>
<button class="btn btn-success button-yardSize" value="8"><h1>8</h1></button>
EDIT: You should use ID for unique elements and class for repeating element.
So if you would replace the ID with class on the button, the code should look like this:
Remove the declaration from the beginning and instead use it to store the values inside the click function.
In this way, you will have the value of the clicked button with the specified class.
$('.button-yardSize').on('click', function(){
var inputYardSize = $(this).val();
console.log(inputYardSize);
})
The id of each element has to be unique
<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>
The JS function is incorrect, you need a click handler which will log the button value
$("#button-yardSize1").on("click", function(){
inputYardSize=$("#button-yardSize1").val();
console.log(inputYardSize);
});
How to disable a button on click and replace that button with another button with different function using AngularJS?
The following is my button,
<button type="submit" class="btn btn-small btn-default"
ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">
<span class="glyphicon glyphicon-edit"></span> Edit Setting</button>
you can use a state setting, say $scope.showFirstButton=true to control when to show the submit button:
<button ng-show="showFirstButton" type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">Edit Setting</button>
and another button, showing them alternatively:
<button ng-show="!showFirstButton" type="submit" class="btn btn-small btn-default" ng-click="doSomethingElse()">Seccond Button</button>
In the controller method $scope.editSetting() you change the value of the state: $scope.showFirstButton = !$scope.showFirstButton'.
Edit: if you need to revert the state of the buttons, do the same thing in the second method:
$scope.doSomethingElse = function(){
//some cool things happen here, and:
$scope.showFirstButton = !$scope.showFirstButton
}
and this will get back the first button and hide the second.
I'm using Bootstrap as framework.
I'm new in JS so help me out.
I need a "button value" to change when clicked.
Button looks like this:
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
And here is my JS:
<script>
function sayThanks(){
var element = document.getElementByld('btn_out');
element.innerHTML="Tack";
</script>
It's place between "head" tags.
Why doesn't it work?
Change getElementByld to getElementById(with an I) and close the function curly brace
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
You have couple of problems
1.getElementById misspelled
2.Missing closing }
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
Well, it looks like you misstyped the function getElementByld and did not close the whole function itself. If you changed it to getElementById it is probably going to work.
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
function sayThanks(){
var tE = document.getElementById('btn_out');
if (tE) tE.innerHTML = 'Tack';
}
Furthermore, I would just pass the element to the function instead of searching for it, since it is the caller anyway.
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks(this)" value="out">Ut</button>
function sayThanks(e){
e.innerHTML = 'Tack';
}
I think this code will help you
html:
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" value="out">Ut</button>
javascript:
document.getElementById("btn_out").onclick = sayThanks;
function sayThanks(){
this.innerHTML="Tack";
}
Fiddle
You have misspelled the getElementById: getElementById not getElementByld
http://jsfiddle.net/hn0j9tra/
If you use inline javascript, you should provide an id as a parameters into your function:
<script>
function sayThanks(id){
document.getElementById(id).innerHTML="Tack";
}
</script>
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" value="out" onclick="sayThanks(this.id)">Ut</button>
Working demo
I'm beginning with jQuery and using it with twig/Symfony 2.
I have a little problem : when I use this in a loop :
<a href="#" id="dialog_link"><button type="button" id="button_id" id-uservalue="{{user.id}}" class="btn btn-danger btn-xs">
Delete
</button></a>
Only the 1st Button works, the other just dont. I checked the value of {{user.id}} it changes.
This is the jQuery code :
click : function() {
var id_user = $('#button_id').attr('id-uservalue');
Thanks a lot, internet friends !
Since id is unique, you need to use class instead:
<a href="#" id="dialog_link"><button type="button" class="button_id" id-uservalue="{{user.id}}" class="btn btn-danger btn-xs">
then you can use:
click : function() {
var id_user = $(this).attr('id-uservalue');