Error on calling parse.com cloud code from browser - javascript

I'm trying to call from a browser with Javascript to Parse.com CloudCode. But, when I call it, JS sends me back an error like:
Object {code: -1, message: ""};
Any idea?
This is my code:
$(function() {
Parse.$ = jQuery;
Parse.initialize("XX", "XX");
$('.form-horizontal').on('submit', function(e) {
var enrll = document.getElementById("enNum").value;
var keyNum = document.getElementById("key").value;
Parse.Cloud.run("GetMonth", {
enrollmentNbr: enrll,
key: keyNum,
month: ""
}, {
success: function(result) {
document.getElementById("comment").value = result;
},
error: function(e) {
//error
console.log(e);
}
});
});
});
.container {
margin-left: auto;
margin-right: auto;
width: 700px;
}
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
.textarea {
margin-left: 230px;
margin-right: 230px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="container">
<h2>Add your key and your Enrollment number</h2>
<div class="modal-content">
<div class="modal-header" >
<h4><span class="glyphicon glyphicon-lock"></span> Credentials</h4>
</div>
<br />
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Enrollment number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="enNum" placeholder="Enrollment number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Access Key:</label>
<div class="col-sm-10">
<input type="text"class="form-control" id="key" placeholder="EA Access Key">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div class="form-group">
<label for="comment">csv</label>
<textarea class="form-control" rows="1000" id="comment" ></textarea>
</div>
https://jsfiddle.net/74dn34L7/
I know I don't arrive to Parse because the logs are not raised.
Thanks a lot.

Related

Function changing id only once. [Javascript]

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>

How to enable invisible ReCAPTCHA on checkbox onclick

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>

Javascript Null Error with LiveValidation

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>

Input file no overriding file but append

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>

Bootstrap modal not hiding (ASP.NE MVC)

I have bootstrap modal with some inputs and button.
Here is code
<div class="modal fade" id="myModal2" role="dialog" data-backdrop="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Добавить получателя</h4>
</div>
<div class="modal-body">
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="email2" ,="" placeholder="Email">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="name2" ,="" placeholder="Ф.И.О">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="telephone2" ,="" placeholder="Телефон">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="profession2" ,="" placeholder="Ваша профессия">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="Comment2" ,="" placeholder="Комментарий">
</div>
<div class="form-group" style="text-align:center">
<input type="button" id="send_mail2" value="Отправить" class="btn btn-default" style="margin-right: 40px;">
</div>
</div>
</div>
</div>
</div>
When I click button, script send AJAX request and on back end method send email to recipient.
Here is JS script:
<script>
$(document).ready(function () {
$('#send_mail2').click(function () {
send_email2();
});
});
function send_email2() {
$.ajax({
type: 'Post',
dataType: 'Json',
data: {
From2: $('#email2').val(),
Name2: $('#name2').val(),
Telephone2: $('#telephone2').val(),
Profession2: $('#profession2').val(),
Comment2: $('#Comment2').val(),
},
url: '#Url.Action("SendEmail2", "Home")',
success: function (da) {
if (da.Result === "Success") {
alert("Sucess");
//$("#myModalDoctors").modal();
$("#myModal2").modal("hide");
} else {
alert('Error' + da.Message);
}
},
error: function (da) {
alert('Error');
}
});
}
With back-end all okay and alert is working. But modal is not hiding . Where can be trouble?
I tried also $("#myModal2").modal('hide'); and it not works too.

Here is the code and it's working. Probably your ajax call is not firing success callback.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Fullscreen backgrounds with centered content">
</head>
<body>
<button type="button" data-toggle="modal" data-target="#myModal2">Open Modal</button>
<div class="modal fade" id="myModal2" role="dialog" data-backdrop="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Добавить получателя</h4>
</div>
<div class="modal-body">
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="email2" ,="" placeholder="Email">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="name2" ,="" placeholder="Ф.И.О">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="telephone2" ,="" placeholder="Телефон">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="profession2" ,="" placeholder="Ваша профессия">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="Comment2" ,="" placeholder="Комментарий">
</div>
<div class="form-group" style="text-align:center">
<input type="button" id="send_mail2" value="Отправить" class="btn btn-default" style="margin-right: 40px;">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#send_mail2').click(function() {
$("#myModal2").modal("hide");
});
});
</script>
</body>
</html>

Categories