We Keep Coding

javascript show/hide not working as expected with html field

The following is the chose I am using to let the user manually choose working/starting time.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1,#id_2').show();
} else {
$('#id_1,#id_2').hide();
}
});
</script>
By default the field should be hidden, but it is not. Instead even in the checkbox is not checked, the field is visible and to make it hidden I had to check the box and uncheck it again. Then the input field goes hidden. How can i fix this ?
Here is the jsfiddle link, it shows the same problem.
https://jsfiddle.net/shijilt/bs02m98w/

The code is only changing the visibility after clicking the #beastmode element. There's no explicit default otherwise.
You can hide it when the page loads:
$(function () {
$('#id_1,#id_2').hide();
});
Or, even better, style it to be hidden by default in your CSS:
#id_1,#id_2 {
display: none;
}
That way it's hidden by default from the styling itself, regardless of whether or not any JavaScript code successfully executes.
Example

Almost you code is fine. Try this it will work definitely.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1" style="display:none;">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1').show();
} else {
$('#id_1').hide();
}
});
</script>
First you have to hide div where id=#id_1 there are many ways to hide but i use simple method to hide it by display: none; in the style.
Second when you click on checkbox if its true its show the div where id=#id_1 else it will hide the div. If you pass two ids which is wrong because its not found #id_2 in the page that's the reason which not show/hide your content.

Adding Class to selected button

I'm using this button group structure. Now I need to add class active to each button when I click on it. And remove from it when I click on another button. This is my HTML structure, is something like that:
<div id="donation-pricecontainer" class="section donation">
<h3>Select a contribution amount.</h3>
<div class="field button 18294784 required btn-float"><label for="18294784"><button id="18294784" name="donation-level" class="required" type="button" value="50.000000" maxlength="255">$50<span class="label btn-value">$50.00 - test</span></button></label></div>
<div class="field button 18294785 required btn-float"><label for="18294785"><button id="18294785" name="donation-level" class="required" type="button" value="100.000000" maxlength="255">$100<span class="label btn-value">$100.00 - test</span></button></label></div>
<div class="field button 18294786 required btn-float"><label for="18294786"><button id="18294786" name="donation-level" class="required" type="button" value="500.000000" maxlength="255">$500<span class="label btn-value">$500.00 - test</span></button></label></div>
<div class="field button 18294787 required btn-float"><label for="18294787"><button id="18294787" name="donation-level" class="required" type="button" value="1000.000000" maxlength="255">$1,000<span class="label btn-value">$1,000.00 - test</span></button></label></div>
<div class="field button 18294788 required btn-float"><label for="18294788"><button id="18294788" name="donation-level" class="required" type="button" value="2000.000000" maxlength="255">$2,000<span class="label btn-value">$2,000.00 - test</span></button></label></div>
<div class="field radio other-option required other-btn"><label for="other-option"><input id="other-option" name="donation-level" class="required" type="button" maxlength="255"><span class="label">Or choose your own amount.</span></label></div>
<div class="field text other-amount"><input id="other-amount" name="other-amount" class="otherAmount" type="text" placeholder="$0.00"></div>
</div>

Try this way:
$("button[class=required]").click(function (e) {
$("#" + e.currentTarget.id).addClass("selected");
$("button[id!=" + e.currentTarget.id+"]").removeClass("selected")
})
On click I select a button and I set a new class on it, if I click the second time the same button, the button become default without new class

You can follow this simple code pattern , initially on click removing the active class from all button and then add active to the clicked one
$(document).ready(function(){
$(".btn").click(function(){
$(".btn").removeClass("active");
$(this).addClass("active")
})
})
.active{
background:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">btn</button>
<button class="btn">btn</button>
<button class="btn">btn</button>

This is not fairly a good question but I still want to try to help. Firstly you have to learn is how to add/remove/toggle class of a specify dom. In your case, it is a button. Please check this doc.https://developer.mozilla.org/en-US/docs/Web/API/Element/classList.
Next, you have to learn how to programing to resolve nature problems. In your case, every time a button is clicked, it's required to know the activated button previously and remove the class. And then add the class to the current button.
That's all you need to know about it. Go translate them to real code, you must do it by your self.

Bootstrap multiple popover display and placement

I have multiple form input and text fields on which I want a popover to display when the field is in focus. Since the content of some of the popovers can be lengthy I don't want to declare the content inside the input tag. Instead I have the following:
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-tooltip-trigger" id="name" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>
I have the following javascript
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function () {
return $(correct tool tip).html();
}
});
});
How can I get the correct popover to display or returned in the above javascript. What if I add a data attribute to the tool-tip content to link it to each input field e.g <div class="js-tooltip" style="display:none;" data-tooltip="name"> and then use some jquery to find and return it. How would you do this with jquery? Does anyone have a more elegant solution?
Also how do I get the popover to remain with the input field and auto position upon window resize. Currently it floats away when I resize the window.
Manage to figure it out myself using the above html:
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function (e) {
return $(this).parent(".form-group").find(".js-tooltip").html();
}
});
});
Can anyone think of a more elegant solution?

You can do like this way...Here is the DEMO
Jquery Part
$(function(){
// Enabling Popover Example 1 - HTML (content and title from html tags of element)
$("[data-toggle=popover]").popover();
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$(".form-control").popover({
html : true,
content: function() {
return $('.js-tooltip').html();
},
title: function() {
return $('.js-tooltip').html();
}
});
});
HTML Part
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-popover-trigger" id="name" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your name" >
<div class="js-tooltip" style="display: none;" id="n1">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-popover-trigger" id="ref" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your reference is optional">
<div class="js-tooltip" style="display: none;" id="t2">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>

I'm not a fan of how this works, but essentially you have to create an element that stays in the position you want the popover , and append the popover to it. In this case, I have used the container you already have in place for the tooltip html. I'm creating container ID's dynamically so you don't have to worry about doing that in your html.
So for this HTML:
<div class="form-group pos-relative">
<label for="ref">Reference</label>
<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50">
<span class="js-tooltip" style="display: none;">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</span>
</div>
This CSS:
.pos-relative{
position:relative;
}
.js-tooltip{
position:absolute;
top:0;
right:0;
}
And this JS--here's where it happens:
$(function () {
$('.js-tooltip-trigger').each(function(ind, ele){
var $ele = $(ele),
$ttSpan = $ele.next('.js-tooltip'),
ttHtml = $ttSpan.html(),
rndID = 'ttid'+ String(Math.random()).substr(2);
// set the ID, strip the style, and empty the html--
// we already have it stored in the var above
$ttSpan.attr('id', rndID).removeAttr('style').html('');
// make the popovers
$ele.popover({
html: true,
trigger: 'focus',
placement: 'right',
container: '#'+rndID,
content: ttHtml
});
});
});
See it in action here

Using javascript to automatically create input-group from Bootstrap 3

I'm trying to use javascript to automatically modify my input boxes to
<div class="input-group">
**<input type="text" class="form-control " placeholder="Text input">**
<span class="input-group-addon">*</span>
</div>
jsfiddle: http://jsfiddle.net/BEC7N/
The bold line is the line that already exists.
Below is my javascript attempt
$('[data-val-required]').prepend(' <div class="input-group">');
$('[data-val-required]').append(' <span class="input-group-addon">*</span></div>');
But it doesn't work. Any ideas? Thank you.

Change your code to this:
$('[data-val-required]').wrap(' <div class="input-group"></div>');
$('[data-val-required]').after(' <span class="input-group-addon">*</span>');
$('[data-val-required]').after(' <span class="required-indicator">*</span>');
Working Example

Use .wrap()
$('[data-val-required]').wrap('<div class="input-group" />');
$('[data-val-required]').after(' <span class="input-group-addon required-indicator">*</span>');

Cannot hold div when select email from autocomplete list

Below script will create effect fade in and fade out when user hover mouse into login box
<script>
$("#login").hover(function() {
$("#loginForm").slideToggle('500').css('display', 'block');
}, function() {
$("#loginForm").slideToggle('500')
});
</script>
but when i want select my email from <input type="name" name="email_address" />
this div #loginForm will automatically closed :
so how to keep this box always show when user select their email address from autocomplete list ?
This issue only happen in browser mozilla firefox.
FYI : change to <input type="name" name="Email" /> .. this will list your gmail email address
Jsfiddle

As the drop-down is created by the browser, jQuery thinks the mouse leaves #login and will slide up again. To prevent this from happening, you could add an delay to the slideUp animation. I created a fiddle to show you what I mean.
$("#login").hover(function () {
$("#loginForm").clearQueue().slideDown(500);
}, function () {
$("#loginForm").delay(1500).slideUp('500');
});
Note the clearQueue() method. This will make sure that when the user has selected an email and has its mouse over the element with #login it will prevent the slideUp() from happening.

I rewrote your HTML and script. I'm keeping the login box open if the textbox is still on focus. Also changed slideToggle to slideUp/slideDown You can try this
HTML
<form>
<p id="login">
<span class="label">Login Here</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" name="email_address" id="email"/></span> </span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" id="pass"/></span> </span>
<span class="form-elements">
<span class="submit-btn"><input type="submit" value="Submit" /></span>
</span>
</span>
</p>
</form>
Script
$("#login").hover(function() {
$("#loginForm").slideDown('500').css('display', 'block');
}, function() {
if($('#email').is(":focus") || $('#pass').is(":focus")) return false;
$("#loginForm").slideUp('500')
});
Demo: http://jsfiddle.net/r6sQP/4/

I think it will be better without 500 millisec:
$("#loginForm").slideToggle().css('display', 'block');