We Keep Coding

Adding list items using jquery

Please check my code. The code adds the list item but it suddenly disappears. Kindly let me know the error in my code.
<button type="submit" class="btn btn-primary" id="needButton">Need</button>
<button type="submit" class="btn btn-primary btn-success" id="haveButton" >Have</button>
</form>
<div class="myNeed">
<ul class="need">
<li>
The needed items are
</li>
</ul>
</div>
This is js code
$(document).ready(function() {
$("#needButton").click(function () {
var needed = $("#bill").val();
$(".need").append("<li>" + needed + "<li>");
});
});

The issue is because the button click triggers the form to be submit which redirects the page.
To fix this, hook your event handler to the submit event of the form element and call preventDefault() on the event. Using this methoid over change the button type means that users can still trigger the action by pressing the return key on the keyboard when the input has focus.
jQuery($ => {
$("form").on('submit', e => {
e.preventDefault();
var needed = $("#bill").val();
$(".need").append(`<li>${needed}</li>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<form>
<input type="text" id="bill" />
<button type="submit" class="btn btn-primary btn-success" id="haveButton">Have</button>
</form>
<div class="myNeed">
<ul class="need">
</ul>
</div>

i think there is a typo you write id=haveButton but in js code you type #needButton try change that to #haveButton

i did a simple code for here i hop it will help you
<button id="add">Have</button>
<ul class="need"></ul>
<script>
$(document).ready(function () {
$("#add").click(function () {
var needed = '123.';
$(".need").append("<li>" + needed + "</li>");
});
});
</script>

VueJS combine v-on click functionality

I was trying to combine functionality upon clicking the button in VueJS. Is it possible to run both in one click function? see below the two codes:
v-on click triggers function:
<button class="btn" type="button" #click="doingsomething">Btn1</button>
v-on click assign a value:
<button class="btn" type="button" #click="activeBtn = 'btn1'" :class="{active: activeBtn === 'btn1' }">Btn1</button>

Try this;
<button class="btn" type="button" #click="doingsomething();activeBtn='btn1'" :class="{active: activeBtn === 'btn1' }">Btn1</button>

How may I get the value of a button when a user clicks on it?

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);
});

Displaying the selected value in JavaScript

i am using bootstrap btngroup to select one value ..how can i display that selected value ?? here is my code.
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="fun" data- title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
</div>
<input type="hidden" name="fun" id="fun">
</div>
and JS
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data- title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})

Tidy your code - remove the spaces in your data- title attribute, in both the HTML and JS, as these are causing it to break.
Add a <div id="display"></div> in your HTML somewhere and style it how you like.
Add this line to your JS click handler: $('#display').html(sel);
Here's a demo.
If you'd prefer the result to be the text of the radio button instead of the value, use $('#display').html($(this).html()); instead in step 3.
Done.

Not sure if this is what you mean, but to get the value (or text) from a clicked button in a button group, I use for example.....
HTML
<div id="aBtnGroup" class="btn-group">
<button type="button" value="L" class="btn btn-default">Left</button>
<button type="button" value="M" class="btn btn-default">Middle</button>
<button type="button" value="R" class="btn btn-default">Right</button>
</div>
<p>
<div>Selected Val: <span id="selectedVal"></span></div>
JS
$(document).ready(function() {
// Get click event, assign button to var, and get values from that var
$('#aBtnGroup button').on('click', function() {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
console.log(btnText + ' - ' + btnValue);
$('#selectedVal').text(btnValue);
});
// You can use this to set default value upon document load
// It will fire above click event which will do the updates for you
$('#aBtnGroup button[value="M"]').click();
});
CONSOLE OUTPUT
Left - L
Middle - M
Right - R
Hope this helps
Plunker here

Twitter bootstrap managing multiple radio buttons through Javascript in rails

I am using twitter bootstrap in my rails app, and I am constructing a form with multiple radio button inputs. In order to manage the form data, I have created a hidden field whose value is updated via Javascript.
Sample code below for any given input:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
<button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
</div>
<input type="hidden" id="ornamental_only" name="ornamental_only" value="">
Here is the Javascript to manage this event:
<script>
var btns = ['ornamental_only_yes', 'ornamental_only_no'];
var input = document.getElementById('ornamental_only');
for(var i = 0; i < btns.length; i++) {
document.getElementById(btns[i]).addEventListener('click', function() {
input.value = this.value;
});
}
</script>
My question: Is there a way to abstract the Javascript code in such a way as to apply to multiple radio button inputs simultaneously? (For instance, if I had 3 repetitions of the code block above with different id's)

Let's assume this is your HTML with multiple sets of buttons:
<div class="btn-group" id="btn_group_1" data-toggle="buttons-radio">
<button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
<button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_1" name="ornamental_only" value="">
<div class="btn-group" id="btn_group_2" data-toggle="buttons-radio">
<button type="button" class="btn" id="awesome_only_yes" name="awesome_only" value="yes">Yes</button>
<button type="button" class="btn" id="awesome_only_no" name="awesome_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_2" name="awesome_only" value="">
To dynamically listen for clicks on all button groups, you could do something like this (untested jQuery):
$('.btn-group .btn').on('click', function() {
var parentID = $(this).parent().attr('id');
$('#hidden_' + parentID.substr(parentID.length - 1)).val($(this).val());
});
This just targets the hidden input fields based on the number at the end of the id.

Try using this:
for(var i = 0; i <= btns.length; i++) {

Use jQuery.
var buttonObjs = $(".btn-group").find("button");
buttonObjs.click(function(){
$("#ornamental_only").val(this.value);
});
To apply this code to multiple blocks, all you need to do is assign a specific class to the btn-group element, something like,
<div class="btn-group js_radio_toggle">
In the js code just use,
var buttonObjs = $(".btn-group.js_radio_toggle").find("button");
now this code can be reused anywhere.
also in your js code. you can do this,
document.getElementsByClassName("js_radio_toggle").
But I would recommend you to use jQuery.