We Keep Coding

Submit button act as collapse and submit

I have a form with some input fields (text-input). Then i have a button at the bottom that says "Continue" and inside the form is a collapse-div (bootstrap 4). When the button is clicked the button moves to the bottom and two checkboxes are visible.
My goal is to make this button act like this:
First time click, the div collapses open and two checkboxes are visible
The button moves down (working at this point) and the submit button changes text to "continue" to "Submit" and it should work as a submit button (not collapse the div again)
This is the code:
<div class="collapse" id="collapseExample">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
label for checkbox 1
</label>
<input class="form-check-input" type="checkbox" value="" id="checkbox2">
<label class="form-check-label" for="checkbox2">
label for checkbox 2
</label>
</div>
</div>
<button type="button" class="btn btn-warning btn-lg" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Continue</button>
I could either use jQuery to remove the first button and append/add a submit button but what would be the best method (use the same button or remove it and append a new submit button). Something ala this:
$('button[data-toggle="collapse"]').click(function() {
/* Remove the "continiue"-collapse button and append a new one */
});
If someone have any idea it would be nice to get som input.
Thanks!

Bootstrap 4 radio button is moving to left when clicked

I have added radio button in a table using bootstrap 4. Whenever I click on any of the radio button it moves slightly to the left. I have added a GIF below
The code of one row from the table is given below.
<table>
<tr class="" data-id='1'>
<td>1</td>
<td>Md. Khairul Basar</td>
<td class="form-inline table_attendance">
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadio" style=" position: relative;"id="exampleRadios1" value="present">
<span class="form-check-sign"></span>
Present
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input pull-right" type="radio"
name="exampleRadio" style=" position: relative;"id="exampleRadios2"
value="absent">
<span class="form-check-sign"></span>
Absent
</label>
</div>
</td>
</tr>
<table>
If you could help me with the code then it would be great.

It seems to me that it does not move, it just simply gets bigger border and visually it looks like it moved. I guess you could solve your problem by adding to your css for the input with type checkbox this css line - box-sizing: border-box;

$('input[type="radio"]').css("box-sizing","border-box");

At first, you don't need position: relative if you don't use any top/bottom/left/right or position in child element.
The problem is due to your custom add CSS, I assume.
Try using box-sizing: border-box; It will force the element to be in original size, even if you use additional padding or border.
For clarification: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Display glyphicon in block immediately when radio button is checked

I have the below form and am using css to display display span when radio button is clicked using the code
<style>
.glyphicon{
display: none;
}
input[type="radio"]:checked + span{
display: block;
}
</style>
<form>
<div class="form-group" id="myform">
<label for="usr">Q1:Are these dates in chronological order?1492,1941,1586 </label>
</div>
<div class="radio">
<label><input type="radio" id="opt0" name="optradio0">yes<span id="sp0" class="glyphicon glyphicon-remove"></span></label>
</div>
<div class="radio">
<label><input type="radio" id="opt1" name="optradio0">no<span id="sp1" class="glyphicon glyphicon-ok"></span></label>
</div>
<br/>
</form>
However there is a problem that the glyphicons are visible when the page is loaded. See link below
http://upscfever.com/upsc-fever/en/apti/en-apti1-chp6a.html
However when i remove the code given below the page works fine. So how can i keep the below code and still achieve the purpose.
<script>
$(document).ready(function(){
$("#header").load("http://upscfever.com/upsc-fever/header.html");
$("#footer").load("http://upscfever.com/upsc-fever/footer.html");
});
</script>

You can inspect the glyphicon in the dev console. Find out it's identifier, and then in your css, set it's initial display to none.
Don't forget to be as specific as possible to future proof it.

Hidding checkbox inside a JQM checkboxgroup

I have a control group with checkboxes that I want them to be hidden initially, which I achieved with css, during runtime I would like to show those checkboxes at a certain time, but only from the control group that I specify because there are many of them on the page.
The problem that I'm having is to select the visual checkbox since it is being rendered as a "::after" text and I don't know how to select it using JQuery.
<div data-role="controlgroup" id="test-list">
<label for="id1">
<a href="#" onclick="alert('The list item has been clicked.'); event.stopPropagation(); return false;">
<h2>Title</h2>
<p>Description Text</p>
</a>
</label>
<input type="checkbox" id="id1" />
</div>
will render as:
<div class="ui-checkbox">
<label for="id1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off ui-first-child">
<a href="#" onclick="alert('Clicked'); event.stopPropagation(); return false;" class=" ui-link">
<h2>Title</h2>
<p>Description</p>
</a>
::after <!-- This is what renders as the checkbox -->
</label>
<input type="checkbox" id="id1" name="p1">
</div>
I tried a few tricks but can't select the "::after" which is what draws the checkbox inside the list.
$("#test-list label").first().next()
$("#test-list label").children().eq(0).next()
The css when the page loads to hide them:
.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after
{
visibility: hidden;
}

jQuery cannot access pseudo elements like :after because they are not really in the DOM. You might get what you want by adding and removing a class that hides the :after element. First create a new CSS class:
.hiddenCheck:after {
display: none !important;
}
Then apply it to the <label> that jQM creates for the checkbox:
$("#id1").parents(".ui-checkbox").find("label").toggleClass("hiddenCheck");
NOTE: different selectors can get you there (e.g. closest(), etc.).
DEMO
Click the button to hide/show the checkbox...

Adding active class doesn't affect toggle button in Twitter Bootstrap

I have a form with multi checkbox which is required field that I turned into twitter bootstrap toggle buttons.
I am trying to activate a selection button with js, by adding 'active' class to it.
I am able to add the class but when saving the form I am getting an error that the field is required.
What am I missing?
Here is the form.
<div id="reminder">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_1" value="1" title="Choose at least one reminder option">Now</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_2" value="30" title="Choose at least one reminder option">30m</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_3" value="60" title="Choose at least one reminder option">1h</label>
<label class="btn btn-primary active">
<input type="checkbox" name="reminder" id="id_reminder_4" value="120"
title="Choose at least one reminder option">2h</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_5" value="1440"
title="Choose at least one reminder option">1d</label>
</div>
</div>
This is how I am adding the class:
$('#reminder label:eq(3)').addClass('active')

You're only adding the class, but you don't actually select it. Add the selected attribute and it will work:
$('#reminder label:eq(3)').addClass('active').attr('selected',true);
Here is a demo

Add class open not active to open the dropdown (if thats what you are trying to do). You have to add the class to <li class='dropdown open'> which hosts the <ul class='dropdown-menu'>

btn-primary is the css that will make your buttons blue. It looks like this is what you are using for inactive buttons because the way you have your code, all the buttons should be blue. If you are trying to make the button grey because grey will be your active button, then you can use removeClass('btn-primary'). This will turn it grey. Hope this helps.