Get value from html button attribute - javascript

I have the following likert scale:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled style="width:10px">Not<br />Fearsome</a>
<button id="fear1" type="button" name="gender" class="btn btn-default likert-1" val="0">1</button>
<button id="fear2" type="button" name="gender" class="btn btn-default likert-2" val="1">2</button>
<button id="fear3" type="button" name="gender" class="btn btn-default likert-3" val="2">3</button>
<button id="fear4" type="button" name="gender" class="btn btn-default likert-4" val="3">4</button>
<button id="fear5" type="button" name="gender" class="btn btn-default likert-5" val="4">5</button>
<a class="btn btn-link disabled" disabled style="width:10px">Extremely<br />Fearsome</a>
</div>
</div>
I am trying to access the 'val' attribute from a script by using:
$('#fear').val($(this).getAttribute('val'));
but this does not seem to work.
Note: #fear is the id of a hidden variable

getAttribute is a standard DOM method but you are trying to call it on a jQuery object.
Either use a standard DOM object:
this.getAttribute('val')
or use the jQuery attr method:
$(this).attr('val')
Note that val is not a valid attribute for the button element. Consider data-val instead.
Alternative, avoid adding an extra attribute with redundant information in the first place.
$(this).text();

none of the element has id "fear", check u have named them like fear1, fear2, fear3 ....
try
$(this).attr('val');

Try this: $('#fear').attr('val');

As suggested by #DimalChandrasiri, use
$(this).attr('val') or $('#fear').attr('val')

Related

use button on form without submit

I created a form in which I need to use these two tags. My problem is that every time the user clicks on it, the form is submitted. I used onclick="return false" as follows, but the values ​​are not sent in the url Query.
<div class="btn-group d-flex justify-content-center col-11 mx-auto" role="group">
<button type="radio" onclick="return false" name="type" value="rent" class="btn btn-lg btn-light pr-4 pl-4" id="left">YES</button>
<button type="radio" onclick="return false" name="type" value="sale" class="btn btn-lg btn-light pr-4 pl-4" id="right">NO</button>
</div>
<div class="col-11 mx-auto">
<button class="btn btn-block btn-danger">Submite</button>
</div>
<button type="radio"
Radio buttons are input elements, not button elements. They are also empty/void elements which can't have children, so use a label element instead.
<input type="radio" name="type" value="rent" class="btn btn-lg btn-light pr-4 pl-4" id="left">
<label for "left">Yes</label>
Note that screen reader software tends to read out content in all-caps letter-by-letter. Write in normal sentence case and use the CSS text-transform property to present it in upper-case instead.

trying to make a value true on click with an if statement

I am trying to change between colors on click in jquery. According to the picture below I have the default value
and then in this image when I click on the input box and then back on a button the background color stays on the input box rather than dissappears when any other button is clicked.
i'd like the background color to disappear when any of the buttons are clicked.
here is my jquery:
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
else{
$(this).removeAttr("background-color")
$("#default").addClass('active');
}
});
and here is my html:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
</fieldset>
</div>
any help would be appreciated!
Try
$(this).css("background-color", "")
Instead of this
$(this).removeAttr("background-color")
You cannot remove the background-color like this as it is not an attribute.
On click of button you should remove the class active from the donation-amount
what you have written will only work as toggle on the custom button only. Its not interacting with rest of the buttons.
Flow should be to remove class from custom button if any button is hit and if custom button is hit remove class from any of button.
$(".selectvalue").each(function(){
$(this).click(function(){
$("#donation-amount").removeClass('active');
})
});
$("#donation").click(function(){
$(".selectvalue").removeClass('active');
})
Is this the functionality you are looking for? Also added in fiddle
Instead of background color, just use the .active class
$('#donation-amount,#default, #btn2, #btn3').click(function(event) {
//add any other checks you want here
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
$("#donation-amount").removeClass('active');
$(event.target).addClass('active');
});
.active{
background-color:#c97e06;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
I thought this code satisfied your requirement.
if your problem is not solve then write comment in explain then I can do it.
Please vote for me.
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
console.log("hello");
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
});
$("body").on("click","#default,#btn2, #btn3",function(){
//console.log($(this));
$("#donation-amount").css("background-color","rgb(255,255,255)");
//$("#default").addClass('active');
}
This seems a bit complicated the way you have it. This is a classic "choice highlight" scenario and is easily handled with a simple $(this).addClass('active').siblings().removeClass('active'); to set and remove the active highlight.
I also took the liberty of making the assumption you want some CUSTOM amount so I added a simple input for that to use with the CUSTOM button. I also simplified the custom button by using the data attribute and removed the code from that as frankly it seemed weird to have in there.
HTML with some adjustments:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" class="btn btn-default selectvalue hover-color choice default active " value="50">50</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="100">100</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="150">150</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="" id="donation-amount" data-defaultvalue="57">Custom</button>
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
<div class="container">Custom Amount
<input id="customamount" type="text" value="67" />
</div>
Code that sets the color using an active class and sets the custom amount in the hidden field (or default if it has none)
$(".choice").on('click', function() {
if ($(this).is("#donation-amount")) {
var mydefault = $(this).data("defaultvalue");
// use custom amount if it has one, otherwise use this custom default
this.value = $('#customamount').val() || mydefault;
}
$(this).addClass('active').siblings().removeClass('active');
$('#donation-amount-value').val(this.value);
$('#display-amount').text('$'+this.value);
});
CSS:
.active {
background-color: #c97e06;
}
You can play around with it here: https://jsfiddle.net/MarkSchultheiss/6Lj62ngs/1/

getting default value to display when page loads

I am trying to get a default value to display when the page loads.
I am trying to get the first button to always show by default in the display-donation div whenever someone navigates to the form.
At the moment, this is what it looks like when the page loads. 10 is highlighted but does not display.
Here is my html
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="15">15</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="20">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
Here is my JS
$(document).ready(function() {
$('#donation-amount').keyup(function() {
$('#display-amount').text($(this).val());
});
$( ".selectvalue" ).click(function() {
$('#display-amount').text($(this).val());
});
$(".buttons .btn").click(function(){
$(".buttons .btn").removeClass('active');
$(this).toggleClass('active');
});
});
any help would be appreciated!
You're currently asking for the value attribute of the display-amount div, which of course doesn't exist. You want something like $('#display-amount').text($('.active').val()); instead.
Try this - change line 3 to:
$('#display-amount').text($('button.active).val());
You need to show the class .active amount
Taking the amount from this:
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>

javascript function not recognized inside bootstrap dropdown button

I'm trying to build a Bootstrap button dropdown list, where each element in the list calls a function and pass its id into it. My js functions are defined in an object called Search, which is instantiated on page load. Here's my setup.
<div class="input-group">
<div class="input-group-btn" role="group">
<button type="button" id='filelist' class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" onclick='search.print()'>
List Of <span class="caret"></span></button>
<ul class="dropdown-menu" id='filelist_ul' role="menu" >
<li><a id='var1' onclick='search.print(var1)'>Var1</a></li>
<li><a id='var2' onclick='search.print(var2)'>Var2</a></li>
</ul>
</div>
<input type='text' class='form-control' id='uploadtype_text' readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" name='filelist'>
</span>
</span>
<input type="text" class="form-control" readonly>
<div class='input-group-btn'>
<input type="submit" name="uploadfile_form" value="Submit" class="btn btn-danger"/>
<button type='button' name='clear' class='btn btn-success' onclick='search.clearResults()'>Clear</button>
</div>
</div>
search.print() gets called correctly when I attach it to the main "List Of" button, however, when I click any of the li elements, I'm getting the error
search.print is not a function
I've gotten this working before in other cases, but for some reason this is breaking, and I can't figure it out. I seems like a syntax error or something I'm missing. The variable search doesn't look like it's getting overridden either. I don't get it.
Here's a fiddle
https://jsfiddle.net/rnxx4rnc/
You need to bind search to the window object.
$(function() {
window.search = new Search();
});

How to change class name of a button

I have four buttons like this
<div class="btn-group">
<button id="btn-men" class="btn btn-default active"
i18n:translate="men">Men</button>
<button id="btn-women" class="btn btn-default" i18n:translate="women">Women</button>
<button id="btn-kids" class="btn btn-default" i18n:translate="kids">Kids</button>
</div>
And I have different css styles for the class "btn btn-default active" and "btn btn-default". what I want to know is if there is any way of changing the class name of the clicked button as btn btn-default active from btn btn-default and also change the unclicked button as btn btn-default during run time.
I also use i18n for mulitilingual purpose.
Use addClass() and removeClass() for this purpose
$(".btn-default").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
Demo
Looks like you are using bootstrap, so solve it using bootstrap way
<div class="btn-group" data-toggle="buttons">
<label id="btn-men" class="btn btn-default active">
<input type="radio" name="options" id="option1" checked /> Men
</label>
<label id="btn-women" class="btn btn-default">
<input type="radio" name="options" id="option2"/> Women
</label>
<label id="btn-kids" class="btn btn-default">
<input type="radio" name="options" id="option3"/> Kids
</label>
</div>
Demo: Fiddle
Look at the radio example under bootstrap buttons

Categories