very silly problem but cant seem to get it. i have submit button on form disabled by default. and want to enable if none of the inputs have materialize class invalid or they are empty, works with empty but cant figure out why the check for invalid not working $(this).is( ".invalid" ) code below:
$(document).ready(function() {
$('input').keyup(function() {
var empty = false;
$('input').each(function() {
if (($(this).val().length == 0) || $(this).is( ".invalid" )) {
empty = true;
}
});
var submitBtn = $('.btn[type="submit"]');
if (empty) {
submitBtn.attr('disabled', 'disabled');
} else {
submitBtn.attr('disabled', false);
}
});
});
<div class="container">
<div class="row">
<div class="col s12 ">
<div id="main" class="card">
<div class="card-content deep-orange lighten-5">
<span class="card-title">Ajax Form</span>
<form action="submit">
<div class="row">
<div class="input-field col s6">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field col s6">
<input id="phone" type="text" class="validate">
<label for="phone">Input</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="age_input" type="number" class="validate">
<label for="age_input">Age</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="noyp_input" type="number" class="validate">
<label for="noyp_input">Number</label>
</div>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action" disabled="disabled">Submit
<i class="material-icons right">send</i>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
I have three suggestions to make and a warning to give regarding your code:
Prefer prop to attr (see this answer).
Break the loop once the flag has been set to true; there is no need to search anymore.
Simply pass the result of the empty flag to the disabled property.
Beware that the content of an input can change via copy-paste, drag-n-drop or through the console and keyboard events such as keyup don't detect such changes.
Code:
/* ----- JavaScript ----- */
$(document).ready(function() {
$('input').keyup(function() {
/* Create a flag. */
var empty = false;
/* If any input is empty or invalid set the flag to true and break. */
$('input').each(function() {
if (!this.value.length || $(this).is(".invalid")) {
empty = true;
return false;
}
});
/* Set 'disabled' to the value of the flag. */
$('.btn[type="submit"]').prop("disabled", empty);
});
});
/* For the other buttons. */
$("#add").click(()=>$('input').addClass("invalid"));
$("#remove").click(()=>$('input').removeClass("invalid"));
<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
<div>
<button id = "add">Add 'invalid'</button>
<button id = "remove">Remove 'invalid'</button>
<button class="btn" type="submit" disabled>Submit</button>
</div>
Better use input event instead of keyup as user can paste the value.
Uncomment input class="invalid" in the snippet to test that case.
$(function() {
$('input').on('input', function() {
$('.btn[type="submit"]').prop('disabled',
$.grep($('input'), function(i) {
return i.value === '' || $(i).hasClass('invalid')
}).length > 0)
});
$('form').on('submit', function(e) {
e.preventDefault;
alert('submit')
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input><br>
<input><br>
<!-- input class="invalid"><br -->
<input><br>
<button class="btn" type="submit" disabled>GO</button>
</form>
Related
What I am trying to accomplish and have been unable to figure out after reading from different sources all day is, how do I get the disabled attribute from a button to go away once all of the fields have input? At this point in time it doesn't really matter what is in the fields as long as they have something. I have worked on a addEventListener which I tried doing a if(validateForm()) createBtn.removeAttribute('disabled');
const form = document.getElementById('createForm')
// Selecting all text elements
const createBtn = document.getElementById('createBtn');
/*
methods to validate user input
*/
// validate that all fields have input
function validateForm() {
// get values from input
const studentIdValue = studentID.value.trim();
const emailValue = email.value.trim();
const usernameValue = username.value.trim();
const firstnameValue = firstname.value.trim();
const lastnameValue = lastname.value.trim();
const passwordValue = password.value.trim();
const password2Value = password_confirm.value.trim();
if(studentIdValue !== "" && emailValue !== "" && usernameValue !== "" && firstnameValue !== '' && lastnameValue !== '' && passwordValue !== '' && password2Value !== ''){
if(validateEmail(emailValue)) {
createBtn.disabled = false;
}
} else {
createBtn.disabled = true;
}
}
<html>
<head>
<script src="https://github.com/claudewill1/Project/blob/main/validate.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-between p-1">
<div class="col-12 col-md-6 nopadding">
<form action="" id="createform" method="post">
<div class="form-group">
<h2 class="form-title">Create a New Account</h2>
</div>
<!-- form-group -->
<!-- added ids to divs for input control to be able to access elements with script -->
<div class="form-group">
<div class="input-group">
<input class="form-control rounded-0" placeholder="Student ID" autofocus type="text" name="studentid" id="studentId" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group" id="email_div">
<input class="form-control rounded-0" placeholder="Email" autofocus type="text" name="email" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group" id="username_div">
<input class="form-control rounded-0" placeholder="Username" autofocus type="text" name="username" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group" id="firstname_div">
<input class="form-control rounded-0" placeholder="First name" autofocus type="text" name="firstname" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group" id="lastname_div">
<input class="form-control rounded-0" placeholder="Last name" autofocus type="text" name="lastname" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group">
<input class="form-control rounded-0" placeholder="Password" autofocus type="password" name="phash1" id="pass1_div" value="">
<div class="input-group-append">
<button class="btn btn-gold" type="button" id="show1" onclick="toggleInputType1()">
SHOW
</button>
</div>
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group">
<input class="form-control rounded-0" placeholder="Retype Password" autofocus type="password" name="phash2" id="pass2_div" value="">
<div class="input-group-append">
<button class="btn btn-gold" type="button" id="show2" onclick="toggleInputType2()">
SHOW
</button>
</div>
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group pt-3">
<div class="input-group">
<!-- changed id for create button to "createBtn" -->
<button class="form-control rounded-0 btn-blue" type="button" id="createBtn" disabled onclick="btn_create()">
Create Account
</button>
</div>
<!-- input-group -->
<div class="input-group">
<button class="form-control rounded-0 btn-gold" type="button" id="submit" onclick="btn_home()">
Home
</button>
</div>
<!-- input-group -->
</div>
<!-- form-group -->
</form>
</div>
<!-- col-md -->
<div class="col nopadding">
<img class="side" src="./img/hero-image.jpg" alt="Hero Image">
</div>
<!-- col-6 -->
</div>
<!-- row -->
</div>
<!-- container -->
</body>
</html>
Can anyone point out what I might be doing wrong?
Also, please don't close my post as other have done in the past if I asked the question wrong, I am new for the most part to stackoverflow and I am posting based off the rules I see for posting. I made sure to only If needed I can edit this.
This works. I modified your validateForm() function a little and added another function that monitors the form for change.
function validateForm() {
"use strict";
//Check your HTML file. You'll need to add an id where there is none.
const studentIdValue = document.getElementById("studentid").value.trim();
const emailValue = document.getElementById("email").value.trim();
const usernameValue = document.getElementById("username").value.trim();
const firstnameValue = document.getElementById("firstname").value.trim();
const lastnameValue = document.getElementById("lastname").value.trim();
const passwordValue = document.getElementById("pass1_div").value.trim();
const password2Value = document.getElementById("pass2_div").value.trim();
if (studentIdValue !== "" && emailValue !== "" && usernameValue !== "" && firstnameValue !== "" && lastnameValue !== "" && passwordValue !== "" && password2Value !== "") {
document.getElementById("create-btn").removeAttribute("disabled");
}
}
//This function monitors the form for change.
function checkForm() {
"use strict";
const yourForm = document.getElementById("createform");
yourForm.addEventListener("change", function () {
validateForm();
});
}
checkForm();
You have to invoke validateForm() function on every input field update. You can do something like this with onkeyup event:
<input class="form-control rounded-0" placeholder="Student ID" autofocus type="text" name="studentid" id="studentId" value="" onkeyup="validateForm()">
That way once all the validation criteria are met your button should become active.
As an option you can definitely use event listeners outside of your html for each input field instead to trigger the validateForm().
After some reconfiguring I have some jQuery that handles enabling a "save" button when a field has a value:
$(document).ready(function () {
$('.save-button').attr('disabled', true);
$('#selection').keyup(function () {
if ($('#selection').val().length != 0) {
$('.save-button').attr('disabled', false);
} else {
$('.save-button').attr('disabled', true);
}
});
});
... but I realize now I should only enable this button when three separate form elements have values -- two of which are input fields, and one being a text-area.
The thing is, these could be filled in in any order, so how do I get my check to run so as to make sure it enables the "save" button when all three have values? In other words, what event can I use to check this?
The three IDs in question are: selection, schedule, and json-data
Here is my relevant HTML:
<div class="form-group">
<label>Job Name</label>
<input type="text" class="job-name form-control" id="selection">
</div>
<div class="form-group">
<div><label for="meeting-time">Schedule</label></div>
<input type="datetime-local" class="job-schedule form-control" min="getDateDefault()" max="getEndDate()"
id="schedule">
</div>
<div class="form-group">
<label>Repeat Every</label>
<input type="text" class="job-repeat-every form-control">
</div>
<div class="form-group">
<label>Job Data (json)</label>
<textarea class="job-data form-control" id="json-data">{}</textarea>
</div>
<div class="form-group">
<span class="btn btn-default btn-success save-button" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>
You should use the focusout event on each element you need to check its value.
I have created a snippet, you can see the updated version of your code.
$(document).ready(function () {
$('.save-button').attr('disabled', true);
$('#selection, #schedule, #json-data').focusout(function () {
if ($('#selection').val() == "" ||
$('#json-data').val() == "" ||
$('#schedule').val() == ""
) {
$('.save-button').attr('disabled', true);
} else {
$('.save-button').attr('disabled', false);
}
});
});
.btn[disabled="disabled"] {
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>Job Name</label>
<input type="text" class="job-name form-control" id="selection">
</div>
<div class="form-group">
<div><label for="meeting-time">Schedule</label></div>
<input type="datetime-local" class="job-schedule form-control" min="getDateDefault()" max="getEndDate()"
id="schedule">
</div>
<div class="form-group">
<label>Repeat Every</label>
<input type="text" class="job-repeat-every form-control">
</div>
<div class="form-group">
<label>Job Data (json)</label>
<textarea class="job-data form-control" id="json-data">{}</textarea>
</div>
<div class="form-group">
<span class="btn btn-default btn-success save-button" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>
I have a registration form that I would like to have multiple field validation. What I mean by this is if more than one field is not filled in it will be highlighted red. I have some code already written but instead of highlighting the field not filled in, it's highlighting all of them. I realise it is quite long winded but I'm fairly new to this. My JS code is as follows:
`function formCheck() {
var val = document.getElementById("fillMeIn").value;
var val = document.getElementById("fillMeIn2").value;
var val = document.getElementById("fillMeIn3").value;
var val = document.getElementById("fillMeIn4").value;
var val = document.getElementById("fillMeIn5").value;
var val = document.getElementById("fillMeIn6").value;
var val = document.getElementById("fillMeIn7").value;
if (val == "") {
alert("Please fill in the missing fields");
document.getElementById("fillMeIn").style.borderColor = "red";
document.getElementById("fillMeIn2").style.borderColor = "red";
document.getElementById("fillMeIn3").style.borderColor = "red";
document.getElementById("fillMeIn4").style.borderColor = "red";
document.getElementById("fillMeIn5").style.borderColor = "red";
document.getElementById("fillMeIn6").style.borderColor = "red";
document.getElementById("fillMeIn7").style.borderColor = "red";
return false;
}
else {
document.getElementById("fillMeIn").style.borderColor = "green";
document.getElementById("fillMeIn2").style.borderColor = "green";
document.getElementById("fillMeIn3").style.borderColor = "green";
document.getElementById("fillMeIn4").style.borderColor = "green";
document.getElementById("fillMeIn5").style.borderColor = "green";
document.getElementById("fillMeIn6").style.borderColor = "green";
document.getElementById("fillMeIn7").style.borderColor = "green";
}
}`
My HTML is as follows:
'<form id="mbrForm" onsubmit="return formCheck();" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" class="form-control" placeholder="First Name" >
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" class="form-control" placeholder="Last Name" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" class="form-control vertical-gap" placeholder="First Line" >
<input id="fillMeIn4" type="text" class="form-control vertical-gap" placeholder="Second Line" >
<input id="fillMeIn5" type="text" class="form-control vertical-gap" placeholder="Town/City" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" class="form-control vertical-gap" placeholder="Postcode" >
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" class="form-control vertical-gap" placeholder="Email address" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!--<button type="button" input type="hidden" class="btn btn-success" name="redirect" value="thanks.html">SUBMIT</button>-->
<input type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>'
Thanks!
You could have the ids in an Array, iterate through its values, and execute the repeatable code in a function that groups all the logic inside.
example :
["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
// do things with id
})
Why not use the html "required" property instead?
If you want to do this with JS, you should give each variable a different name. In the code you posted you are continuously overwriting the same variable, and then, it evaluates val (which ended up being assigned to the (fill me7 value) to "", and if true, setting all the borders to red.
Set different variables, push the input values into an array when submit is triggered and loop through them if variables[i]==0, set getElementId(switch case[i] or another array with the name of the inputs[i]).bordercolor to red.
AGAIN, this sound VERY INEFFICIENT and I am not sure at all it would work. My guess is that it would take A LOT of time, and probably get timed out (except you are using some asych/try-catch kind of JS).
I would simply go for an HTML required property and then override the "required" property in CSS to make it look as you intend to. Simpler, easy and clean.
The main issue in your code is that you override the variable val each time you wrote var val = ....
Keeping your own your logic, you could write something like that.
var formModule = (function () {
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
function markInvalid($field) {
$field.style.borderColor = 'red';
}
function markValid($field) {
$field.style.borderColor = 'green';
}
return {
check: function () {
var isValid = true;
$fields.forEach(function ($f) {
if ($f.value === '') {
if (isValid) alert('Please fill in the missing fields');
isValid = false;
markInvalid($f);
}
else markValid($f);
});
return isValid;
}
};
})();
There are some extra concepts in this example which may be useful:
Working with the DOM is really slow, that's why you should
put your elements in a variable once for all and not everytime you
click on the submit button.
In my example i wrap the code with var formModule = (function () {...})();.
It's called module pattern. The goal is to prevent variables to leak in the rest of the application.
A better solution could be this one using the 'power' of html form validation:
HTML:
<form id="mbrForm" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
<input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
<input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>
JS:
var formModule = (function () {
var $form = document.getElementById('mbrForm');
var $btn = document.getElementById('btnSubmit');
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
checkValidation();
$form.addEventListener('change', checkValidation);
$form.addEventListener('keyup', checkValidation);
$fields.forEach(function ($f) {
$f.addEventListener('change', function () {
markInput($f, $f.checkValidity());
});
});
function checkValidation() {
$btn.disabled = !$form.checkValidity();
}
function markInput($field, isValid) {
$field.style.borderColor = isValid ? 'green' : 'red';
}
})();
In this example, the button gets disabled until the form is valid and inputs are validated whenever they are changed.
I added required attribute in HTML inputs so they can be handled by native javascript function checkValidity(). Note that in this case inputs email and number are also correctly checked. You could also use attribute pattern to get a more powerfull validation:
<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">
Hope it helps.
How can I only affect the element that when I focus on the input type the error message below it should be gone, problem is when I focus on the input type the error message hides all. Hope you can help me. Thanks in advance
This is my HTML structure
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields</div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
my Jquery
$(document).ready(function() {
$('.form-control').focus(function(e) {
if($(e.target).next('.form-message').css('display') == 'block'){
$('.form-message').hide();
}
});
});
Try it like this:
$(document).ready(function() {
$('.form-control').focus(function(e) {
var formMessage = $(e.target).next('.form-message');
if(formMessage.css('display') == 'block'){
formMessage.hide();
}
});
});
Fiddle: https://jsfiddle.net/gveukc0b/
Try this,
$(document).ready(function() {
$('.form-control').focus(function() {
$(this).next().hide();
});
});
This seems like a weird one to me. I have a form for adding vets to a dog walkers' database. I've used ng-model on each field in the form.
<div class="container-fluid" ng-show="nav.page == 'new'" ng-controller="dataController as data">
<div class="row" ng-show="nav.tab == 'vet'">
<div class="col-md-2">
</div>
<div class="col-md-8">
<h1>Add a Vet</h1>
<hr />
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name..." ng-model="data.creator.vet.Name"/>
</div>
<div class="form-group">
<input type="Text" class="form-control" placeholder="Address..." ng-model="data.creator.vet.Address"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Phone Number..." ng-model="data.creator.vet.Phone"/>
</div>
<div class="form-group">
<button class="btn btn-success" ng-click="data.newVet()">Submit</button>
</div>
</form>
</div>
<div class="col-md-2">
</div>
</div>
</div>
Yesterday it was working fine, today it won't update data.creator.vet when I input data. For the life of me, I can't see any problems with it.
The js:
app.controller('dataController', function($http) {
dataCon = this;
this.creator = {};
this.creator.client = {};
this.creator.vet = {};
this.creator.client.Dogs = [];
this.allData = {};
this.newVet = function(){
console.log("New Vet Creating....")
console.log(dataCon.creator)
vet = JSON.stringify(dataCon.creator.vet);
console.log(vet);
$http.get(SERVICE_URL + "?fn=vetCreate&vet=" + vet).then(function(response) {
dataCon.init();
});
}
});