If text boxes are not empty check checkbox

If text boxes are not empty check checkbox - javascript

I am trying to figure out how to check if all 4 inputs are filled out then checkmark the contact information check box. If any are not filled out uncheck the checkbox.
Any help with this would be greatly appreciated.
$(document).on('change', '#ContactName, #ContactEmail, #ContactPhone', function() {
if ('#ContactName, #ContactEmail, #ContactPhone' === '') {
$("#contactinformation").prop("checked", false);
} else {
$("#contactinformation").prop("checked", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactName">Contact name:</label>
<input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="BusinessName">Business name:</label>
<input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactEmail">Email address:</label>
<input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactPhone">Phone number (business hours):</label>
<input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="contactinformation" id="contactinformation" />
Contact information
</div>
</div>
</div>

Answer updated to reflect new requirement that BusinessName be optional.
See the comments inline:
// Set up a blur event handler for each text field
$('.form-control:not("#BusinessName")').on("blur", function(evt) {
let count = 0; // Keep track of how many are filled in
// Loop over all the text fields
$('.form-control:not("#BusinessName")').each(function(idx, el){
// If the field is not empty....
if(el.value !== ""){
count++; // Increase the count
}
});
// Test to see if all 3 are filled in
if(count === 3){
$("#contactinformation").prop("checked", true); // Check the box
} else {
$("#contactinformation").prop("checked", false); // Unheck the box
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactName">Contact name:</label>
<input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="BusinessName">Business name:</label>
<input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactEmail">Email address:</label>
<input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactPhone">Phone number (business hours):</label>
<input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="contactinformation" id="contactinformation" disabled />
Contact information
</div>
</div>
</div>

Please try with below code snippet.
<input type="text" class="form-control input-sm InputText" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
$( document ).ready(function() {
$(".InputText").change(function(){
var checkCheckBox= true;
$(".InputText").each(function() {
if ($.trim($(this).val()) != '') {
checkCheckBox = false;
}
});
if (checkCheckBox == true)
{
$("#contactinformation").prop("checked",true);
}
else
{
$("#contactinformation").prop("checked",false);
}
});
});
Add "InputText" class in textbox, if you want to validate this thing.

Related

JQuery - Displaying hidden text field in form within modal after selecting option in dropdown menu

I'm new to scripting and trying to understand it better. I have a modal being displayed after clicking a button that has a form inside of it. There is a dropdown box with two selections. The first selection (Single) is meant for all divs and text fields to be displayed with the exception of the Guest text fields since they will be coming alone without a guest.
What I am trying to do is make the text fields show up once the second option (Couple) is selected so that the Guest name fields can be entered, and I can't seem to get them to display so that text can be entered. Here is my code:
<div class="form-group" id="selector">
<label for"selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
<select class="form-control" id="selection" name="amount">
<option value="40.00">Single - $40.00</option>
<option value="75.00">Couple - $75.00</option>
</select>
</div>
<div class="form-group">
<label for="first_name" class="col-xs-4" control-label>First Name</label>
<div class="col-xs-8">
<input type="hidden" name="on0" value="First Name">
<input type="text" class="form-control" id="first_name"
name="os0" placeholder="i.e. John" required autofocus>
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-xs-4" control-label>Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on1" value="Last Name">
<input type="text" class="form-control" id="last_name"
name="os1" placeholder="i.e. Smith" required autofocus>
</div>
</div>
<div class="form-group" id="guestFirst">
<label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
<div class="col-xs-8" style="display: none">
<input type="hidden" name="on3" value="Guest's First Name">
<input type="text" class="form-control" id="guestFirstName" name="os3"
placeholder="i.e. Jane" autofocus>
</div>
</div>
<div class="form-group" id="guestLast">
<label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on4" value="Guest's Last Name">
<input type="text" class="form-control" id="guestLastName" name="os4"
placeholder="i.e. Smith" autofocus>
</div>
</div>
-----
<script>
$('#selection').on('change', function() {
if ( this.value == '75.00')
{
$("#guestFirstName").show();
}
else
{
$("#guestFirstName").hide();
}
});
</script>

Problem : you set the input field to display via jQuery but set display:none property to the col-xs-8 before that input filed.
Solution: I think you need to hide the div id #guestFirst, #guestLast and show them after select couple from dropdown.
So set those div style display none using css. then show those divs using if else condition on jQuery.
LiveOnFiddle
$('#selection').on('change', function() {
if ( this.value == '75.00')
{
$("#guestFirst, #guestLast").show();
}
else
{
$("#guestFirst, #guestLast").hide();
}
});
#guestFirst, #guestLast{
display:none;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group" id="selector">
<label for="selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
<select class="form-control" id="selection" name="amount">
<option value="40.00">Single - $40.00</option>
<option value="75.00">Couple - $75.00</option>
</select>
</div>
<div class="form-group">
<label for="first_name" class="col-xs-4" control-label>First Name</label>
<div class="col-xs-8">
<input type="hidden" name="on0" value="First Name">
<input type="text" class="form-control" id="first_name"
name="os0" placeholder="i.e. John" required autofocus>
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-xs-4" control-label>Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on1" value="Last Name">
<input type="text" class="form-control" id="last_name"
name="os1" placeholder="i.e. Smith" required autofocus>
</div>
</div>
<div class="form-group" id="guestFirst">
<label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
<div class="col-xs-8" >
<input type="hidden" name="on3" value="Guest's First Name">
<input type="text" class="form-control" id="guestFirstName" name="os3"
placeholder="i.e. Jane" autofocus>
</div>
</div>
<div class="form-group" id="guestLast">
<label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
<div class="col-xs-8" >
<input type="hidden" name="on4" value="Guest's Last Name">
<input type="text" class="form-control" id="guestLastName" name="os4"
placeholder="i.e. Smith" autofocus>
</div>
</div>

populate a form from backend with angularjs

I am new in angularjs, i want to have a filed form from database when the user want to update his profile. I have a webservice that can give all information for the logged user then another webservice to get the information that i need with the id of the user.This is my controller:
controller('myTalentisCtrl', function ($scope,$http) {
this.User_Talent={};
this.T_User={} ;
$http.get("/LoggedUser").success(function(data) {
alert(data);
this.T_User.lnId = data.lnId;
alert(this.T_User.lnId);
});
$http.get("/usertalent",this.T_User.lnId).success(function(data) {
alert(data);
this.User_Talent.user = data.user;
this.User_Talent.talent = data.talent;
});
$scope.modif=function(){
$http.put('updating/' + this.T_User.lnId, $scope.User_Talent).success(function(data) {
$scope.User_Talent = data;
});
};
this is a part of my form:
<div ng-controller="myTalentisCtrl" class="tab-content no-margin">
<!-- Tabs Content -->
<div class="tab-pane with-bg active" id="fwv-1">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="full_name">First Name</label>
<input type="text" ng-model="User_Talent.talent.strFirstName" class="form-control" name="first_name" id="first_name" data-validate="required" placeholder="Your first name" />
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="control-label" for="address_line_2">Address</label>
<input ng-model="User_Talent.talent.strAdress" class="form-control" name="address_line_2" id="address_line_2" placeholder="(Optional) your Address" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="full_name">Last Name</label>
<input type="text" ng-model="User_Talent.talent.strLastName" class="form-control" name="last_name" id="last_name" data-validate="required" placeholder="Your last name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="city">City</label>
<input ng-model="User_Talent.talent.strCity" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="door_no">Phone Number</label>
<input ng-model="User_Talent.talent.lnPhone" class="form-control" name="phone_no" id="phone_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="zip">Zip</label>
<input ng-model="User_Talent.talent.lnZipCode" class="form-control" name="zip_no" id="zip_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email Adress</label>
<div class="input-group">
<span class="input-group-addon">
<i class="linecons-mail"></i>
</span>
<input ng-model="User_Talent.talent.strEmail" type="email" class="form-control" placeholder="Enter your email">
</div>
<!-- <label class="control-label" for="city">Email Adress</label>
<input ng-model="User_Talent.talent.strEmail" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" /> -->
</div>
</div>
Is there a way to initialize my ng-model with the existing values ?

you should perform a digest cycle to reflect the changes in the DOM.
Look into digest
https://docs.angularjs.org/api/ng/type/$rootScope.Scope

How to Show/Hide the Div using Button

First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>

Since you're using Bootstrap, just use the collapse component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
Demo: http://www.codeply.com/go/0jvcrckYOL

A tiny error in your code, you had == where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';

function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.visibility == 'hidden')
divelement.style.visibility = 'visible';
else
divelement.style.visibility = 'hidden';
}
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->

here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});

Input boxes not spaced when viewport is resized (bootstrap)

I'm currently creating a sign up form using bootstrap and I was making the first name and last name text boxes inline but when I resize the browser by compacting it, the display of both text boxes seem to stick? I've tried using inline-block and also margin but it'll affect the others too which would look odd. Here is an sample. (You'd have to zoom-out to see the effect.)
http://jsfiddle.net/5ghc1r18/6/
<div class="container">
<div class="wrapper">
<div class="row">
<div style="overflow:auto;width:90%" class="col-lg-10">
<form id="form" action="welcome.php" class="form-horizontal" method="POST">
<h1 class="text-center">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Sign Up
</h1>
<div class="form-group">
<div class="col-lg-6">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
<div class="col-lg-6">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="email" placeholder="Email Address" name="email" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="text" placeholder="Mobile" name="mobile" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<label for="day">Date of Birth:</label>
<div id="date1" class="datefield">
<input id="day" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="DD" />/
<input id="month" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="MM" />/
<input id="year" type="tel" onkeypress="return isNumberKey(event)" maxlength="4" placeholder="YYYY" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<select name="gender" class="form-control" required>
<option value="">Select one</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">I'm not sure</option>
</select>
</div>
</div>
<div class="form group">
<div style="width:100%">
<button type="submit" class="btn btn-success btn-block"> <i class="fa fa-plus"></i> Sign up!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks for the help!

The problem in your HTML is here
<div class="form-group">
<div class="col-lg-6">
put <div class="form-group"> inside the <div class="col-lg-6"> currently you are doing opposite.
e.g;
<div class="col-lg-6">
<div class="form-group">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>

You can give margin to the input boxes:
input[type="text"] {
margin: 10px auto;
}

Form validation is not working properly when clicking submit button?

For the 1st code while clicking submit button without filling any text it is showing as "Please fill out this field".
For the 2nd code it is not showing or submitting code while clicking submit button. I need submit button to show "Please fill out this field" while clicking on it.
<!------------------1st html code------------>
<html>
<body>
<section id="contact-page">
<div class="container">
<div class="center" style="padding-top: 100px; border-bottom-width: 10px;padding-bottom: 50px;">
<h2>Drop Your Message</h2>
<p class="lead"><b><em>Education is the most powerful weapon we can use to change the world</em></b></p>
</div>
<div class="row contact-wrap" style="margin-top:00px;">
<form action="sendemail.php" data-ajax="false" method="post" class="form">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<label for="Name">Name *</label>
<input type="text" id="Name" name="name" class="form-control" required="required" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="Email">Email *</label>
<input type="email" id="Email" name="email" class="form-control" required="required" placeholder="Enter email-id">
</div>
<div class="form-group">
<label for="phone">Phone *</label>
<input type="tel" id="phone" name="phone" pattern="^\d{4}\d{3}\d{3}$" class="form-control" required="required" placeholder="Enter number">
</div>
<div class="form-group">
<label for="Subject">Subject *</label>
<input type="text" id="Subject" name="subject" class="form-control" required="required" placeholder="Enter subject">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Message">Message *</label>
<textarea name="message" id="Message" name="Message" required="required" class="form-control" rows="9" placeholder="Enter message"></textarea>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-lg" required="required">Submit Message</button>
</div>
</div>
</form>
</div>
<!--/.row-->
</div>
<!--/.container-->
</section>
<!--/#contact-page-->
</body>
</html>
<!-----------------------------------1st code completed------------>
<!---------------------2nd html code--------->
<html>
<body>
<div class="row">
<div class="col-sm-8">
<div class="contact-form">
<h2 class="title text-center">Get In Touch</h2>
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form row" name="Enquiry-form" method="post" action="sendemail.php" data-ajax="false" style="margin-bottom: 0px;">
<div class="form-group col-md-6" style="padding-left: 30px;">
<input type="text" name="Name" id="Name" class="form-control" placeholder="Name" required="required">
</div>
<div class="form-group col-md-6">
<input type="tel" pattern="^\d{4}\d{3}\d{3}$" id="phone" name="phone" class="form-control" required="required" placeholder="Contact Number" style="width: 387px;">
</div>
<div class="form-group col-md-12">
<form name="myform" action="">
<input type="radio" id="radiobutton1" value="text1" style="margin-left: 15px; margin-right: 5px;" />
<input type="text" id="profession1" enabled="enabled" placeholder="Category of the Business if Self-employ" style="margin-left: 15px; width: 349px;" />
<input type="radio" id="radiobutton2" value="text2" style="margin-left: 30px;margin-right: 5px;" />
<input type="text" id="profession2" disabled="disabled" placeholder="Company name if Employee" style="margin-left: 15px; width: 345px;" />
</form>
</div>
<script>
var radiobutton1 = document.getElementById('radiobutton1');
var radiobutton2 = document.getElementById('radiobutton2');
radiobutton1.onchange = function() {
radiobutton2.checked = !this.checked;
document.getElementById('profession1').disabled = !this.checked;
document.getElementById('profession2').disabled = this.checked;
};
document.getElementById('radiobutton2').onchange = function() {
radiobutton1.checked = !this.checked;
document.getElementById('profession2').disabled = !this.checked;
document.getElementById('profession1').disabled = this.checked;
};
</script>
<div class="form-group col-md-4" style="width: 236px;">
<input type="text" name="productid" id="productid" class="form-control" required="required" placeholder="Product Id" style="width: 236px;">
</div>
<div class="form-group col-md-4" style="width: 269px; padding-left: 45px;">
<input list="Category" id="producttype " name="producttype" class="form-control" required="required" placeholder="Product Type" style="width: 269px;">
<datalist id="Category">
<option value="Consumer Products">
<option value="Cosmetics">
<option value="Food Products">
<option value="Energy Drinks">
</datalist>
</div>
<div class="form-group col-md-4" style="width: 236px; padding-left: 73px;">
<input type="text" name="Productquantity" id="Productquantity" class="form-control" required="required" placeholder="Product Quantity" style="width: 236px;">
</div>
<div class="form-group col-md-6">
<input type="email" name="Email" id="Email" class="form-control" required="required" placeholder="Email">
<br>
<textarea name="Message" id="Message" required="required" class="form-control" rows="5" placeholder="Comment Here" style="height: 114px;"></textarea>
</div>
<div class="form-group col-md-6" style="height: 144px;">
<textarea name="Shippingaddress" id="Shippingaddress" class="form-control" rows="5" placeholder="Shipping Address" required="required" style="height: 179px;"></textarea>
</div>
<div class="form-group col-md-12" style="padding-right: 0px; padding-left: 330px;">
<button type="submit" name="submit" class="btn btn-primary btn-lg" style="padding-left: 25px;" required="required">Submit Message</button>
</div>
</form>
</div>
</div>
</body>
</html>
<!-----------------------------------2nd html code completed----------->

Here in the 2nd example you are using nested form.Try removing the nested form and It will work

We Keep Coding

JavaScript is the programming language of the Web.

If text boxes are not empty check checkbox - javascript

Related

JQuery - Displaying hidden text field in form within modal after selecting option in dropdown menu

populate a form from backend with angularjs

How to Show/Hide the Div using Button

Input boxes not spaced when viewport is resized (bootstrap)

Form validation is not working properly when clicking submit button?

Categories

Resources