Develop Reference

Adding a search field in html form

I have a basic Html form . I am trying to build a search bar that would highlight a label which matches that content . Here is my JSFiddle Link. The search is not perfect. For eg when trying to search keyword First it highlights all the labels that starts with F.
$("#searchbox").keydown(function() {
var content = $('#searchbox').val();
if(content!== ""){
if ($("label:contains('"+content+"')"))
{
$("label:contains('"+content+"')").addClass("highlight");
} else {
$("label:contains('"+content+"')").removeClass("highlight");
}
}
else{
$("label:contains('"+content+"')").removeClass("highlight");
}
});
.highlight{
border: red;
background-color: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<br/>
<input id="searchbox" placeholder="Enter your search term">
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<div class="form-group"><label for="first">First</label><input type="text"></div>
<div class="form-group"><label for="second">Second</label><input type="text"></div>
<div class="form-group"><label for="third">Third</label><input type="text"></div>
<div class="form-group"><label for="fourth">Fourth</label><input type="text"></div>
<div class="form-group"><label for="fifth">Fifth</label><input type="text"></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I am new to JQuery and I know this is not a clean code. This is what I tried by referring other examples.

You could iterate through label elements on keyup and check if the text includes the value of the search field and based on that add or remove a class.
$("#searchbox").keyup(function() {
const content = $('#searchbox').val().toLowerCase();
const labels = $('label');
labels.each(function() {
const check = $(this).text().toLowerCase().includes(content)
if (content.length && check) $(this).addClass('highlight')
else $(this).removeClass('highlight')
})
});
.highlight {
border: red;
background-color: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<br />
<input id="searchbox" placeholder="Enter your search term">
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<div class="form-group"><label for="first">First</label><input type="text"></div>
<div class="form-group"><label for="second">Second</label><input type="text"></div>
<div class="form-group"><label for="third">Third</label><input type="text"></div>
<div class="form-group"><label for="fourth">Fourth</label><input type="text"></div>
<div class="form-group"><label for="fifth">Fifth</label><input type="text"></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Form Validation is successful but form doesn't submit

I have a simple form where I am using a vanilla JS library (https://pristine.js.org/) for form validation. The form validation is successful (mostly) but then the form doesn't submit. For the life of me I can't figure out what's going wrong.The form is supposed to post to a PHP file where I can get the posted variable values.
My HTML page with the form and necessary JS and CSS are in the jsfiddle here. In case JSFiddle is acting up, the actual code's below.
I'd appreciate it if someone can help me out with this.
Thanks a ton!
Dexxterr
P.S.: I've beginner level knowledge about JS.
My HTML Code:
<div style="width: 50%; margin: auto;">
<form class="fv-stacked-form" id="inquiry" method="POST" action="form.php">
<div class="fv-row form-group">
<label>Which industry does your organization belong to?</label>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Manufacturing" id="indManufacturing" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indManufacturing">Manufacturing</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Education" id="indEducation" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indEducation">Education</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Real Estate" id="indRealestate" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indRealestate">Real Estate</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="" id="indOther" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indOther">Other</label>
<input style="display: none;" class="label-inline" type="text" name="indOtherValue" id="indOtherValue" value="" minlength="3" class="form-control" data-pristine-min-message="Please enter your industry" />
</div>
</div>
<div class="fv-row form-group">
<label>What is your budget? (In USD)</label>
<input class="form-control" type="number" min="100" required name="budget" data-pristine-min-message="Enter at least 100" />
</div>
<div class="fv-row form-group">
<label>How soon do you want to get started??</label>
<div>
<input class="form-control" type="radio" name="timeline[]" value="Immediately" id="immediately" required />
<label class="label-inline" for="immediately">Immediately</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="3Months" id="3months" required />
<label class="label-inline" for="3months">In the next 3 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="6Months" id="6months" required />
<label class="label-inline" for="6months">In the next 6 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="NoIdea" id="noidea" required />
<label class="label-inline" for="noidea">I don't have a timeline yet</label>
</div>
</div>
<div class="fv-row form-group">
<label>First Name</label>
<input class="form-control" type="text" name="fname" required />
</div>
<div class="fv-row form-group">
<label>Last Name</label>
<input class="form-control" type="text" name="lname" required />
</div>
<div class="fv-row form-group">
<label>Company Email</label>
<input class="form-control" type="email" name="email" required />
</div>
<div class="fv-row form-group">
<label>No. of Employees</label>
<select class="form-control" id="ageRangeField" required>
<option value=""></option>
<option value="1-100">1-100</option>
<option value="100-500">100-500</option>
<option value="500-2500">500-2500</option>
<option value="2500+">2500+</option>
</select>
</div>
<div class="fv-row form-group">
<input name="formsubmit" id="formsubmit" type="submit" class="" value="Submit" />
</div>
</form>
<p id="confmsg" style="display: none;">Thank you for submitting the form.</p>
</div>
My JS Code:
window.onload = function ()
{
var form = document.getElementById("inquiry");
var pristine = new Pristine(form);
form.addEventListener('submit', function (e)
{
e.preventDefault();
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
// alert("This doesn't work");
}
});
};
var sb = document.getElementById('formsubmit'); // Submit button
var cbother = document.getElementById('indOther'); // Checkbox
var txtother = document.getElementById('indOtherValue'); // Other Textbox
cbother.addEventListener('click',function(e){
if(cbother.checked){
cbother.value=txtother.value;
txtother.style.display = 'block';
}else{
txtother.value='';
txtother.style.display = 'none';
}
},false);

e.preventDefault();
is preventing the form from being submitted. If you simply remove it the form will be submitted even if the pristine check fails. So what you want to do is only prevent the default behaviour (which is the form to be submitted) if the pristine check fails:
form.addEventListener('submit', function (e)
{
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
e.preventDefault();
// alert("This doesn't work");
}
});
to simplify that a little you could simply write:
form.addEventListener('submit', function (e)
{
//if the pristine check fails, prevent the form from being submitted
if(!pristine.validate()){
e.preventDefault();
}
});

Checkbox not display element when checked in meteor

I am working in meteor and am trying to display a block of code when a checkbox is checked. I am new to JS and jquery, but I have research different ways of writing the JS. This is what I came up with:
<div class="recipient">
<div class="toRecipient-container">
<label class="toRecipient">TO:</label>
<input class="toRecipient" type="text" size="45">
</div>
<br>
<div id="checkbox-container" class="checkbox-container">
<label for="newClient">New Client
<input id="newClient" class="newInfo" type="checkbox" onclick="toggle()"></label>
<label for="newBilling" style="padding-left: 20px;">New Billing
<input id="newBilling" class="newInfo" type="checkbox"></label>
</div>
</div>
<div id="billingDetails-container" class="billingDetails-container">
<div class="billingDetails">
<label>Billing Contact:</label>
<input class="billingContact" type="text" size="45">
<label>Billing Phone:</label>
<input class="billingPhone" type="text" size="45">
<div>
<label>Billing Address:</label>
<input class="billingAddress" type="text" placeholder="Street Address" size="45">
<input class="billingAddress" type="text" placeholder="City" size="45">
<input class="billingAddress" type="text" placeholder="State" size="45">
<input class="billingAddress" type="text" placeholder="Zip Code" size="45">
</div>
<label>Billing Email:</label>
<input class="billingEmail" type="text" size="45">
</div>
</div>
And my JS:
Template.InvoicePage.onCreated(function () {
this.state = new ReactiveVar();
});
Template.InvoicePage.helpers({
toggle: ()=>{
var checkBox = document.getElementById("newClient");
var displayBlock = document.getElementById("billingDetails-container");
if (checkBox.checked == true) {
displayBlock.style.display = "block";
} else {
displayBlock.style.display = "none";
}
},
});
Template.InvoicePage.events({
'change #newClient'(event, instance) {
instance.state.set('newClient', event.target.checked)
},
});
When I check the box, I get an error that 'toggle' is undefined. Should this be a template event instead of a helper? What am I missing?

I've never done anything with meteor. There is a lot of different frameworks listed on the website. I'm not sure which one you use (if any). You can't possibly use angular, react and vuejs all at the same time.
Unless I'm wrong and there is a particular reason for the whole
Template.InvoicePage.helpers({...});
simply do
function toggle() {
var checkBox = document.getElementById("newClient");
var displayBlock = document.getElementById("billingDetails-container");
if (checkBox.checked == true) {
displayBlock.style.display = "block";
} else {
displayBlock.style.display = "none";
}
}
It has nothing to do with a framework. Just vanilla javascript and html.

I believe you are trying to show the billingDetails-container when the user selects the New-Client check-box. If that is correct, the below should work
HTML
<div class="recipient">
<div class="toRecipient-container">
<label class="toRecipient">TO:</label>
<input class="toRecipient" type="text" size="45">
</div>
<br>
<div id="checkbox-container" class="checkbox-container">
<label for="newClient">New Client
<input id="newClient" class="newInfo" type="checkbox"></label>
<label for="newBilling" style="padding-left: 20px;">New Billing
<input id="newBilling" class="newInfo" type="checkbox"></label>
</div>
</div>
{{#if showBillingDetails}}
<div id="billingDetails-container" class="billingDetails-container">
<div class="billingDetails">
<label>Billing Contact:</label>
<input class="billingContact" type="text" size="45">
<label>Billing Phone:</label>
<input class="billingPhone" type="text" size="45">
<div>
<label>Billing Address:</label>
<input class="billingAddress" type="text" placeholder="Street Address" size="45">
<input class="billingAddress" type="text" placeholder="City" size="45">
<input class="billingAddress" type="text" placeholder="State" size="45">
<input class="billingAddress" type="text" placeholder="Zip Code" size="45">
</div>
<label>Billing Email:</label>
<input class="billingEmail" type="text" size="45">
</div>
</div>
{{/if}}
JS
Template.InvoicePage.events({
'change #newClient'(event, instance) {
instance.state.set({
'newClient': event.target.checked //Here, we are set the newclient property of state object based on client's selection.
});
}
});
Template.InvoicePage.helpers({
showBillingDetails() {
const state = Template.instance().state.get();
return state && state.newClient; //Here, we use the newclient property of state to decide whether or not to display the billingDetails-container
}
});

Exposing form input when previous is selected or filled in

This will most likely need to involve javascript, which I know almost nothing about so please bear with me.
I would like to have a regular form, say styled with bootstrap. But I don't want to display the all the fields at once when the page is loaded. Instead I would like to display the first field and continue to display the following fields as the previous fields are focused or have content in them.
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
In this example only "Name" would show up, when the page loads, then when it is focused then the "Email" field would show up.
Any ideas would be great, thanks!

Just hide all elements in the form except for the first one, listen for changes on the form and display the next element relating to the last changed element (the event.target).
Example (which is definitley improvable):
$(".form-group:not(:first-child)").hide();
$("form").on("change keypress paste", function (event) {
$(event.target).parent().next().show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>

You could use JQuery to remove a hidden class on input focus.
Run the code snippet or check out the CodePen Demo:
$(document).ready(function() {
$("input").focus(function() {
$(this).parent(".form-group").next().removeClass("hidden");
});
});
.hidden {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group hidden">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group hidden">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group hidden">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to dynamically set checked state in radio button in Angular js

I am working with MEAN Stack and I have a form which is included radio
Button which is submitted successfully Now what I want is to edit the record. I want is that the record radio button should be checked according to database value.
How to do that.
my edit form is:-
<form id = "expensesCreate" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Address</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="address" name="address" ng-model="address" type="address" value ="{{registeruser.address}}" required>
<p class="error" ng-show=" myForm.password.$touched && myForm.password.$error.required" >Address is required.</p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Sex</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
Male <input type="radio" ng-model="sex" value="Male" >
FeMale<input type="radio" ng-model="sex" value="Female">
</div>
</div>
</form>
if sex is male of a particular record into database how to checked or selected male radio button.

You can evaluate the sex property to truthy in your view like so:
<td><input type='radio' ng-checked="p.sex=='male'"></td>
<td><input type="radio" ng-checked="p.sex=='female'" ></td>
Hope it helps.

Use ng-value property to set the radio button as checked.
ng-value="true"

<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtr">
<form id="expensesCreate" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Address</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="address" name="address" ng-model="address" type="address" value="{{registeruser.address}}" required>
<p class="error" ng-show=" myForm.password.$touched && myForm.password.$error.required">Address is required.</p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Sex</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
Male
<input type="radio" name="gender" ng-model="sex" value="male"> FeMale
<input type="radio" name="gender" ng-model="sex" value="female">
</div>
</div>
</form>
<script>
angular.module('app', [])
.controller('myCtr', function($scope) {
$scope.sex = 'female'; // Instead of this use database value here
})
</script>
</body>
</html>