I have been trying to troubleshoot this error with the form submission. I am using the Livevalidation library in order to validate the email address field. Something isn't connecting properly to the library as I get this error in dev tools console. The library isnt getting called in under to validate the form field. Any help would be greatly appreciated.
ERROR:
Uncaught TypeError: Cannot read property 'form' of null
at LiveValidation.initialize (livevalidation_standalone.compressed.js:5)
at new LiveValidation (livevalidation_standalone.compressed.js:5)
at <anonymous>:2:13
at api.min.js:2
at Module.S (api.min.js:2)
at t.inlineScripts (api.min.js:2)
at api.min.js:2
HTML:
<form method="post" name="Camp-2021-05-Aware-ParkNeedsUs-FRM-Lightbox" action="https://s989596683.t.eloqua.com/e/f2" onsubmit="return handleFormSubmit(this)" id="form210" class="elq-form">
<input value="Camp-2021-05-Aware-ParkNeedsUs-FRM-Lightbox" type="hidden" name="elqFormName" />
<input value="989596683" type="hidden" name="elqSiteId" />
<input name="elqCampaignId" type="hidden" />
<div class="layout container-fluid">
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement0" class="elq-field-style form-element-layout row">
<!--div style="text-align:left;" class="col-sm-12 col-xs-12">
<label class="elq-label " for="fe2045">Email Address
</label>
</div-->
<div class="col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="field-control-wrapper" style="width: 65%; margin-left: auto; margin-right: auto;">
<input
type="text"
class="elq-item-input"
name="emailAddress"
id="f20"
style="width: 100%; font-size: 14px; color: #828282;"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue"
value="Email Address"
maxlength="50"
/>
<script type="text/javascript">
var f20 = window.document.getElementById("f20");
</script>
<script type="text/javascript">
var f20 = new LiveValidation("email");
f20.add(Validate.Email);
</script>
<script type="text/javascript">
var title = new LiveValidation("title", { onlyOnSubmit: true });
title.add(Validate.Email);
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement1" class="elq-field-style form-element-layout row">
<div class="col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div align="center">
<input type="Submit" class="submit-button-style" value="Submit" id="fe2046" style="margin-top: 8px; background-color: #286140; padding: 12px; border: none; width: 65%; color: white;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="https://img04.en25.com/i/livevalidation_standalone.compressed.js"></script>
Related
What I am trying to do: I am adding new entries whenever I submit a form and that entry should have an animation (fadeIn effect). I am adding new entries whenever I submit a form. Every entry is being added using javascript template literal in which I am adding using divisions with classes and ids. Every entry has an Id and when I use that ID to add animation, all entries get the animation as they have same ids (I know IDs should not be same that is why I am trying to change it).
What I am trying to do: I am trying to change ID of previously added entry or div.
Program is changing ID only once.
My javascript code:
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map(student => {
var passport = student.imgLink;
return `
<div class="row" id="student-id-details" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map(student => {
return `
<div class="row" id="student-id-image" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
setTimeout(changeIds, 3000);
}
const changeIds = () => {
var oldId = document.getElementById("student-id-details");
oldId.id = "no-animation";
console.log(document.querySelectorAll("#student-id-details"));
console.log(document.querySelectorAll("#no-animation"));
}
I cannot use any library or framework for doing this task.
In changeIds function, I am changing the ID. When I keep adding new entries there is only 1 node in no-animation NodeList (the first entry) and after that no ID change is taking effect.
What can be the problem here?
My html code for reference -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
<script src="script_js.js"></script>
</body>
</html>
My css code for animation -
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#student-id-image{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#student-id-details{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
I would appreciate different solutions for achieving animations in new entries only too.
You have to apply fade-in-animation class to new entry, current logic apply animation class to all list.
I just update your code with minor changes, i hope it'll help you out. Thank You
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map((student, index) => {
var passport = student.imgLink;
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills} ${index}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map((student, index) => {
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
}
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in-animation{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I am struggling with an recaptcha issue on my local. I am trying to build a register form. All examples about recaptcha are about buttons. What I want is to pop-up recaptcha modal to user when he/she clicks on checkbox which says ' I have read and accept terms and conditions.' When he/she solves recaptcha then checkbox would be checked. Here what I am trying
It did not work, after that I tried this onClick method did not work because it writes Script Error on console.
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function controlFunction() {
grecaptcha.render()
}
</script>
</head>
<body>
<div id='checkbox-form' action="?" method="POST">
<input onclick="controlFunction()" type="checkbox" class="g-recaptcha" data-sitekey="MY_LOCAL_KEY" data-callback='onClick' id="termsConditions" class="termsOkay">
<label for="termsConditions" generated="true">I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
<br/>
</div>
</body>
</html>
I know code is a mess because I tried so many different thing and this is what I got. I am really confused. All I want is if user checks the checkbox let captcha popup. When solved, checkbox is checked. How can I do it? I tried to use handleChange but could not make it either.
Here is my whole code:
<?php
// Google reCaptcha secret key
$secretKey = "REMOVEDCONTENTBYME";
$statusMsg = '';
if(isset($_POST['submit'])){
if(isset($_POST['captcha-response']) && !empty($_POST['captcha-response'])){
// Get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['captcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success){
//Contact form submission code goes here ...
$statusMsg = 'Your contact request have submitted successfully.';
}else{
$statusMsg = 'Robot verification failed, please try again.';
}
}else{
$statusMsg = 'Robot verification failed, please try again.';
}
}
?>
<?php $businessTypes = [
'Full Service',
'Quick Service',
'Bars and Clubs',
]; ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="stylesheet" href="https://use.typekit.net/fom8rbw.css">
<link rel="stylesheet" href="/wp-content/themes/thegem/css/main.css">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
<script>
var onloadCallback = function() {
grecaptcha.execute();
};
function setResponse(response) {
document.getElementById('captcha-response').value = response;
}
</script>
<?php wp_head(); ?>
<style>
html, body, .site-content {
padding: 0 !important;
margin: 0 !important;
background-color:#fff;
}
.textwidget a {
font-family: 'proxima-nova',sans-serif !important;
}
.d-none {
display: none !important;
}
.section{
background-color: #ffffff;
}
.demo-form input, .demo-form select, .demo-form textarea {
border: 1px solid #e31d93;
}
.demo-form input {
text-indent: 12px;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 1.3rem + 2px);
font-size: 1.6rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .40rem;
}
.row-m-t{
margin-top : 0px
}
</style>
<div id="page" class="site">
<div id="content" class="site-content">
<div id="primary" class="content-area demo-form">
<main id="main" class="site-main">
<div class="section blog-content">
<div class="container">
<div class="text-center"><h1 style="padding-bottom: 10rem;">Request FOrm</h1></div>
<div class="row justify-content-md-center">
<div class="col-md-6">
<form class="demo-form" method="post" onsubmit="return false" style=" position: relative; bottom: 35px; ">
<div class="row">
<div class="col-md-6 border-danger form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="firstName" placeholder="First name" style=" background-color: #fff;">
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="lastName" placeholder="Last name"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="companyName" placeholder="Group name"style=" background-color: #fff;">
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validatePhone" name="phoneNumber" placeholder="Phone number"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-12 form-group">
<input type="text" class="form-control validate" data-validate="validateEmail" name="emailAddress" placeholder="email"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-12 form-group">
<select name="businessType" id="businessType" class="form-control validate" data-validate="validateText">
<option value=""><?php _e('Select Your Business Type...', 'myfirm'); ?></option>
<?php foreach ($businessTypes as $type): ?>
<option><?php _e($type, 'myfirm'); ?></option>
<?php endforeach ;?>
</select>
</div>
</div>
<div class="row radio">
<div class="col-md-6">
<p style="font-size:13px;"><?php _e('Validate by', 'myfirm'); ?>:</p>
</div>
</div>
<div class="row radio" style="font-size:13px;">
<div class="col-md-8">
<div class="custom-control custom-radio custom-control-inline col-md-6">
<input type="radio" id="validateByPhone" checked value="phoneNumber" name="validateBy" class="custom-control-input">
<label style="font-size:12px; transform: scale(1.2);
position: relative;
left: 1rem;" class="custom-control-label" for="validateByPhone"><?php _e('Phone Number', 'myfirm'); ?></label>
</div>
<div class="custom-control custom-radio custom-control-inline col-md-6">
<input type="radio" id="validateByEmailAddess" value="emailAddress" name="validateBy" class="custom-control-input">
<label style="font-size:12px; transform: scale(1.2);
position: relative;
left: 1rem; top:5px;" class="custom-control-label" for="validateByEmailAddess"><?php _e('Email Address', 'myfirm'); ?></label>
</div>
</div>
</div>
<br>
<div class="row radio">
<div class="col-md-12" style="position: relative;right: 13px;">
<div class="custom-radio custom-control-inline col-md-12">
<div class="g-recaptcha" data-sitekey="REMOVEDCONTENTBYME" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
<input type="hidden" id="captcha-response" name="captcha-response" />
<input type="checkbox" id="captcha-response" class="termsOkay" style=" background-color: #fff;">
<label for="captcha-response" class="error" generated="true" style="position: relative;bottom: 5px;"> I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
</div>
</div>
</div>
<div class="verification-code d-none">
<div class="col">
<label for="verification-code"><?php _e('A verification code has been sent to your phone number!', 'myfirm') ?></label>
<input type="text" class="form-control" name="code" placeholder="<?php _e('Verification code', 'myfirm');?>">
</div>
</div>
<div class="row row-m-t">
<div class="col">
<button class="btn btn-myfirm send-verification-code" disabled="disabled" style="width: 100% !important;height: 125% !important;font-size: 15px;"><?php _e('Request a Demo', 'myfirm'); ?></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
</div>
</main>
</div>
</div>
</div>
</body>
<script>
function admSelectCheck(obj)
{
var nameSelect = obj.value;
console.log(nameSelect);
if(nameSelect){
admOptionValue = 'United States of America|+1';
if(admOptionValue == nameSelect){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "block";
}
}
</script>
<script>
jQuery(function() {
jQuery('input.termsOkay').change(function() {
if (!jQuery('input.termsOkay').is(':checked')) {
jQuery('.send-verification-code').prop('disabled', true)
} else{
jQuery('.send-verification-code').prop('disabled', false)
}
})
})
</script>
</html>
The part I am trying to make it work
<div class="row radio">
<div class="col-md-12" style="position: relative;right: 13px;">
<div class="custom-radio custom-control-inline col-md-12">
<div class="g-recaptcha" data-sitekey="REMOVEDCONTENTBYME" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
<input type="hidden" id="captcha-response" name="captcha-response" />
<input type="checkbox" id="captcha-response" class="termsOkay" style=" background-color: #fff;">
<label for="captcha-response" class="error" generated="true" style="position: relative;bottom: 5px;"> I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
</div>
</div>
</div>
I am trying to validate my form, but the console never shows me errors. I have done what the Bootstrap documentation says and nothing happened. I want, for example, that when clicking on the button, if any field is empty, it shows an alert or error in that field. If someone can help me, I will be very grateful.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/e6233a0317.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/product.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="./css/help.css">
<link rel="stylesheet" href="./css/tags.css">
<title>TejidosPulido E-Commerce</title>
</head>
<body>
<header id="header_menu"></header>
<br>
<main role="main">
<div class="container rounded" style="background-color: rgb(228, 225, 225);">
<br>
<form class="needs-validation" novalidate style="padding: 15px 40px;">
<div class="row">
<div class="col-sm-6" style="margin-bottom: 50px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="validationDefault01">Número de producto</span>
<input type="text" class="form-control" id="inputNum" style="text-align: end;" required>
<div class="invalid-feedback">Please choose a username.</div>
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-text title" for="inputNum">Visible</span>
<div class="input-group-text" style="background: white">
<span class="input-group-addon"><input type="radio" id="visible" name="visibilidad" value="always"> Si</span>
<span class="input-group-addon"><input type="radio" id="invisible" name="visibilidad" value="never"> No</span>
</div>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-4">
<span class="input-group-text title">Imagen de producto</span>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-6" style="margin-bottom: 15px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="inputName">Nombre del producto</span>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-4">
<div class="input-group mb-3">
<input type="file" class="form-control" id="inputImage" accept="image/*">
</div>
</div>
<div class="col-sm-1"></div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text precio title">Precio</span>
<input type="text" class="form-control" id="inputPrecio" placeholder='0.00' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">€/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text peso title">Peso</span>
<input type="text" class="form-control" id="inputPeso" placeholder='0' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">gr/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<label class="input-group-text tipo-large" for="product_type" style="background: #0bbe83; color: white; font-weight: bold;">Tipo de producto</label>
<select class="form-select" id="product_type">
<option selected>Selecciona...</option>
<option value="referencia">Referencia</option>
<option value="color">Color</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<span class="input-group-text title" for="inputDescripcion">Descripción:</span>
<textarea id="inputDescripcion" name="inputDescripcion" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
<div class="col-sm-6">
<span class="input-group-text title" for="inputFunciones">Funciones bàsicas:</span>
<textarea id="inputFunciones" name="inputFunciones" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
</div>
<br>
<div class="btn-group" role="group" style="float:right">
<button class="btn btn-dark" id="guardarButton" type="submit" class="btn btn-sm btn-outline-secondary">Guardar </button>
</div>
<br>
<br>
<br>
</form>
</div>
<hr class="featurette-divider">
<footer class="container" id= "footer"></footer>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-storage.js"></script>
<script src='./js/firebaseConfig.js'></script>
<script src="./js/session.js"></script>
<script src="./js/header.js"></script>
<script src="./js/newproducto.js"></script>
<script src="./js/footer.js"></script>
</body>
</html>
This is the javascript function:
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Span for and input id should be the same.
In your case error is actually detecting but not able to assign to the correct id w.r.t for
"I am trying to validate my form, but the console never shows me
errors"
The console shouldn't show errors because the code is working as expected.
Most likely there's a conflict with one of the many other JS files included in your environment. Also the HTML is poorly is structured (2 class attributes on the button) and the invalid-feedback needs to be in the same parent as the inputs.
I have this form with a some input text and one of an input multiple file. The problem is that when loading another file after loading one or more files, the previously loaded files are overwritten by the last loaded.
This is the code for the form and the jquery code for the ajax call to the php file for manipulate the form data.
$('form#formNewChallenge').submit(function(e){
$('#loaderDiv').removeClass('hidden-div');
e.preventDefault();
var form_data = new FormData(this);
$.ajax({
type: 'post',
url: './function/insert_challenge.php',
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function (answ) {
let json = $.parseJSON(answ);
var title_max = 60;
var text_max = 90;
if(json == "TUTTO OK"){
$('#loaderDiv').addClass('hidden-div');
$('#alertNewChallenge').removeClass('hidden-div').addClass('alert-success').text('Grazie per aver inserito la challenge').show(0).delay(5000).hide(0);
$("#formNewChallenge").trigger("reset");
$('#inputTag').tagsinput('removeAll');
$('#uploadDoc').next('.custom-file-label').html("Carica documentazione");
$('#uploadPhoto').next('.custom-file-label').html("Carica una foto");
$('#count_title').html('0' + ' / ' + title_max);
$('#count_short_description').html('0' + ' / ' + text_max);
// $("#formNewChallenge")[0].reset();
//$('#uploadPhoto').val("");
// $('#uploadDoc').val('');
// $('#inputTag').val('');
$("div.has-success").removeClass('has-success');
$("input.form-control-success").removeClass('form-control-success');
location.reload();
}
else{
$('#loaderDiv').addClass('hidden-div');
$('#alertNewChallenge').removeClass('hidden-div').addClass('alert-danger').text(json).show(0).delay(5000).hide(0);
}
}
})
});
$('#uploadDoc').on('change', function () {
var fileName = [];
fileName = $(this).val();
const numFiles = $(this)[0].files.length;
if(numFiles == 1)
$(this).next('.custom-file-label').html(fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.length));
else
$(this).next('.custom-file-label').html(numFiles + ' files caricati');
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<form action="" id="formNewChallenge" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="col-sm-12" style="padding-top: 15px;">
<div class="form-group">
<input onchange="checkTitle(this);" type="text" id="inputName" name="nome" class="form-control" placeholder="Nome Challenge">
<span class="float-right " style="color: #999999; padding-bottom: 20px; margin-top: -30px; margin-right: 32px;" id="count_title"></span>
</div>
</div>
<div class="col-sm-12 well">
<div class="form-group">
<textarea onchange="checkTitle(this);" id="inputShortDescription" rows="6" name="shortDescription" class="form-control" placeholder="Breve descrizione"
style="resize: none;"></textarea>
<span class="float-right " style="color: #999999; padding-bottom: 20px; margin-top: -30px; margin-right: 12px;" id="count_short_description"></span>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<textarea onchange="checkTitle(this);" id="inputLongDescription" rows="9" class="form-control" placeholder="Descrizione" style="resize: none;" name="longDescription"
></textarea>
<span class="float-right " style="color: #999999; padding-bottom: 20px; margin-top: -30px; margin-right: 12px;" id="count_long_description"></span>
</div>
</div>
<div id="tipoMontepremi" class="col-sm-12">
<div class="form-group">
<!-- <input type="number" id="inputMontepremi" name="montepremi" class="form-control" placeholder="Montepremi" min="1"> -->
<select id="selectType" name="selectType" class="form-control" style="text-align-last:center;" onchange="changePrize();">
<option value="default" name="default" selected="">Montepremi</option>
<option value="stage" name="stage">Stage</option>
<option value="compenso" name="compenso">Compenso Monetario</option>
<option value="lavoro" name="lavoro">Offerta di Lavoro</option>
</select>
</div>
</div>
<div id="divInputMontepremi" class="col-sm-6 hidden-div">
<div class="form-group">
<input style="padding-left:20px; text-align:left;" type="number" id="inputMontepremi" name="montepremi" class="form-control" placeholder="Montepremi">
</div>
</div>
<!-- <div class="col-sm-6">
<div class="form-group">
<input type="text" placeholder="Prima Scadenza" class="form-control" id="primaScadenza" name="fine_primo_termine"
onfocus="(this.type='date')">
</div>
</div> -->
<div class="col-sm-12">
<div class="form-group">
<input style="text-indent: 10px;" type="text" placeholder="Termine" data-provide="datepicker" class="datepicker form-control" id="termine" name="data_scadenza">
</div>
<!-- <div class="input-group date" data-provide="datepicker">
<input placeholder="Termine" type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div> -->
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="custom-file">
<input type="file" name="foto" class="custom-file-input" id="uploadPhoto" accept=".png, .jpg, .jpeg">
<label class="custom-file-label" for="uploadPhoto">Carica una foto</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" name="files[]" id="uploadDoc" multiple >
<label class="custom-file-label" for="uploadDoc">Carica documentazione</label>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input id="inputTag" name="microcategorie" type="text" class="form-control" value="" placeholder="Tags " data-placeholder="Tags " data-role="tagsinput">
</div>
</div>
<!-- ANONIMATO -->
<div class="col-sm-12" style="padding-top: 20px">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="anonymous" id="anonymous">
<label class="form-check-label" for="anonymous">Desidero pubblicare in anonimato</label>
</div>
</div>
<div class="col-sm-12" style="padding-top: 20px">
<div class="form-group">
<span style="font-weight: bold;">NOTA: </span>Ti consigliamo un'immagine alta 185px e larga 350px
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div id="alertNewChallenge" class="alert hidden-div"></div>
</div>
</div>
<!-- <div class="row text-center"> -->
<div id="loaderDiv" class="col-sm-12 text-center hidden-div">
</div>
<!-- </div> -->
<!-- <div class="col-sm-12">
<div id="divProgress" class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="background-color: #5cb85c; width:90%">90%</div>
</div>
</div> -->
<div class="col-md-12 text-center" style="padding-bottom: 40px;">
<button style="margin-top: 30px;" id="insertNewChallenge" class="btn btn-primary contact text-center" type="submit">PUBBLICA</button>
</div>
</div>
</div>
</form>
My actual html code:
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="<?php echo $adminData->name; ?>">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="<?php echo $adminData->email; ?>">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>
I have multiple such panels, each one with a button that has specific ID. My goal is to collect all the input within the panel that the button was pressed. Although this sounds easy, my MAIN goal is to reuse the same function on multiple pages that have multiple panels (since the structures is simillar), to then use ajax to update the information. The only thing that I would need to provide the function is the id of the button so it can find automatically the relative input.
I am trying to accomplish this in vanilla js, though im ok with jquery.
My actual js code:
document.getElementById('savePersInfo').onclick = function(){
var inputArray = ['adminName', 'adminEmail'];
console.log(collectInfo(inputArray));
};
function collectInfo(inputArray){
$inputValueArray = []
for(var c = 0; c < inputArray.length; c++){
$inputValueArray[c] = document.querySelectorAll('[name="' + inputArray[c] + '"]')[0].value;
}
return $inputValueArray;
}
As you see here I need to specify the name of the input to be able to retrieve it, what I want is not to do that and have JS find it automatically based on the panel is was clicked on.
Any suggestions/ideas on how this can be accomplished ?
ps: ignore the inline styling and other layout stuff, early development phase.
You can use either javasscript's closest() or jQuery's closest(), and with those find the closest element being ancestor to both the button and input's, e.g. panel-body.
From there you then simply use that element as starting point, e.g. with javascript element.querySelectorAll), and select all inputs and grab their value.
Note, if to use the javascript version and support IE (it doesn't know of closest()), you can make use of the "polyfill" I added at the end.
Updated based on a comment, where I added a checkbox and select to my "javascript" code sample to show it works with those too, and how to get the button id.
Stack snippet - javascript
document.querySelectorAll('button').forEach( function(btn) {
btn.addEventListener('click', findInputs);
})
function findInputs() {
console.clear();
var button_id = this.id;
this.closest('.panel-body').querySelectorAll('input, select').forEach( function(inp) {
var test_checked = ((inp.type == 'checkbox' && inp.checked) ? ' checked' : '');
console.log(button_id, inp.value + test_checked)
})
}
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="name 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="email 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Test</span>
<input type="checkbox" name="adminTest" class="form-control" value="test 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Test 2</span>
<select name="adminTest2" class="form-control">
<option value="Test2-a">Test2-a</option>
<option selected value="Test2-b">Test2-b</option>
<option value="Test2-c">Test2-c</option>
</select>
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>
Stack snippet - jQuery
$('button').each( function() {
$(this).click(findInputs);
})
function findInputs() {
$(this).closest('.panel-body').find('input').each( function() {
console.log( $(this).val() );
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="name 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="email 1">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>
<hr>
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal 2
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="name 2">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="email 2">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo2">Guardar Alteração 2</button>
</div>
</div>
</div>
Add javascript closest() support for IE9+
if (!Element.prototype.matches)
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
if (!Element.prototype.closest)
Element.prototype.closest = function(s) {
var el = this;
if (!document.documentElement.contains(el)) return null;
do {
if (el.matches(s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
Src: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
You can use Element.closest() on the element with the passed id to target the panel you are looking for. Then use Array.prototype.map() to return the value of all inputs from the selected panel.
Try the following way:
document.getElementById('savePersInfo').onclick = function(){
console.log(collectInfo(this.id));
};
function collectInfo(id){
var panel = document.getElementById(id).closest(".panel.panel-primary")
var $inputValueArray = [...panel.querySelectorAll('input[type=text]')].map(i => i.value);
return $inputValueArray;
}
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="John Michale Kane">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="john#gmail.com">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>