We Keep Coding

I want to preview HTML form data in pop window before submit. How to do that using JavaScript?

Following is my HTML Code having two buttons, Preview and Submit. I want to pop a window showing form preview when click on Preview and then submit the form when I click on Submit.
<form action="">
<div class="search-form">
<div class="form-header">
<h4>Post a New Job</h4>
</div>
<label for="job_title">Job Title</label>
<input type="text" name="job_title" id="job_title" placeholder="Hiring for which position">
<label for="company">Company Name</label>
<input type="text" name="company" id="company" placeholder="Name of the hiring organization">
<label for="experience-required">Total Experience Required</label>
<div class="input-range">
<input type="number" min="0" max="50" name="experience-required-min" id="experience-required-min"
placeholder="Min in Years">
<span>To</span>
<input type="number" min="0" max="50" name="experience-required-max" id="experience-required-max"
placeholder="Max in Years">
</div>
<label for="salary-range">Salary Range</label>
<div class="input-range">
<input type="number" min="0" max="50" name="salary-range-min" id="salary-range-min"
placeholder="Min in Lpa">
<span>To</span>
<input type="number" min="0" max="50" name="salary-range-max" id="salary-range-max"
placeholder="Min in Lpa">
</div>
</div>
<label for="job-desciption">Job Description</label>
<textarea name="job-desciption" class="input-range" placeholder="Enter Job Desciption"
style="height: 100px"></textarea>
</div>
<br>
<a href="" <button class="btn btn-lg btn-warning" type="submit" name="search">Post</button>
</a>
<a href="" <button class="btn btn-lg btn-warning" type="submit" name="search">Preview</button>
</a>
</form>

You can do this using modals , you can use Bootstrap or Materialize css I'll link them below.
Bootstrap
https://getbootstrap.com/docs/5.1/components/modal/
materialize
https://materializecss.com/modals.html#!
After you implement a modal in your app you can easily use it's buttons to submit your form or cancel.
please let me know if this hepled

First, the preview button type should be button and not submit. Button with type as submit causes the form to submit. Also, do not wrap the button within the <a> anchor tag. That is unnecessary.
<!-- Note the use of type="button" -->
<button class="btn btn-lg btn-warning" type="button" name="search">Preview</button>
Second, you will need a JavaScript code to handle click handler. You can do something like this:
// Get reference to the preview button
const previewButton = document.querySelector('.search-form button[type="button"]');
previewButton.addEventListener('click', () => {
// Step 1: Read form data here using DOM APIs
// Step 2: Open preview using some modal dialog.
window.alert(/* Show form data */);
// Or use some other bootstrap or equivalent library dialog box.
});
There are many ways to write the JavaScript. Choose one that works best for you.

How to validate bootstrap radio buttons

I am trying to validate this section of the form but whichever button is selected, option1 returns false. How can I get each radio to have different values when they are active/inactive or alternatively get a value from the button-group?
$(function register(){
$('.err').hide();
$("#submit").click(function() {
if ($('#option1').prop("checked", false)){
$("#fcerr").show();
}
if ($('#option1').prop("checked")){
$("#fcerr").hide();
}
});
});
<div class="btn-group btn-group-justified btn-group-sm" data-toggle="buttons">
<label id="lopt1" class="btn btn-primary">
<input type="radio" name="option1" id="option1" autocomplete="off"> Staff
</label>
<label id="lopt2" class="btn btn-primary">
<input type="radio" name="option2" id="option2" autocomplete="off"> Client
</label>
</div>
<div><label class="err" id="fcerr">Error Message</label></div>
<input name="register" type="submit" value="Register" class="btn btn-primary btn-lg btn-block" id="submit">
I have also tried getting the values of the radio boxes but they are always "on" regardless of which radio is active.
var client = $("#option2").val();
alert(client);

With your code:
if ($('#option1').prop("checked", false)){
$("#fcerr").show();
}
You are actually setting the property "checked" to be false, everytime. After that is done the if statement recieves a truthy value so it will execute what's inside the if block.
Try your validation like this instead:
if($('#option1').is(':checked')){
//...
}
Also, if you want your inputs to actually behave as a group (meaning only one can be checked at a given time) you have to share the same name attribute, you can update your html to:
<label id="lopt1" class="btn btn-primary">
<input type="radio" name="myOptions" id="option1" autocomplete="off"> Staff
</label>
<label id="lopt2" class="btn btn-primary">
<input type="radio" name="myOptions" id="option2" autocomplete="off"> Client
</label>

A few things:
You didn't include a javascript framework in your code snippet, though your question is tagged with jQuery.
The 4th line if ($('#option1').prop("checked", false)){ is changing the value that you're trying to evaluate.
The option elements should share the same name attribute if you want to treat them as a group that can be validated

prop('checked', true) doesn't seem to work with input type radio

When I click a button. I show a view with Active status checked. But the code isn't working.
I'm unable to find the mistake here. Could someone help me out?
No matter what I try, the radio buttons are always unchecked when I call the function on button click.
My Code:
$(function(){
$('#btn').click(function() {
$('#name').val('');
$('#active').prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="radio" class="flat" id="active" name="status" value="true"> Active
<input type="radio" class="flat" id="inactive" name="status" value="false"> Inactive
</div>
<button type="button" id="btn" class="btn btn-success" >Add</button>

I was using bootstrap. I removed class="flat" from input type. Now it's working, but I lost the styling.

How to enable the button only if all the checkboxes are checked in angular.js for a dynamically loaded view

I have the following view in angular.js where I have several checkboxes for various terms of an agreement.
<div class="modal-body">
<div class="col-xs-12 form-group">
<p>I acknowledge that I understand the following:</p>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term1">Some term1 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term2"> Some term2 goes here
is not a credit transaction.
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term3"> Some term3 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term4"> Some term4 goes here
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="agreement.term5"> Some term5 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term6"> Some term6 goes here
</label>
</div>
</div>
Then I have a button below it as follows and I need to enable this button only when all the checkboxes are checked. Please note that this mark up comes in a dynamically loaded modal window. I have tried the way which is posted in this url by doing some basic logic change to make it work as per my need -> How to check if any Checkbox is checked in Angular. It doesn't seems to be working when view is loaded dynamically and watcher throws error in console when it is not able to find it.
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();">Confirm</button></div>

As you have it set up currently, this should work:
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.term1 && agreement.term2 && agreement.term3 && agreement.term4 && agreement.term5 && agreement.term6">Confirm</button>
Using ng-if, the button would only be displayed if all 6 conditions are true.
Another alternative which I personally use is the checklist-model add on. Using this, you can add all of the checkboxes into a single array model, and then just check the length like so:
Give each checkbox the model:
<div class="checkbox" >
<label>
<input type="checkbox" checklist-model="agreement" checklist-value="true"> Some term1 goes here
</label>
</div>
// Repeat for all checkboxes
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.length === 6">Confirm</button>
As Paul pointed out, you can also use ng-disabled="agreement.length < 6" instead of ng-if if you wanted to disable the button rather than hide it altogether.

Add a function like the following to your scope:
$scope.submitDisabled = function() {
var allChecked = $scope.agreement.term1 && $scope.agreement.term2 &&
$scope.agreement.term3 && $scope.agreement.term4 &&
$scope.agreement.term5 && $scope.agreement.term6;
return !allChecked;
}
Then for you button do:
<button type="button" ... ng-disabled="submitDisabled()">Confirm</button>
This assumes you want the button visible, but disabled, rather than hidden.

Tried several ways but following way had worked for me. Instead of using watcher, I am calling the function on click to the view around the checkbox.
Following is the function:
$scope.agreement.doIfChecked = doIfChecked;
function doIfChecked(){
$scope.agreement.isAnyUnchecked = !($scope.agreement.term1 && $scope.agreement.term2 && $scope.agreement.term3 && $scope.agreement.term4 && $scope.agreement.term5 && $scope.agreement.term6);
}
And I have used ng-click directive to parent div of the input box as follows:
<div class="checkbox" ng-click='agreement.doIfChecked();'>
<label>
<input type="checkbox" ng-model="agreement.term1"> Some term1 goes here.
</label>
</div>
<div class="checkbox" ng-click='agreement.doIfChecked();'>
<label>
<input type="checkbox" ng-model="agreement.term2"> Some term2 goes here.
</label>
</div>
And the mark up for the button goes as below where I am using ng-disabled directive appropriately:
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-disabled="agreement.isAnyUnchecked" ng-click=" $close();">Confirm</button>

Checked state for buttons Bootstrap

I want to have a checked state for group chexboxes in Bootstrap 3.0.2. docs
html:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="123" data-toggle="button"> <span class="glyphicon glyphicon-star"></span> 123
</label>
<label class="btn btn-default">
<input type="checkbox" name="456"> <span class="glyphicon glyphicon-star-empty"></span> 456
</label>
</div>
But data-toggle="button" doesnt works. jsfiddle
How to fix it? Thanks.

To actually check the input, you will need to add the checked property. This will not actually make it appear checked, but is important if you are using this in a form and actually want the input to be checked by default.
<input type="checkbox" name="123" data-toggle="button" checked>
To make it look checked (or pressed), add class .active to the .btn label wrapping it.
<label class="btn btn-default active">
http://jsfiddle.net/ZktYG/2/
Not sure why data-toggle="buttons" isn't working. Could be related to this: https://github.com/twbs/bootstrap/issues/8816
For now, you can achieve the same effect through JS by doing something like:
$('.btn-group').on('input', 'change', function(){
var checkbox = $(this);
var label = checkbox.parent('label');
if (checkbox.is(':checked')) {
label.addClass('active');
}
else {
label.removeClass('active');
}
});

It's been a couple of years; however, I wanted to address the actual problem above of why the data-toggle="button" wasn't working.
The answer was to remove the data-toggle="button" on the <input>'s.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="123"> 123
</label>
<label class="btn btn-default">
<input type="checkbox" name="456"> 456
</label>
</div>

I solved this by making a custom attribute that housed whether it was active or not, then setting that value within JQuery's click event.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active check_button" id="check1">
<input type="checkbox" autocomplete="off" checked data-checked=true> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary check_button" id="check2">
<input type="checkbox" autocomplete="off" data-checked=false> Checkbox 2
</label>
<label class="btn btn-primary check_button" id="check3">
<input type="checkbox" autocomplete="off" data-checked=false> Checkbox 3
</label>
</div>
You can see a working example of this within the fiddle,
https://jsfiddle.net/jeffbeagley/DTcHh/34024/