JQuery - Reformat number order when html element is removed - javascript

I am currently trying to get a basic but of functionality working where I say have 5 rows, each with there own number.
So I have 5 rows .......5,4,3,2,1 <--- If I remove say 3 it should then look like 4,3,2,1 and so am effectively reflecting I now only have 4 now instead of 5.....if I remove another value it then goes to 3,2, 1 and so on.
I have been somewhat close but cant quite get it to work.
Here is the JSfiddle
jQuery(function($) {
var countercontact = 0;
var counternum = 0;
$("#addcontact").on('click', function() {
countercontact++;
$("#contact_num").append('<div class="row"><div class="form-group col-xs-1 contactspan"><span class="countercontact">' + countercontact + '.</span></div><div class="form-group col-xs-3"><input type="text" class="form-control" id="pass" placeholder="No number"></div><div class="form-group col-xs-2"><select class="form-control" id="delay"><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option><option>60</option></select></div><div class="form-group col-xs-2">\<input type="checkbox" class="form-control" id="confirm"></div><div class="form-group col-xs-2"><input type="checkbox" class="form-control" id="enable"></div><div class="form-group col-xs-2"><button type="submit" class="btn btn-primary form-control deletecontact">Delete</button></div></div>');
if (countercontact === 1) {
$(".deletecontact").addClass('disabled');
} else {
$(".deletecontact").removeClass('disabled');
}
});
$("#contact_num").on("click", ".deletecontact", function() {
if (countercontact <= 1) {
$(".deletecontact").addClass('disabled');
} else {
$(".deletecontact").removeClass('disabled');
$(this).closest('.row').remove();
countercontact--;
$(".contactspan").each(function(index) {
var ordernum = $(this).text();
console.log(ordernum);
if (ordernum !== 1) {
$(this).text(parseInt($(this).text()) - 1);
}
});
}
});
});
.container {
width: 75%;
}
.row {
margin-bottom: 12px;
font-size: 13px;
}
.panel {
border: none;
box-shadow: none;
}
.panel-heading {
background-color: #D9DBDE;
padding: 20px;
margin-bottom: 10px;
border-radius: 0;
}
.panel-heading.head {
padding: 20px 0;
background-color: #E1F2F9;
}
.panel-body {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body row">
<div class="form-group" id="contact_num">
<div class="row">
<div class="form-group col-md-1">
<label for="pass"></label>
</div>
<div class="form-group col-md-3">
<label for="pass">Contact No(s)</label>
</div>
<div class="form-group col-md-2">
<label for="delay">Delay</label>
</div>
<div class="form-group col-md-2">
<label for="confirm">Confirm</label>
</div>
<div class="form-group col-md-2">
<label for="enable">Enable</label>
</div>
<div class="form-group col-md-2">
<label for="delete"></label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="addcontact" style="margin-bottom: 10px;">Add</button>
</div>
</div>


You can write a function that corrects numbers and run whenever needed like after removing an item.
function correctIndex(){
$('#contact_num .row').each(function(){
$(this).find('.contactspan').html($(this).index()+1);
});
}
Or you just change this part of your code:
$(".contactspan").each(function(index) {
var ordernum = $(this).text();
console.log(ordernum);
if (ordernum !== 1) {
$(this).text(parseInt($(this).text()) - 1);
}
});
to:
$(".contactspan").each(function(){
$(this).html($(this).closest('.row').index() + '.')
});
Here is updated fiddle


Please check below snippet.
I have made change in the reassigning of number as following.
var ordernum = 1;
$(".contactspan").each(function(index) {
$(this).text(ordernum);
ordernum++;
});
First assign the order number to 1 and then gradually increase it further rows.
jQuery(function($) {
var countercontact = 0;
var counternum = 0;
$("#addcontact").on('click', function() {
countercontact++;
$("#contact_num").append('<div class="row"><div class="form-group col-xs-1 contactspan"><span class="countercontact">' + countercontact + '.</span></div><div class="form-group col-xs-3"><input type="text" class="form-control" id="pass" placeholder="No number"></div><div class="form-group col-xs-2"><select class="form-control" id="delay"><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option><option>60</option></select></div><div class="form-group col-xs-2">\<input type="checkbox" class="form-control" id="confirm"></div><div class="form-group col-xs-2"><input type="checkbox" class="form-control" id="enable"></div><div class="form-group col-xs-2"><button type="submit" class="btn btn-primary form-control deletecontact">Delete</button></div></div>');
if (countercontact === 1) {
$(".deletecontact").addClass('disabled');
} else {
$(".deletecontact").removeClass('disabled');
}
});
$("#contact_num").on("click", ".deletecontact", function() {
if (countercontact <= 1) {
$(".deletecontact").addClass('disabled');
} else {
$(".deletecontact").removeClass('disabled');
$(this).closest('.row').remove();
countercontact--;
var ordernum = 1;
$(".contactspan").each(function(index) {
$(this).text(ordernum);
ordernum++;
});
}
});
});
.container {
width: 75%;
}
.row {
margin-bottom: 12px;
font-size: 13px;
}
.panel {
border: none;
box-shadow: none;
}
.panel-heading {
background-color: #D9DBDE;
padding: 20px;
margin-bottom: 10px;
border-radius: 0;
}
.panel-heading.head {
padding: 20px 0;
background-color: #E1F2F9;
}
.panel-body {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body row">
<div class="form-group" id="contact_num">
<div class="row">
<div class="form-group col-md-1">
<label for="pass"></label>
</div>
<div class="form-group col-md-3">
<label for="pass">Contact No(s)</label>
</div>
<div class="form-group col-md-2">
<label for="delay">Delay</label>
</div>
<div class="form-group col-md-2">
<label for="confirm">Confirm</label>
</div>
<div class="form-group col-md-2">
<label for="enable">Enable</label>
</div>
<div class="form-group col-md-2">
<label for="delete"></label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="addcontact" style="margin-bottom: 10px;">Add</button>
</div>
</div>


The following is causing the behaviour:
var ordernum = $(this).text();
console.log(ordernum);
if (ordernum !== 1) {
$(this).text(parseInt($(this).text()) - 1);
}
ordernum is in this case 1. so you have to convert it to an int just like you do in the if clause.
var ordernum = parseInt($(this).text());
console.log(ordernum);
if (ordernum !== 1) {
$(this).text(ordernum - 1);
}
See https://jsfiddle.net/YvCil/ajgm9rhw/1/

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 remove one whole div dynamically

I have 2 buttons in a div :
plus button
minus button
when I click plus button, I'm creating another same div by cloning it and it is working fine, but when I click on minus button, in the same way, I need to remove one whole div, here is my code :
$(document).ready(function() {
var addMoreConditions = function(evt) {
var $div = document.getElementById('query_area');
var queryDiv = document.getElementsByClassName('search_criteria1');
// $div.appendChild($div);
$(".search_criteria1:last").clone().insertAfter("div.search_criteria1:last");
};
});
var removeConditions = function(ev) {
$('#query_area').remove($(ev).parent()[0]);
}
.m-form__group {
padding-left: 30px;
padding-right: 30px;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group m-form__group row">
<div class="search_criteria1 form-group m-form__group row">
<div class="col-4">
<select class="field_attr1 form-control m-input"></select>
</div>
<div class="col-3">
<select class="condition_div1 form-control m-input">
<option value="eq">=</option>
<option value="neq">!=</option>
</select>
</div>
<div class="col-3">
<input type="text" class="fieldValue1 form-control m-input" />
</div>
<div class="col-1" onclick="addMoreConditions()">
<input class="btn btn-primary" type="button" name="btn3" value="+">
</div>
<div class="col-1" style="padding-left:20px" onclick="removeConditions(this)">
<input class="btn btn-primary" type="button" name="btn3" value="-">
</div>
</div>
</div>

First of all, you need to remove $(document).ready as you are using inline events. And inline handler expects function to be under global scope. In your example, then are under local scope of $(document).ready
While removing, you can use .closest() to select respective element to be removed.
var addMoreConditions = function(evt) {
var $div = document.getElementById('query_area');
var queryDiv = document.getElementsByClassName('search_criteria1');
// $div.appendChild($div);
$(".search_criteria1:last").clone().insertAfter("div.search_criteria1:last");
};
var removeConditions = function(ev) {
$(ev).closest('.search_criteria1').remove();
}
.m-form__group {
padding-left: 30px;
padding-right: 30px;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group m-form__group row">
<div class="search_criteria1 form-group m-form__group row">
<div class="col-4">
<select class="field_attr1 form-control m-input"></select>
</div>
<div class="col-3">
<select class="condition_div1 form-control m-input">
<option value="eq">=</option>
<option value="neq">!=</option>
</select>
</div>
<div class="col-3">
<input type="text" class="fieldValue1 form-control m-input" />
</div>
<div class="col-1" onclick="addMoreConditions()">
<input class="btn btn-primary" type="button" name="btn3" value="+">
</div>
<div class="col-1" style="padding-left:20px" onclick="removeConditions(this)">
<input class="btn btn-primary" type="button" name="btn3" value="-">
</div>
</div>
</div>

<div class="col-1 removeitem" style="padding-left:20px">
give some specific class or id id used one class
$(document).on("click", ".removeitem", function (e) {
//user click on remove
e.preventDefault();
$(this).parent().remove();
});

You need to go up to the parent element then remove it like :
$(ev).closest('.search_criteria1').remove();
NOTE 1: When you clone the div it will be cloned with the user inputs, means if the user typed 100 in the last input then you clicked the plus button, the value of the input in the new cloned div will be 100 too. if you want to init the input/select for the new instance you could use the cloned div cloned_div as variable and init them first then push them to the view.
NOTE 2: You don't need the queryDiv and $div variables in your code, just remove them.
var addMoreConditions = function(evt) {
var last_div = "div.search_criteria1:last";
var cloned_div = $(last_div).clone();
cloned_div.find('.fieldValue1').val("");
cloned_div.find('select').val("");
cloned_div.insertAfter(last_div);
};
var removeConditions = function(ev) {
$(ev).closest('.search_criteria1').remove();
}
$('button').click(function() {
$('.search_criteria1').each(function(index) {
index++;
console.log('Field Attribute ' + index + ' : ' + $('.field_attr1', this).val());
console.log('Condition Value ' + index + ' : ' + $('.condition_div1', this).val());
console.log('Field Value ' + index + ' : ' + $('.fieldValue1', this).val());
console.log('--------------------------------------');
})
})
.m-form__group {
padding-left: 30px;
padding-right: 30px;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group m-form__group row">
<div class="search_criteria1 form-group m-form__group row">
<div class="col-4">
<select class="field_attr1 form-control m-input"></select>
</div>
<div class="col-3">
<select class="condition_div1 form-control m-input">
<option value="eq">=</option>
<option value="neq">!=</option>
</select>
</div>
<div class="col-3">
<input type="text" class="fieldValue1 form-control m-input" />
</div>
<div class="col-1" onclick="addMoreConditions(this)">
<input class="btn btn-primary" type="button" name="btn3" value="+">
</div>
<div class="col-1" style="padding-left:20px" onclick="removeConditions(this)">
<input class="btn btn-primary" type="button" name="btn3" value="-">
</div>
</div>
</div>
<button type="button">GET DATA</button>

In Meteor, how can I link a collectionFS image to the right document?

I actually found this answer but I couldn't really get it.
So, I have this mongo collection, I want to link the image from the collectionFS to the proper parent document. How can I do it? Here's the code :
the declaration of the collections
AccommodationList = new Mongo.Collection('accommodation');
ImagesAcc = new FS.Collection("imagesacc", {
stores: [new FS.Store.FileSystem("imagesacc", {path: "~/uploads"})]
});
if(Meteor.isClient){
Template.accommodations.helpers({
'accommodation': function(){
return AccommodationList.find();
}
});
Template.photopageaccommodation.helpers({
imagesacc: ImagesAcc.find()
});
Template.photopageaccommodation.events({
'dblclick .uploadedImage': function(e){
var confirm = window.confirm("Etes-vous sur ??");
if(confirm){
ImagesAcc.remove({_id:this._id});
Bert.alert('Vous venez de supprimer', 'warning', 'growl-top-right');
}
}
});
Template.photopageaccommodation.events({
'change #accfile': function(event, template) {
event.preventDefault();
FS.Utility.eachFile(event, function(file) {
ImagesAcc.insert(file, function (err, fileObj) {
//Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
});
});
}
});
}
the submit form
Template.accommodations.events({
'submit #accommodation': function(){
event.preventDefault();
var accommodationNomVar = event.target.nom.value;
var accommodationDescriptionVar = event.target.description.value;
var accommodationTarifVar = event.target.tarif.value;
var accommodationNbrEtoilesVar = event.target.nbretoiles.value;
var accommodationTypeExcluVar = event.target.typeexclu.value;
var accommodationTypeVar = event.target.type.value;
var accommodationAddresseVar = event.target.addresse.value;
var accommodationTelephoneVar = event.target.telephone.value;
var accommodationEmailVar = event.target.email.value;
AccommodationList.insert({
nom: accommodationNomVar,
description: accommodationDescriptionVar,
tarif: accommodationTarifVar,
nbretoiles: accommodationNbrEtoilesVar,
typeexclu: accommodationTypeExcluVar,
type: accommodationTypeVar,
addresse: accommodationAddresseVar,
email: accommodationEmailVar,
telephone: accommodationTelephoneVar,
});
event.target.reset();
},
'click .delete': function(){
var confirm = window.confirm("Etes-vous sur ??");
if(confirm){
AccommodationList.remove(this._id);
Bert.alert('Vous venez de supprimer', 'warning', 'growl-top-right');
}
},
});
here's the template
<template name="accommodations">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form id="accommodation">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Nom</label>
<input type="text" class="form-control" placeholder="Nom" name="nom">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Type</label>
<input type="text" class="form-control" placeholder="Type" name="type">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" placeholder="Description" name="description">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Nombre d'etoiles</label>
<input type="number" class="form-control" placeholder="Nombre d'etoiles" name="nbretoiles">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Type d'exclusivite</label>
<input type="text" class="form-control" placeholder="Type d'exclusivite" name="typeexclu">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Tarif</label>
<input type="number" class="form-control" placeholder="Tarif" name="tarif">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Telephone</label>
<input type="text" class="form-control" placeholder="Telephone" name="telephone">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Addresse</label>
<input type="text" class="form-control" placeholder="Addresse" name="addresse">
</div>
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-info btn-fill pull-right">Ajouter</button>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
<br>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">Table des accommodations</h4>
<p class="category">Here is a subtitle for this table</p>
</div>
<div class="content table-responsive table-full-width">
<table class="table table-hover table-striped">
<thead>
<th>ID</th>
<th>Nom</th>
<th>Type</th>
<th>Description</th>
<th>Etoiles</th>
<th>Tarif</th>
<th>Telephone</th>
<th>Email</th>
<th>Adresse</th>
<th></th>
</thead>
<tbody>
{{#each accommodation}}
<tr>
<td>{{id}}</td>
<td>{{> editableText collection="accommodation" field="nom" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="type" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="description" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="nbretoiles" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="tarif" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="telephone" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="email" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="addresse" eventType="dblclick"}}</td>
<td><a class="delete"><a class="btn btn-danger"><i class="fa fa-trash"></i></a></a>
<a class="btn btn-gray"><i class="fa fa-camera"></i></a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
and here's the template where the image is actually loaded from and displayed
<template name="photopageaccommodation">
<style>
.section-title h2 {
display: inline-block;
font-size: 30px;
font-weight: 300;
line-height: 30px;
margin-bottom: 40px;
padding-bottom: 10px;
position: relative;
text-transform: uppercase;
}
.section-title h2:before {
position: absolute;
background: #575757;
height: 2px;
width: 45px;
content: "";
bottom: 0;
}
.portfolio-menu button.mixitup-control-active {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 2px solid #4bcaff;
color: #4bcaff;
padding: 10px 15px;
font-weight: 700;
transition: .4s;
text-transform: uppercase;
}
.portfolio-menu button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 2px solid transparent;
color: #515f67;
padding: 10px 15px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}
.single-portfolio a {
display: block;
line-height: 0;
position: relative;
}
.single-portfolio a::before {
background: #000 none repeat scroll 0 0;
content: "";
height: 100%;
opacity: 0;
position: absolute;
top: 0;
transform: scale(0.5);
transition: all 0.3s ease 0s;
width: 100%;
}
.single-portfolio:hover a::before {
opacity: .5;
transform: scale(1);
}
.single-portfolio a::after {
color: #fff;
content: "+";
font-size: 60px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 50%;
transform: scale(0);
transition: all 0.3s ease 0s;
}
.single-portfolio:hover a::after {
transform: scale(1);
}
</style>
<script>
$(document).ready(function() {
// This will create a single gallery from all elements that have class "gallery-item"
$('.gallery-item').magnificPopup({
type: 'image',
gallery:{
enabled:true
}
});
// MixItUp 2
$('#container').mixItUp();
});
</script>
<div class="wrapper">
{{>sidebar}}
<div class="main-panel">
{{>navbar}}
<div class="content">
<div class="form-group">
<label>Photos</label>
<input type="file" multiple id="accfile" class="form-control">
</div>
<div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.min.js"></script>
<div class="container">
<div id="container" class="row">
{{#each imagesacc}}
<div class="col-md-4 mix category-a">
<div class="single-portfolio">
<div class="uploadedImage">
<!--<a class="gallery-item" href="{{this.url}}">-->
<img class="img-responsive" src="{{this.url}}" alt="One" />
<!--</a>-->
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{>footer}}
</div>
</div>
The thing is that this is working, but the problem is that the images I add are not linked to a specific document, I want for example, when looking at an accommodation, I want to see only the images of that hotel !
Thanks for helping !

The _id of the inserted file is returned in the callback from the insert function. Where you now have:
FS.Utility.eachFile(event, function(file) {
ImagesAcc.insert(file, function (err, fileObj) {
//Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
});
});
you need to have some actual code in the callback to save the image's _id to another collection as a reference.
For example, if your uploaded is running with the data context of an individual accommodation (so that this points to your current AccommodationList object), you can directly update that as follows:
FS.Utility.eachFile(event, function(file) {
ImagesAcc.insert(file, function (err, fileObj) {
if (!err) {
console.log('The _id of the inserted Image is: '+fileObj._id);
console.log('The _id of the current AccommodationList object is: '+this._id);
AccommodationList.update(this._id,{ $set: { imageId: fileObj._id }});
}
});
});
The console.log() statements are only there for you to verify how this is working. This pattern assumes that there's only one image for each accommodation. To find that one image given the _id aclistId of the parent AccommodationList object:
const imageId = AccommodationList.findOne(aclistId).imageId;
const image = ImagesAcc.findOne(imageId);
If you have a set of images then you can use $push instead:
AccommodationList.update(this._id,{ $push: { imageIds: fileObj._id }});
Then you have to find all matching images with $in::
const imageIds = AccommodationList.findOne(aclistId).imageIds;
const images = ImagesAcc.findOne({ _id: { $in: imageIds }});
Bonne chance!

I am having trouble with validation and form wizard

I have tried to add a form wizard with validation. The main problem I am facing is the disable function of the steps doesnt work. When I click on the step numbers on top, it just goes off without any validation.
Here is my html
<div class="x_content">
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
</div>
</div>
</div>
</form>
</div>
</div>
My CSS:
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
The JS:
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
Please let me know what am I doing wrong. How can I get it to work normally.
Thanks a lot.

You are triggering the click event from allNextBtn.click(function(){.
You may consider trigger( event [, extraParameters ] ) can use extra parameters.
Taking advantage of this you may distinguish if you are triggering from the above function or from the user.
Moreover, before to remove disabled atribute for the next element:
nextStepWizard.removeAttr('disabled').trigger('click', {'isManual': true});
you need to add the disabled attribute to all (so only one will be enabled):
$('div.setup-panel div a[href^="#"]').attr('disabled', 'disabled')
My snippet:
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e, isManual) {
e.preventDefault();
//
// test if the click event is ....
//
if (($('div.setup-panel div a[disabled]').length == ($('div.setup-panel div a').length - 1)) &&
(isManual === undefined)) {
return;
}
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) {
if (nextStepWizard.index(('div.setup-panel div a')) == ($('div.setup-panel div a').length - 1)) {
//
// remove the disabled attribute to all
//
$('div.setup-panel div a[href^="#"]').removeAttr('disabled');
nextStepWizard.trigger('click', {'isManual': true});
} else {
//
// add the disabled attribute to all
//
$('div.setup-panel div a[href^="#"]').attr('disabled', 'disabled');
//
// remove disabled only for the right element
//
nextStepWizard.removeAttr('disabled').trigger('click', {'isManual': true});
}
}
});
$('div.setup-panel div a.btn-primary').trigger('click', {'isManual': true});
});
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="x_content">
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
</div>
</div>
</div>
</form>
</div>
</div>

Error on calling parse.com cloud code from browser

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.

Categories