I am working with Bootstrap 4 and jQuery. Currently I have a form with two (or more) BS Cards in it. Each Card contains fields for Customer Data, that should be added.
I have integrated a custom-validation, but currently I'm stucked. I not only want the colors to display the valid and the invalid fields. I also want to have a little Icon in the header of the Card, that contains an invalid form field.
In my CodePen Sample you can see the Icon already showing up. But as mentioned, this should only be the case, if there is a mistake (invalid field) in that card.
<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
$(document).ready(function () {
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('custom-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/ee71fca9e3.js"></script>
<form id="testForm" action="#" method="post" class="custom-validation" novalidate>
<div class="row p-3">
<!-- Card 1 -->
<div class="col-6 mb-2">
<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 1</span>
<span>
<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="card-body card-body-secondary collapse show">
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-6 mb-2">
<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 2</span>
<span>
<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="card-body card-body-secondary collapse show">
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row px-3">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
How can this be solved? Do I need an extra form for each and every Card here?
CodePen: https://codepen.io/SchweizerSchoggi/pen/OzevKy
Observations
I've added a class hide.
I've added id for each card.
With those IDs I'm finding the error element and removing the class hide.
I've put the event.preventDefault just for example to avoid an error sending that form.
$(document).ready(function() {
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('custom-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
event.preventDefault(); // Rebemeber to remove this
event.stopPropagation(); // Rebemeber to remove this
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
if ($('#card_body_1').find('.form-control:invalid').size() > 0) {
$('#card_body_1').parent().children('.card-header').find('.fa-exclamation-circle').removeClass('hide');
} else {
$('#card_body_1').parent().children('.card-header').find('.fa-exclamation-circle').addClass('hide');
}
if ($('#card_body_2').find('.form-control:invalid').size() > 0) {
$('#card_body_2').parent().children('.card-header').find('.fa-exclamation-circle').removeClass('hide');
} else {
$('#card_body_2').parent().children('.card-header').find('.fa-exclamation-circle').addClass('hide');
}
}
form.classList.add('was-validated');
}, false);
});
}, false);
});
.hide {
display: none !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/ee71fca9e3.js"></script>
<form id="testForm" action="#" method="post" class="custom-validation" novalidate>
<div class="row p-3">
<!-- Card 1 -->
<div class="col-6 mb-2">
<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 1</span>
<span>
<i class="hide fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div id='card_body_1' class="card-body card-body-secondary collapse show">
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-6 mb-2">
<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 2</span>
<span>
<i class="hide fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div id='card_body_2' class="card-body card-body-secondary collapse show">
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row px-3">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Related
<!doctype html>
</html>
<head>
<title> </title>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="sigin-style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row"> </div>
<div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img
src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5" name = "login">
<div class="row mb-4 px-3"> <!-- fb twitter linked login-->
<h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
<div class="facebook text-center mr-3">
<div class="fa fa-facebook"></div>
</div>
<div class="twitter text-center mr-3">
<div class="fa fa-twitter"></div>
</div>
<div class="linkedin text-center mr-3">
<div class="fa fa-linkedin"></div>
</div>
</div>
<div class="row px-3 mb-4"> <!-- OR login separator line-->
<div class="line"></div> <small class="or text-center">Or</small>
<div class="line"></div>
</div>
<div class="row px-3" > <!-- email address-->
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Address</h6>
</label>
<input class="mb-4" type="text" name="email" placeholder="Enter a valid email address">
</div>
<div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
<h6 class="mb-0 text-sm">Password</h6>
</label>
<input type="password" name="password" placeholder="Enter password">
</div>
<div class="row px-3 mb-4"> <!-- remember me checkbox and forgot password link-->
<div class="custom-control custom-checkbox custom-control-inline"> <!--remember me-->
<input id="chk1"
type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
Forgot Password? <!--fogot password-->
</div>
<div class="row mb-3 px-3"> <!--login button-->
<button type="submit" class="btn btn-blue text-center" onclick="validate()" >Login</button>
</div>
<div class="row mb-4 px-3"><!-- register link-->
<small class="font-weight-bold">Don't have an account?
<a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html"
class="text-danger "> Register
</a>
</small>
</div>
</div>
</div>
</div>
<div class="bg-blue py-4">
<div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright © 2019. All rights
reserved.</small>
<div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span
class="fa fa-google-plus mr-4 text-sm"></span> <span
class="fa fa-linkedin mr-4 text-sm"></span> <span
class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
</div>
</div>
</div>
</div>
</body>
<script>
function validate()
{
var em = document.login.email.value;
var pw = document.login.password.value;
console.log(em);
var valid = false;
var usernameArray = ["ashish", "rahul"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++)
{
if ((un == usernameArray[i]) && (pw == passwordArray[i]))
{
valid = true;
break;
}
}
if (valid)
{
alert("Login was successful");
window.location = "www.google.ie";
return false;
}
else
{
alert("Incorrect password or username you are now blocked");
return false;
}
}
</script>
</html>
The above code is intended to be for a simple html login page where user will enter their email and password to login by clicking login button. the script for doing so is added at the end of the document following body tag. for some reason it is unable to fetch the email and password fields' values and match it with the array i have implemented. kindly point out my fault.
Can you work with this? I tested it and it works.
I changed your
var em = document.login.email.value;
var pw = document.login.password.value;
to
var em = document.getElementById('email').value;
var pw = document.getElementById('password').value;
and gave your email and password inputs an id
function validate() {
var em = document.getElementById('email').value;
var pw = document.getElementById('password').value;
console.log(em);
var valid = false;
var usernameArray = ["ashish", "rahul"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++) {
if ((em == usernameArray[i]) && (pw == passwordArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert("Login was successful");
window.location = "www.google.ie";
return false;
} else {
alert("Incorrect password or username you are now blocked");
return false;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row"> </div>
<div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5" name="login">
<div class="row mb-4 px-3">
<!-- fb twitter linked login-->
<h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
<div class="facebook text-center mr-3">
<div class="fa fa-facebook"></div>
</div>
<div class="twitter text-center mr-3">
<div class="fa fa-twitter"></div>
</div>
<div class="linkedin text-center mr-3">
<div class="fa fa-linkedin"></div>
</div>
</div>
<div class="row px-3 mb-4">
<!-- OR login separator line-->
<div class="line"></div> <small class="or text-center">Or</small>
<div class="line"></div>
</div>
<form>
<div class="row px-3">
<!-- email address-->
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Address</h6>
</label>
<input class="mb-4" id="email" type="text" name="email" placeholder="Enter a valid email address">
</div>
<div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
<h6 class="mb-0 text-sm">Password</h6>
</label>
<input type="password" id="password" name="password" placeholder="Enter password">
</div>
<div class="row px-3 mb-4">
<!-- remember me checkbox and forgot password link-->
<div class="custom-control custom-checkbox custom-control-inline">
<!--remember me-->
<input id="chk1" type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
Forgot Password?
<!--fogot password-->
</div>
<div class="row mb-3 px-3">
<!--login button-->
<button type="submit" class="btn btn-blue text-center" onclick="validate()">Login</button>
</div>
</form>
<div class="row mb-4 px-3">
<!-- register link-->
<small class="font-weight-bold">Don't have an account?
<a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html"
class="text-danger "> Register
</a>
</small>
</div>
</div>
</div>
</div>
<div class="bg-blue py-4">
<div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright © 2019. All rights
reserved.</small>
<div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span class="fa fa-google-plus mr-4 text-sm"></span> <span class="fa fa-linkedin mr-4 text-sm"></span> <span class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
</div>
</div>
</div>
</div>
form tags are missing in your code; submit button and input fields should be within form tags
You need to place your inputs within a form to get values the way you want.
Look:
<!doctype html>
<html>
<head>
<title> </title>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="sigin-style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row"> </div>
<div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img
src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5" name = "login">
<div class="row mb-4 px-3"> <!-- fb twitter linked login-->
<h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
<div class="facebook text-center mr-3">
<div class="fa fa-facebook"></div>
</div>
<div class="twitter text-center mr-3">
<div class="fa fa-twitter"></div>
</div>
<div class="linkedin text-center mr-3">
<div class="fa fa-linkedin"></div>
</div>
</div>
<div class="row px-3 mb-4"> <!-- OR login separator line-->
<div class="line"></div> <small class="or text-center">Or</small>
<div class="line"></div>
</div>
<form name="login">
<div class="row px-3" > <!-- email address-->
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Address</h6>
</label>
<input class="mb-4" type="text" name="email" placeholder="Enter a valid email address">
</div>
<div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
<h6 class="mb-0 text-sm">Password</h6>
</label>
<input type="password" name="password" placeholder="Enter password">
</div>
<div class="row px-3 mb-4"> <!-- remember me checkbox and forgot password link-->
<div class="custom-control custom-checkbox custom-control-inline"> <!--remember me-->
<input id="chk1"
type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
Forgot Password? <!--fogot password-->
</div>
<div class="row mb-3 px-3"> <!--login button-->
<button type="submit" class="btn btn-blue text-center" onclick="validate()" >Login</button>
</div>
</form>
<div class="row mb-4 px-3"><!-- register link-->
<small class="font-weight-bold">Don't have an account?
<a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html"
class="text-danger "> Register
</a>
</small>
</div>
</div>
</div>
</div>
<div class="bg-blue py-4">
<div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright © 2019. All rights
reserved.</small>
<div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span
class="fa fa-google-plus mr-4 text-sm"></span> <span
class="fa fa-linkedin mr-4 text-sm"></span> <span
class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
</div>
</div>
</div>
</div>
</body>
<script>
function validate()
{
var em = document.login.email.value;
var pw = document.login.password.value;
console.log(em);
var valid = false;
var usernameArray = ["ashish", "rahul"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++)
{
if ((un == usernameArray[i]) && (pw == passwordArray[i]))
{
valid = true;
break;
}
}
if (valid)
{
alert("Login was successful");
window.location = "www.google.ie";
return false;
}
else
{
alert("Incorrect password or username you are now blocked");
return false;
}
}
</script>
</html>
Just like google search has two buttons at the bottom of the typeahead dropdown, How can I add some html to ngxTypeahead dropdown?
<div class="row">
<div class="col-sm-12">
<div class="flex-grow-1 form-group business-classification">
<div class="input-group">
<div class="input-group-prepend form-control pl-0 pt-0 reorder-1 flex-grow-1 position-relative ">
<!-- <span class="m-0 pt-4"><i class="material-icons md-18">search</i></span> -->
<span class="label position-absolute">Business Classification<sup class="text-danger">*</sup></span>
<input type="search" [value]="query" ngxTypeahead class="col-sm-12 form-control p-0 m-0 pl-3 no-brad border-0 bg-transparent pt-2" [taUrl]="url" [taApi]="api" [taItemTpl]="itemTpl" (taSelected)="handleHttpResultSelected($event)">
</div>
</div>
<ng-template #itemTpl let-result>
<div>{{ result.result.classification }}</div>
<div class="ml-auto small text-secondary pl-5">SIC {{ result.result.sicCode }}</div>
</ng-template>
</div>
</div>
</div>
You can use custom template for results and add the buttons you need at the end
something like this:
<ng-template #rt let-r="result" let-t="term">
<ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
<button>Save</button>
<button>Cancel</button>
</ng-template>
<label for="typeahead-template">Search for a state:</label>
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
[inputFormatter]="formatter" />
<hr>
Reference: https://ng-bootstrap.github.io/#/components/typeahead/examples#template
I am trying to copy text from textfield to another Tab Menu's textfield by a checkbox.
The javascript works if the textfield copy in the SAME Tab Menu with the following sample code from: https://www.htmlgoodies.com/tutorials/forms/article.php/3898101/How-To-Use-JavaScript-To-Copy-Text-From-One-Field-To-Another.htm
But how could I make the Tab 1 textfield copy to Tab 2 textfield with the checkbox?
This is what I ever tried c.frm_DQ.poc_person1.value = c.frm_ID.poc_person.value;
<script>
function ContactCopy(c) {
if(c.frm_contactCopy.checked == true) {
c.poc_person1.value = c.poc_person.value;
}
}
<script>
function ContactCopy(c) {
if(c.frm_contactCopy.checked == true) {
c.poc_person1.value = c.poc_person.value;
}
}
</script>
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Tab 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="menu1" class="container tab-pane active"><br>
<!-- beginning -->
<div class="container py-3">
<div class="row">
<div class="mx-auto col-sm-12">
<!-- form user info -->
<form class="form" role="form" autocomplete="off" name="frm_ID">
<div class="card">
<div class="card-header">
<b style="color:#C02E93">Section A</b>
</div>
<div class="card-body " style="background-color:#F8F9F9">
<p><b> Contact Information </b></p>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person">
</div>
</div>
<input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
<em>Check this box if Contact Details are the same as above.</em>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person 2</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person1">
</div>
</div>
</div>
</div>
</form>
<!-- /form user info -->
</div>
</div>
</div>
<!-- end -->
<!--menu1 -->
</div>
<div id="menu2" class="container tab-pane fade"><br>
<!-- beginning -->
<div class="container py-3">
<div class="row">
<div class="mx-auto col-sm-12">
<!-- form user info -->
<form class="form" role="form" autocomplete="off" name="frm_DQ">
<br>
<div class="card">
<div class="card-header">
<b style="color:#C02E93">Section B</b>
</div>
<div class="card-body " style="background-color:#F8F9F9">
<div class="form-group row pl-3 my-2" >
<label class="col-lg-3 col-form-label form-control-label"><b>Process Contact Information</b></label>
</div>
<input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
<em>Check this box if Contact Details are the same as Section A.</em>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person1">
</div>
</div>
</div>
<br>
</form>
<!-- /form user info -->
</div>
</div>
</div>
<!-- end -->
</div>
When you click the input with type checkbox from second form, the parameter c will refer to the form with name frm_DQ and your input with name poc_person is present within the form with name property frm_ID. So your statement c.poc_person1.value = c.poc_person.value; will fail. Instead you can directly grab the input poc_person with querySelector.
function ContactCopy(c) {
if(c.frm_contactCopy.checked == true) {
c.poc_person1.value = document.querySelector('input[name="poc_person"]').value;
}
}
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Tab 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="menu1" class="container tab-pane active"><br>
<!-- beginning -->
<div class="container py-3">
<div class="row">
<div class="mx-auto col-sm-12">
<!-- form user info -->
<form class="form" role="form" autocomplete="off" name="frm_ID">
<div class="card">
<div class="card-header">
<b style="color:#C02E93">Section A</b>
</div>
<div class="card-body " style="background-color:#F8F9F9">
<p><b> Contact Information </b></p>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person">
</div>
</div>
<input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
<em>Check this box if Contact Details are the same as above.</em>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person 2</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person1">
</div>
</div>
</div>
</div>
</form>
<!-- /form user info -->
</div>
</div>
</div>
<!-- end -->
<!--menu1 -->
</div>
<div id="menu2" class="container tab-pane fade active show"><br>
<!-- beginning -->
<div class="container py-3">
<div class="row">
<div class="mx-auto col-sm-12">
<!-- form user info -->
<form class="form" role="form" autocomplete="off" name="frm_DQ">
<br>
<div class="card">
<div class="card-header">
<b style="color:#C02E93">Section B</b>
</div>
<div class="card-body " style="background-color:#F8F9F9">
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label"><b>Process Contact Information</b></label>
</div>
<input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
<em>Check this box if Contact Details are the same as Section A.</em>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person1">
</div>
</div>
</div>
<br>
</form>
<!-- /form user info -->
</div>
</div>
</div>
<!-- end -->
</div>
This is my HTML code:
<div data-repeater-item class="mt-repeater-item prescribeData">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="prescribe_test" class="form-control typeahead-prescribetest input-circle-right" placeholder="Prescribe Test">
</div>
<span class="help-block">Name of Investigation</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="diagnosis_input" class="form-control typeahead-diagnosis input-circle-right" placeholder="Duration of Investigation (Optional)">
</div>
<span class="help-block">e.g. Once, Weekly, Monthly</span>
</div>
</div>
<div class="col-md-1 pull-right col-sm-6 col-xs-6">
<a href="javascript:;" style="margin-right:20px;" class="btn-circle prescribeAddData btn green-meadow mt-repeater-btn-inline"> <i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
</div>
I want to get all the input elements data in a variable using a JQuery code:
I am currently using this code:
$(document.body).on('click', 'a.prescribeAddData', function ()
{
console.log($(this).closest($(".prescribeData :input")));
});
But this code doesn't display the data that the elements are holding after inputting in it.
How can I fix this logic?
You can use the find method to find all elements that are children of a specific element then iterate over them, and store the values in an array for example.
var inputFields = $('.prescribeData').find('input');
var values = [];
inputFields.each(function(){
values.push($(this).val())
})
console.log(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-repeater-item class="mt-repeater-item prescribeData">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="prescribe_test" class="form-control typeahead-prescribetest input-circle-right" placeholder="Prescribe Test">
</div>
<span class="help-block">Name of Investigation</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="diagnosis_input" class="form-control typeahead-diagnosis input-circle-right" placeholder="Duration of Investigation (Optional)">
</div>
<span class="help-block">e.g. Once, Weekly, Monthly</span>
</div>
</div>
</div>
</div>
</div>
I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!
You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/