the event tracking is not working. There is the code for Google Analytics in the head:
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX');
gtag('event', 'submit', {
'event_category': 'Form',
'event_label': 'abgeschickt',
});
</script>
Here is a picture of the event settings of Google Analytics in German:
Here is the HTML-code of the event button. Its a contact form and looks this way:
<div class="col-sm-12">
<input name="name" id="name" placeholder="Dein Name *"/>
</div>
<div class="col-sm-6">
<input name="email" id="email" placeholder="Deine E-Mailadresse *"/>
</div>
<div class="col-sm-6">
<input name="phone" id="phone" placeholder="Deine Telefonnummer"/>
</div>
<div class="col-sm-12">
<textarea name="message" rows="9" id="message" placeholder="Gib hier deine Nachricht ein *"></textarea>
</div>
<div class="col-md-12">
<input type="submit" class="submit btn btn-lg btn-primary" id="submit" value="Nachricht senden"/>
</div>
</form>
The event tracking is not working, but why? Is there anything wrong?
Looks like you have a redundant comma in your script after 'abgeschickt'
It should look like that
gtag('event', 'submit', {
'event_category': 'Form',
'event_label': 'abgeschickt' // no comma after last property
});
Related
I am using the below code, and my problem is that when I select the first time then the location list is not loading. When I select the second item then the first item in the sublist gets populated. If I select third then the second subitem gets populated.
I'm sure I'm making a silly mistake somewhere.
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="">SELECT CLIENT</label>
<select type="search" id="myarray" class="select2-select req selectpicker form-control" data-required="1" data-max-options="1" data-live-search="true" multiple="" name="myarray[]" title="Select a Client">
<?php echo $Clients; ?>
</select>
</div>
</div>
</div>
<script>
jQuery(".select2-select").change(function() {
var selected = $(this).val();
$(".selectpicker").selectpicker();
$.ajax({
url: "<?php echo base_url(); ?>login/getDataFromLocation",
data: {
type: 'select',
selected: selected
},
type: 'post',
success: function(output) {
if (output) {
//$('#append').append(output);
$(".selectpicker").selectpicker();
$('#multiple').selectpicker('refresh').empty().append(output);
}
}
});
});
</script>
<div class="form-group">
<div class="row">
<div class="form-group col-md-5">
<label for="multiple">LOCATION</label>
<select id="multiple" class="form-control req selectpicker select2-select" data-required="1" name="Location[]" title="Select a Location" multiple></select>
</div>
</div>
</div>
Problem has been resolved and the problem was refreshing the value from list.
$("#creatives").selectpicker('refresh').empty().append(output).selectpicker('refresh').trigger('change');
Used .trigger('change')
Thanks a lot for everyone's input here.
The task is :
I have done the form and the design bit for the web page but never came across this push: function() in javascript
I am confused on how to approach or do this task any help will be appreciated! Thank you :)
var _itq = {
push: function() {
console.log.apply(console, arguments);
}
};
_itq.push("_itq", "initialised", "ok");
<form id="commentForm" method="get" action="">
<div class="form-group">
<input class="form-control" type="email" placeholder="Enter Your Email" required>
</div>
<div class="form-group">
<div>
<input type="text" class="form-control" placeholder=" Enter Your Name" pattern=".{2,}" required title="2 characters minimum">
</div>
<div>
<input type="password" class="form-control" placeholder="Your Password" pattern=".{5,10}" required title="5 to 10 characters">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-info">Sign Up</button>
</div>
</form>
Here is the second question, this should set you on the right path for question 1.
document.getElementById('commentForm').onsubmit = function() { // attach to form submit
var email = document.getElementById("email").value; // get the email value (add id="email" to the email input in the html)
var name = document.getElementById("name").value; // get the name (add id="name" to the name input in the html)
var initials = name.split(' ').map(function(v, i) { // get the initials by splitting
return v[0] // on space and taking the 1st char
}).join('');
_itq.push(email, initials); // pass into your push
return false; // return false to stop the submit (optional depending on requirements)
};
working snippet below
var _itq = {
push: function() {
console.log.apply(console, arguments);
}
};
_itq.push("_itq", "initialised", "ok");
document.getElementById('commentForm').onsubmit = function() {
var email = document.getElementById("email").value;
var name = document.getElementById("name").value;
var initials = name.split(' ').map(function(v, i) {
return v[0]
}).join('');
_itq.push(email, initials);
return false;
};
<form id="commentForm" method="get" action="">
<div class="form-group">
<input id="email" class="form-control" type="email" placeholder="Enter Your Email" required>
</div>
<div class="form-group">
<div>
<input id="name" type="text" class="form-control" placeholder=" Enter Your Name" pattern=".{2,}" required title="2 characters minimum">
</div>
<div>
<input type="password" class="form-control" placeholder="Your Password" pattern=".{5,10}" required title="5 to 10 characters">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-info">Sign Up</button>
</div>
</form>
Try Something like this
Your HTML:
<button type="submit" class="btn btn-block btn-info" onclick="fillarr()">Sign Up</button>
JS:
function fillarr(){
_itq.push(document.getElementById("emailId").value, document.getElementById("nameId").value);
}
You still need to add an ID for your Email and Name field though
How to have ng-show messages beside the text box rather than underneath it. Right now it is displaying all the validation messages underneath the input box.
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
"use strict";
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.cityArray = ["hyderabad", "secunderabad", "delhi", "mumbai"];
$scope.submit = function ($event) {
if ($scope.myForm.$invalid) {
// Or some other update
$scope.myForm.$submitted = true;
$event.preventDefault();
}
};
});
app.directive('uniqueUsername', function ($http) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
element.bind('blur', function (e) {
ngModel.$setValidity('unique', true);
$http.post('CheckUserName2.do').success(function (data) {
if (data) {
ngModel.$setValidity('unique', false);
}
});
});
}
};
});
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="col-md-6 col-md-offset-0">
<div class="panel panel-login">
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<h2 class="text-muted">Registration form</h2>
<div>
<form name="myForm" action="RegistrationServlet.do" method="POST" >
First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" unique-username="" placeholder="First Name" required/>
<span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span><br/>
<span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span>
<button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here's the plunker
You don't have space to the right to display error messages beside the input box. Putting error messages just above the submit button will cause a minor UI issue: with each error, your form submit-button will flicker vertically.
Viz.
- Submit your form without entering any input to get the error message.
- type/erase any character in the input box to see the flickering
Workaround:
Either keep the error messages below submit button or provide dedicated height to error messages to avoid undesirable effects or both
<form name="myForm" action="RegistrationServlet.do" method="POST" >
First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" unique-username="" placeholder="First Name" required/><br><br>
<button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
<div style="height=100px">
<span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span><br/>
<span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span>
</div>
</form>
Demo
I'm building an app with Meteor.js, and I've got a form where I would like to be able to allow the user to add a new row to the form when they click a button (button.addExperience). I'm using an HTML Template to populate each row of the form.
How would I have the template (experienceRow) rendered each time the user clicks the button?
See example code below:
<body>
<form>
{{> experienceRow }}
</form>
<button class="addExperience">Add Experience</button>
</body>
<template name="experienceRow">
<div id={{experienceNumber}} class='experienceRow'>
<input type="text" placeholder="name" value="" class="name">
<input type="text" placeholder="address" value="" class="address">
<input type="text" placeholder="phone" value="" class="phone">
</div>
</template>
You will need to use an each block along with a reactive variable. That variable could be a ReactiveVar, a session varaible, a local collection, etc. Here's an example implementation using a ReactiveVar to hold an array of ids:
html
<body>
{{> experienceForm }}
</body>
<template name="experienceForm">
<form>
{{#each experienceIds}}
{{> experienceRow }}
{{/each}}
</form>
<button class="addExperience">Add Experience</button>
</template>
<template name="experienceRow">
<div id={{this}} class='experienceRow'>
<input type="text" placeholder="name" value="" class="name">
<input type="text" placeholder="address" value="" class="address">
<input type="text" placeholder="phone" value="" class="phone">
</div>
</template>
js
Template.experienceForm.onCreated(function() {
this.experienceIds = new ReactiveVar(Random.id());
});
Template.experienceForm.helpers({
experienceIds: function() {
return Template.instance().experienceIds.get();
}
});
Template.experienceForm.events({
'click .addExperience': function(e, template) {
e.preventDefault();
var ids = template.experienceIds.get();
ids.push(Random.id());
template.experienceIds.set(ids);
}
});
Note that you'll need to meteor add reactive-var for this to work.
Recommended reading: scoped reactivity.
I want to create a custom field validation for forms using Meteor. I don't want a packaged solution.
Here is my code so far.
JavaScript:
var errorState = new ReactiveVar;
Template.lottoForm.created = function() {
errorState.set('errors', {});
};
Template.lottoForm.events({
'blur input': function(e, t) {
e.preventDefault();
validate($(this));
}
});
Template.lottoForm.helpers({
errorClass: function (key) {
return errorState.get('errors')[key] ? 'has-error' : '';
}
});
Template.errorMsg.helpers({
errorMessages: function(key) {
return errorState.get('errors');
}
});
function throwError(message) {
errorState.set('errors', message)
return errorState.get('errors');
}
function validate(formField) {
$("input").each(function(index, element){
var fieldValue = $(element).val();
if(fieldValue){
if(isNaN(fieldValue) == true) {
throwError('Not a valid Number');
}
}
});
}
HTML:
<template name="lottoForm">
<form class="playslip form-inline" role="form">
<fieldset>
<div class="form-group {{errorClass 'ball0'}}">
<input type="text" class="input-block form-control" id="ball0" maxlength="2" name="ball0">
</div>
<div class="form-group {{errorClass 'ball1'}}">
<input type="text" class="input-block form-control" id="ball1" maxlength="2" name="ball1">
</div>
<div class="form-group {{errorClass 'ball2'}}">
<input type="text" class="input-block form-control" id="ball2" maxlength="2" name="ball2">
</div>
<div class="form-group {{errorClass 'ball3'}}">
<input type="text" class="input-block form-control" id="ball3" maxlength="2" name="ball3">
</div>
<div class="form-group {{errorClass 'ball4'}}">
<input type="text" class="input-block form-control" id="ball4" maxlength="2" name="ball4">
</div>
<div class="form-group {{errorClass 'ball5'}}">
<input type="text" class="input-block form-control" id="ball5" maxlength="2" name="ball5">
</div>
{{> errorMsg}}
<div class="play-btn">
<button type="submit" value="submit" class="btn btn-primary">Play Syndicate</button>
</div>
</fieldset>
</form>
</template
<template name="errorMsg">
<div class="errorMsg">
{{#if errorMessages}}
<div class="list-errors">
{{#each errorMessages}}
<div class="list-item">{{> fieldError}}</div>
{{/each}}
</div>
{{/if}}
</div>
</template>
<template name="fieldError">
<div class="alert alert-danger" role="alert">
{{errors}}
</div>
</template>
I'm also getting this error message in the console - "Uncaught Error: {{#each}} currently only accepts arrays, cursors or falsey values."
Why do I get this error and how would I implement the custom validation?
Just as the error says, #each template functions must be passed the proper type. Are you sure your errorMessages helper is returning an array? It looks like you are initializing it as a hash.