This part of my site is with an error and i can't figure out, since i didn't change that in months.
The error is:
Error: [$parse:ueoe] http://errors.angularjs.org/1.4.3/$parse/ueoe?p0=event._id%3FEventController
at Error (native)
at http://localhost:3000/scripts/libs.js:44598:416
at Object.q.consume (http://localhost:3000/scripts/libs.js:44801:157)
at Object.q.ternary (http://localhost:3000/scripts/libs.js:44794:497)
at Object.q.assignment (http://localhost:3000/scripts/libs.js:44794:284)
at Object.q.expression (http://localhost:3000/scripts/libs.js:44794:237)
at Object.q.filterChain (http://localhost:3000/scripts/libs.js:44794:145)
at Object.q.expressionStatement (http://localhost:3000/scripts/libs.js:44794:91)
at Object.q.program (http://localhost:3000/scripts/libs.js:44793:458)
at Object.q.ast (http://localhost:3000/scripts/libs.js:44793:257) <li class="controller__item controller__item--disabled" data-controller-range="[1, 1]" data-event-sidebar-to="false" ng-click="event._id ? EventController.update(event._id, event) : EventController.create(event)">
According to angular.js:
Error: $parse:ueoe
Unexpected End of Expression
Unexpected end of expression: event._id
Description
Occurs when an expression is missing tokens at the end of the expression. For example, forgetting a closing bracket in an expression will trigger this error.
To resolve, learn more about Angular expressions, identify the error and fix the expression's syntax.
The HTML template:
<main class="main">
<div ng-include src="'/admin/navbar/navbar.template.html'"></div>
<div ng-include src="'/admin/breadcrumb/breadcrumb.template.html'"></div>
<section class="events">
<div class="events__container">
<div class="events__row">
<div class="col-md-12">
<div class="events__box">
<div class="events__header">
<h2 class="events__title"> Todos os eventos - </h2>
</div>
<div class="events__body">
<table class="events__table" data-table>
<!-- directive:table-sorter-directive -->
<thead>
<tr>
<th class="events__th events__th--all">
<input type="checkbox" />
</th>
<th class="events__th"> Nome </th>
<th class="events__th"> Data </th>
<th class="events__th events__th--reservations"> Reservas </th>
</tr>
</thead>
<tbody>
<tr class="events__tr" ng-repeat="event in events">
<td class="events__td events__td--checkbox">
<input type="checkbox" data-controller-input ng-click="EventController.retrieveOne(event._id)"/>
</td>
<td class="events__td"> {{ event.name }} </td>
<td class="events__td"> {{ event.date }} </td>
<td class="events__td events__td--reservations"> 50 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<aside class="events__sidebar" data-event-sidebar>
<!-- directive:event-sidebar-directive -->
<form class="events__sidebar-form" method="POST" action="#">
<div class="events__sidebar-group">
<label class="events__sidebar-label" for="event_value"> Valores: </label>
<input class="events__sidebar-input event__sidebar-input--value" type="text" id="event_value" ng-model="event.men"/>
<input class="events__sidebar-input event__sidebar-input--value" type="text" id="event_value" ng-model="event.women"/>
</div>
<div class="events__sidebar-group">
<label class="events__sidebar-label" for="event_name"> Nome do evento: </label>
<input class="events__sidebar-input" type="text" id="event_name" ng-model="event.name"/>
</div>
<div class="events__sidebar-group">
<label class="events__sidebar-label" for="event_hour"> Hora: </label>
<input class="events__sidebar-input" type="text" id="event_hour" ng-model="event.hour"/>
</div>
<div class="events__sidebar-group">
<label class="events__sidebar-label" for="event_point"> Ponto de encontro: </label>
<input class="events__sidebar-input" type="text" id="event_point" ng-model="event.meeting"/>
</div>
<div class="events__sidebar-group">
<label class="events__sidebar-label" for="event_info"> Informações simples: </label>
<input class="events__sidebar-input" type="text" id="event_info" placeholder="1 Hora de Open Bar + 2 horas de loucura"/>
</div>
<div class="events__sidebar-group">
<label class="events__sidebar-label" for="event_hiw"> Como funciona: </label>
<input class="events__sidebar-input" type="text" id="event_hiw" ng-model="event.hiw"/>
</div>
</form>
</aside>
</div>
</section>
<aside class="controller" data-controller>
<!-- directive:controller-directive -->
<!-- directive:controller-action-directive -->
<div class="controller__controller" data-controller-indicator>
<i class="icon icon__cogs"></i>
</div>
<div class="controller__container">
<ul class="controller__list">
<li class="controller__item" data-controller-range="[0]" data-event-sidebar-to="true" ng-click="EventController.clean()">
<i class="icon icon__plus icon__2x"></i>
<span class="controller__legend"> Novo </span>
</li>
<li class="controller__item controller__item--disabled" data-controller-range="[1, 1]" data-event-sidebar-to="true">
<i class="icon icon__pencil icon__2x"></i>
<span class="controller__legend"> Editar </span>
</li>
<li class="controller__item controller__item--disabled" data-controller-range="[1, 1]" data-event-sidebar-to="false" ng-click="event._id ? EventController.update(event._id, event) : EventController.create(event)">
<i class="icon icon__cloud icon__2x"></i>
<span class="controller__legend"> Salvar </span>
</li>
<li class="controller__item controller__item--disabled" data-controller-range="[1]" data-event-sidebar-to="false" ng-click="EventController.delete(event._id)">
<i class="icon icon__trash icon__2x"></i>
<span class="controller__legend"> Deletar </span>
</li>
<li class="controller__item controller__item--email">
<i class="icon icon__search icon__2x"></i>
<span class="controller__legend"> E-mail </span>
</li>
<li class="controller__item controller__item--search">
<i class="icon icon__envelope icon__2x"></i>
<span class="controller__legend"> Pesquisar </span>
</li>
</ul>
</div>
</aside>
</main>
EventController.js:
'use strict';
var EventController = function(scope, EventModel) {
this.scope = scope;
this.EventModel = EventModel;
this.scope.store = [];
this.retrieve();
};
EventController.prototype = {
clean: function() {
this.scope.event = {};
},
create: function(newEvent) {
this.EventModel.Model.insert(newEvent)
.then(function(result) {
});
},
retrieve: function() {
var that = this;
this.EventModel.Model.find()
.then(function(result) {
that.scope.events = result;
});
},
retrieveOne: function(eventId) {
var that = this;
this.EventModel.Model.findOne(eventId)
.then(function(result) {
that.scope.event = result;
});
},
update: function(editedEvent, event) {
this.EventModel.Model.update(editedEvent, event)
.then(function(result) {
});
},
delete: function(eventId) {
this.EventModel.Model.remove(eventId)
.then(function(result) {
});
}
};
angular.module('adminApp').controller('EventController', ['$scope', 'EventModel', EventController]);
I can't figure out what is the problem. Anybody can help?
Thanks.
I believe the error might be cause of the src attribute
ng-include src="'/admin/navbar/navbar.template.html'"
ng-include src="'/admin/breadcrumb/breadcrumb.template.html'"
should be
ng-include="'/admin/navbar/navbar.template.html'"
ng-include="'/admin/breadcrumb/breadcrumb.template.html'"
src should be the attribute only when included as an element <ng-include
But in you case the ng-include is used as an attribute
For more info check the docs ng-include
hide this code in ng-grid.js - it add extra column when group is add.
Moved out of above loops due to if no data initially, but has initial grouping, columns won't be added
if(cols.length > 0) {
for (var z = 0; z < groups.length; z++) {
if (!cols[z].isAggCol && z <= maxDepth) {
cols.push(new ngColumn({
colDef: {
field: '',
width: 25,
sortable: false,
resizable: false,
headerCellTemplate: '<div class="ngAggHeader"></div>',
pinned: grid.config.pinSelectionCheckbox
},
enablePinning: grid.config.enablePinning,
isAggCol: true,
headerRowHeight: grid.config.headerRowHeight
}, $scope, grid, domUtilityService, $templateCache, $utils));
}
}
}
Related
I have the following form where we have the possibility to add the necessary lines as follows:
function addAgregado(){
$("#riscos").append("<div>"+$("#riscoform").html()+"</div>");
}
function inserir_agregado()
{
var IdAgreg = [];
$("input[name='IdAgreg[]']").each(function() {IdAgreg.push(this.value)});
var Parent = [];
$("input[name='Parent[]']").each(function() {Parent.push(this.value)});
var ParentNome = [];
$("input[name='ParentNome[]']").each(function() {ParentNome.push(this.value)});
var ParentIdade = [];
$("input[name='ParentIdade[]']").each(function() {ParentIdade.push(this.value)});
var dadosajax = {
'contribuinte' : $("#contribuinte").val(),
'IdAgreg[]' : IdAgreg,
'Parent[]' : Parent,
'ParentNome[]' : ParentNome,
'ParentIdade[]' : ParentIdade
};
$.ajax({
url: 'regagregado.php',
type: 'POST',
cache: false,
data: dadosajax,
error: function(){
Swal.fire("Erro!", "Tente novamente. Caso persista o erro, contatar Administrador!", "error");
},
success: function(result)
{
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hs_firstname field hs-form-field">
<label for="educacao">Composição do Agregado Familiar (Parentesco, Nome e Idade) <span style="color: red;">*</span></label>
<button type="button" class="hs-button primary large" onclick="addAgregado()" >Adicionar Familiar</button>
</div>
<div class="hs_firstname field hs-form-field" id="riscos">
</div>
<div id="riscoform" hidden>
<table class="campo" cellspacing="10">
<tr>
<td style="display: none;">
<div class="hs_firstname field hs-form-field">
<label for="IdAgreg">Id </label>
<input name="IdAgreg[]" type="text" >
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="Parent">Parentesco </label>
<input name="Parent[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="ParentNome">Nome </label>
<input name="ParentNome[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="ParentIdade">Idade </label>
<input name="ParentIdade[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
</tr>
</table>
</div>
<input class="hs-button primary large action-button visivel" type="button" onclick="inserir_agregado();" value="Submeter">
All the code is working and being inserted in the database.
But I have a problem, whenever I insert it into the database, always insert a blank line. Example when filling two lines:
contribuinte: xxxxxxxxx IdAgreg[]: IdAgreg[]: IdAgreg[]: Parent[]:
Pai Parent[]: Mae Parent[]: ParentNome[]: Bruno ParentNome[]: Monica
ParentNome[]: ParentIdade[]: 37 ParentIdade[]: 33 ParentIdade[]:
In this example I only filled in two lines, but when sending to the page regagregado.php sends an empty line. What is the reason?
I change your .each() function and pass $(this).val() instead.
and Console.log the result.
Example below.
function addAgregado() {
$("#riscos").append("<div>" + $("#riscoform").html() + "</div>");
}
function inserir_agregado() {
var IdAgreg = [];
$("input[name='IdAgreg[]']").each(function () {
IdAgreg.push($(this).val());
});
var Parent = [];
$("input[name='Parent[]']").each(function () {
Parent.push($(this).val());
});
var ParentNome = [];
$("input[name='ParentNome[]']").each(function () {
ParentNome.push($(this).val());
});
var ParentIdade = [];
$("input[name='ParentIdade[]']").each(function () {
ParentIdade.push($(this).val());
});
var dadosajax = {
contribuinte: $("#contribuinte").val(),
"IdAgreg[]": IdAgreg,
"Parent[]": Parent,
"ParentNome[]": ParentNome,
"ParentIdade[]": ParentIdade,
};
console.log(dadosajax);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hs_firstname field hs-form-field">
<label for="educacao"
>Composição do Agregado Familiar (Parentesco, Nome e Idade)
<span style="color: red">*</span></label
>
<button type="button" class="hs-button primary large" onclick="addAgregado()">
Adicionar Familiar
</button>
</div>
<div class="hs_firstname field hs-form-field" id="riscos"></div>
<div id="riscoform">
<table class="campo" cellspacing="10">
<tr>
<td>
<div class="hs_firstname field hs-form-field">
<label for="IdAgreg">Id </label>
<input name="IdAgreg[]" type="text" />
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="Parent">Parentesco </label>
<input
name="Parent[]"
required="required"
type="text"
placeholder=""
data-rule-required="true"
data-msg-required="Campo obrigatório"
/>
<span class="error1" style="display: none">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="ParentNome">Nome </label>
<input
name="ParentNome[]"
required="required"
type="text"
placeholder=""
data-rule-required="true"
data-msg-required="Campo obrigatório"
/>
<span class="error1" style="display: none">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
<td>
<div class="hs_firstname field hs-form-field">
<label for="ParentIdade">Idade </label>
<input
name="ParentIdade[]"
required="required"
type="text"
placeholder=""
data-rule-required="true"
data-msg-required="Campo obrigatório"
/>
<span class="error1" style="display: none">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</td>
</tr>
</table>
</div>
<input
class="hs-button primary large action-button visivel"
type="button"
onclick="inserir_agregado();"
value="Submeter"
/>
I have multiple dropzones (upload element) in which preview elements are shown for every file that is added. Every preview has an input number field.
Every dropzone is a form which has a hidden input field with a value in it, this value is the total allowed sum of all input fields inside the dropzone element.
So for example:
Dropzone 1 has total sum of: 10
And two previews with inputs, then for example this is possible:
input1: 10
input2: 0
Or
input1: 5
input2:5
etc
as long as the total is 10. You should not be able to exceed the 10 or when for example input1 has 3 as a value, the second input should not be able to exceed 7 etc.
I tried the following:
const attributeVal = $input;
attributeVal.on("change paste keyup input", function(e) {
let newVal = Math.floor($input.val());
newVal = Math.max(0, newVal);
newVal = Math.min(10, newVal);
const maxValue = parseInt(aantal);
let valueSpent = 0;
$input.not(this).each(function() {
valueSpent += +$input.val();
});
if (newVal + valueSpent > maxValue) {
// Invalid, reset these points to the maximum allowable:
newVal = maxValue - valueSpent;
}
// New value has been validated, put it into the DOM:
$input.val(newVal);
});
attributeVal.on("cut copy paste", function(e) {
e.preventDefault();
});
Where $input is the input field in that current preview and aantal is the total sum. The problem is (in this case aantal = 10) every input field can have 10 (it doesn't exceed) so it is not seeing the values of other inputs.
I tried changing $input.not(this).each(function() { to $input.each(function() { but when I add two images and so there are two input fields, I can only go to 5 in each one. The total is 10 so that is correct but it is not possible to add 9 in one and 1 in the other, only up to 5 in each.
How can I get that result?
I added a jsfiddle here: https://jsfiddle.net/ar2395bw/ (to get the previews you can drag files in the big boxes or click on them and upload some files).
There are a few issues with the code in the JSFiddle (the code posted above is not enough to diagnose the issue).
Not finding all $input
let $preview = $(file.previewElement);
let $input = $preview.find('.fileinput');
Your $preview is connected to each file, so you will only ever find one $input, the one that is being changed.
Incorrect use of .each()
$input.not(this).each(function() {
The function passed to .each() must accept as arguments an index and the value. As it is currently set up, $input will always refer to the same value in every iteration of the loop.
Attempt to compute a total with a sanitised / modified value
newVal = Math.max(0, newVal);
newVal = Math.min(10, newVal);
Here ensure that newVal is in the range 0-10, but then you use the changed value to compute the total newVal + valueSpent > maxValue
Solution
The following code fixes all of these issues.
const attributeVal = $input;
attributeVal.on("change paste keyup input", function (e) {
const maxValue = parseInt(aantal);
let valueSpent = 0;
$preview.closest('.dropzone').find('.fileinput').each(function (index, input) {
valueSpent += +$(input).val();
});
if (valueSpent > maxValue) {
// Invalid, reset these points to the maximum allowable:
$input.val($input.val() - (valueSpent - maxValue));
}
});
attributeVal.on("cut copy paste", function (e) {
e.preventDefault();
});
This works for me on the JSFiddle.
There are multiple issues:
Not every drop zone has aantalinput
aantalinput must be a class not an id let aantal = $el.find('.aantalinput').val();
$input all the time from current drop zone should be like let $input = $('table').find('.fileinput');
let $input = $('table').find('.fileinput'); must be inside attributeVal.on("change paste keyup input", function(e) { and const attributeVal =$preview.find('.fileinput');
let counter = 0;
$('.dropzone').each(function(index, element){
let $el = $(element);
let $maxfiles = $el.attr('maxfiles');
let $inputquantity = $el.find('input').val();
let uploaded_preview = $('.hiddendiv').html();
let aantal = $el.find('.aantalinput').val();
let $thisdropzone = $el;
let total_container = $el.parent().find('.row-total');
$el.dropzone({
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: uploaded_preview,
processing: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
error: function (file, response) {
counter++;
console.log('Option ' + counter);
response = '[{"status":"error","filename":"instablok'+counter+'.jpg","filesize":22822,"tmp_name":"\/tmp\/phpI6ov6y","height":172,"width":565,"heightcm":"6'+counter+',07","widthcm":"19'+counter+',93","tifwidth":null,"dpi":"72"}]';
let file_meta = JSON.parse(response);
let $preview = $(file.previewElement);
let $plusbtn = $preview.find('#plusupload');
let $minbtn = $preview.find('#minupload');
const attributeVal =$preview.find('.fileinput');
attributeVal.on("change paste keyup input", function(e) {
let $input = $('table').find('.fileinput');
let newVal = Math.floor(this.value);
newVal = Math.max(0, newVal);
newVal = Math.min(10, newVal);
const maxValue = parseInt(aantal);
let valueSpent = 0;
$input.not(this).each(function() {
valueSpent += parseInt(this.value);
});
if (newVal + valueSpent > maxValue) {
// Invalid, reset these points to the maximum allowable:
newVal = maxValue - valueSpent;
}
// New value has been validated, put it into the DOM:
this.value = newVal;
});
attributeVal.on("cut copy paste", function(e) {
e.preventDefault();
});
if(file_meta[0].status == 'success'){
}else if(file_meta[0].status == 'error'){
$preview.find('.vrijgevenbtn').show();
$preview.find('.foutformaat').show();
}
$preview.find('.bestandnaam').text('Bestandsnaam: ' + file_meta[0].filename);
$preview.find('.resolutie').text('Resolutie: ' + file_meta[0].dpi + ' DPI');
$preview.find('.formaat').text('Formaat: ' + file_meta[0].heightcm + ' x ' + file_meta[0].widthcm + 'cm');
},
})
});
.hiddendiv {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<script type="text/javascript">
// Disable auto discover for all elements:
Dropzone.autoDiscover = false;
</script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<table class="table upload-table">
<tbody>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<img src="assets/images/noimg.jpg" alt="">
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 20cm
<br>
Breedte : 20cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">20 x 20cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">10</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 10</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<h6 class="row-total">total: 0 </h6>
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="10" id="dropzone1">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="20" name="hoogte">
<input type="hidden" value="20" name="breedte">
<input class="aantalinput" type="hidden" value="10" name="aantal">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<img src="assets/images/noimg.jpg" alt="">
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 90cm
<br>
Breedte : 90cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">90 x 90cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">1</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 1</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<h6 class="row-total">total: 0 </h6>
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="1" id="dropzone4">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="90" name="hoogte">
<input type="hidden" value="90" name="breedte">
<input class="aantalinput" type="hidden" value="10" name="aantal">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
</tbody>
</table>
<div class="hiddendiv">
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<span class="infoline">
<span class="infospan bestandnaam">Bestandnaam:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan resolutie">Resolutie:</span>
<!-- <i class="fas fa-check-circle goedgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan formaat">Formaat:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<div class="foutformaat">
<span>Bestand heeft niet het benodigde formaat.</span>
<span class="uploadinfobox">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
</span>
</div>
<button class="yellowbtn btn vrijgevenbtn" type="button">Bestand vrijgeven</button>
<hr class="uploadline">
<span class="toewijzen">Aantal</span>
<div class="uploadcontent">
<input type="number" value="0" min="0" class="fileinput">
</div>
</div>
</div>
I am just starting out with JavaScript. Pardon me for posting the whole code here. Since someone just suggested of posting a full code, I am doing it, as I am eager to get this right.
I am trying to redirect users to customized "Thank you page", depending on their area, upon submission of a page. Like you see, there are many forms and I am trying to find out their province by their areacode. As I am very new to javascript. I would like to ask you some help on this.
What I am basically trying to do is show users different "Thank you page". Imagine a page saying Thank you, your local rep in British Columbia will contact you.
So this is my attempt, which currently doesn't work and I can't find why.
<!--=== Content Part ===-->
<div class="container content">
<div class="title-box">
<div class="title-box-text"><span class="color-green">Book a Demo</span></div>
<p>With ClearDent, you can do everything. Better.</p>
</div>
<!-- Content Blocks -->
<div class="row">
<!-- Homework for Jason Begin -->
<div class="col-md-6 col-md-offset-3">
<!-- Homework for Jason End -->
<form id="sfDemoForm" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" class="sky-form">
<input name="captcha_settings" value="{"keyname":"IC_ClearDent_Main_Demo","fallback":"true","orgId":"00D1I0000002QyG","ts":""}" type="hidden">
<input name="oid" value="00D1I0000002QyG" type="hidden">
<input name="retURL" value="https://test.cleardent.com/demo-thankyou.html" type="hidden">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" value="ppli#cleardent.com"> -->
<!-- ---------------------------------------------------------------------- -->
<fieldset>
<!--<label class="label" for="first_name">First Name</label>-->
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sffirst_name" maxlength="40" name="first_name" size="20" type="text" required placeholder="First name">
</label>
<!--<label class="label" for="last_name">Last Name</label>-->
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sflast_name" maxlength="80" name="last_name" size="20" type="text" required placeholder="Last name">
</label>
<!--<label class="label" for="email">Email</label>-->
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-envelope"></i>
<input id="sfemail" maxlength="80" name="email" size="20" type="email" required placeholder="Email address">
</label>
<!-- <label class="label" for="phone">Phone</label>-->
<label class="input margin-bottom-25"><i class="icon-prepend fa fa-phone"></i>
<input id="sfphone" maxlength="40" name="phone" size="20" type="text" required placeholder="Phone">
</label>
<!--<label class="label" for="description">Notes</label>-->
<label class="textarea textarea-resizable margin-bottom-25">
<textarea id="sfdescription" name="description" placeholder="Is there something specific you want to see from ClearDent?"></textarea>
</label>
<input id="sfstate" name="state" type="hidden">
<input id="sflead_source" name="lead_source" type="hidden" value="Website">
<input id="sfcompany" name="company" type="hidden">
<input id="sfCampaign_ID" name="Campaign_ID" type="hidden" value="7011I000000d5auQAA">
</fieldset>
<div id="recaptcha" class="g-recaptcha" data-sitekey="6LeXmEAUAAAAAG7VJd6Z8YCVkP44AgAlqCUmpRAi" data-callback="submitDemoToLead" data-size="invisible"> </div>
<footer>
<button id="sfdemoPreSubmit" class="btn-u"><i class="fa fa-paper-plane fa-fw"></i> Get Your Free Demo</button>
<!--<button class="btn-u btn-brd" onclick="window.history.back();"><i class="fa fa-arrow-left fa-fw"></i> Back</button>-->
</footer>
</form>
</div>
</div>
<!-- End Content Blocks -->
</div>
<!--=== End Content ===-->
<!-- InstanceEndEditable -->
<!--=== Footer Version 1 ===-->
<div class="footer-v1">
<div class="footer">
<div class="container">
<div class="row">
<!-- Social -->
<div class="col-md-3 md-margin-bottom-40">
<div class="row">
<div class="col-xs-12"><a href="../">
<div class="logo"> </div>
</a></div>
</div>
<div class="row">
<div class="col-xs-12">
<p>Subscribe to ClearDent Newsletter</p>
</div>
</div>
<div id="mc_embed_signup" class="row margin-bottom-20">
<form action="//cleardent.us2.list-manage.com/subscribe/post?u=c94a01df02408fee7e80ba656&id=3d0b9b204d&MERGE3=Web" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="form-inline" target="_blank">
<div class="col-xs-12">
<div class="input-group">
<label class="sr-only" for="mce-EMAIL">Email address</label>
<span class="input-group-addon colour-cleardent"><i class="fa fa-newspaper-o fa-fw"></i></span>
<input type="email" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email address" required>
<span class="input-group-btn">
<button type="submit" id="mc-embedded-subscribe" class="btn-u form-control">Subscribe</button>
</span> </div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_c94a01df02408fee7e80ba656_3d0b9b204d" tabindex="-1" value="">
</div>
</form>
</div>
<div class="row">
<div class="col-xs-12">
<div class="headline">
<h2>Connect With Us</h2>
</div>
<div class="social-connect">
<button class="btn btn-lg btn-rss" onclick="window.open('http://marketing.cleardent.com/')"><i class="fa fa-2x fa-rss"></i></button>
<button class="btn btn-lg btn-facebook" onclick="window.open('https://www.facebook.com/ClearDentSoftware')"><i class="fa fa-2x fa-facebook"></i></button>
<button class="btn btn-lg btn-twitter" onclick="window.open('https://twitter.com/ClearDentCanada')"><i class="fa fa-2x fa-twitter"></i></button>
<button class="btn btn-lg btn-googleplus" onclick="window.open('https://plus.google.com/+CleardentCanada/?prsrc=3')"><i class="fa fa-2x fa-google-plus"></i></button>
</div>
</div>
</div>
</div>
<!--/col-md-3-->
<!-- End Social -->
<!-- Badge -->
<div class="col-md-3 md-margin-bottom-40">
<div class="posts">
<div class="headline">
<h2>Seal of Approval</h2>
</div>
<ul class="list-unstyled latest-list">
<li> <a href="iso-certification-and-academy-of-general-dentistry-approval.html" id="footer-2-iso">
<div class="iso-logo"></div>
</a><small class="iso-logo-text">FM584056</small></li>
<li> <a href="iso-certification-and-academy-of-general-dentistry-approval.html" id="footer-2-agd">
<div class="agd-logo"></div>
</a><small class="agd-logo-text">1/4/2017 - 31/3/2019 | AGD Provider ID: 32124</small></li>
</ul>
</div>
</div>
<!--/col-md-3-->
<!-- End Badge -->
<!-- Link List -->
<div class="col-md-3 md-margin-bottom-40">
<div class="headline">
<h2>Popular Pages</h2>
</div>
<ul class="list-unstyled link-list">
<li>Features<i class="fa fa-angle-right"></i></li>
<li>Blog<i class="fa fa-angle-right"></i></li>
<li>Support<i class="fa fa-angle-right"></i></li>
<li>Training Videos<i class="fa fa-angle-right"></i></li>
<li>Events<i class="fa fa-angle-right"></i></li>
</ul>
</div>
<!--/col-md-3-->
<!-- End Link List -->
<!-- Address -->
<div class="col-md-3 md-margin-bottom-40">
<div class="contact-info-area">
<div class="contact-info">
<div class="headline">
<h2>Contact Us</h2>
</div>
<address>
166-5489 Byrne Road<br>
Burnaby BC<br>
Canada V5J 3J1
<table>
<tr>
<td class="addr-icon"><i class="fa fa-phone"></i></td>
<td class="addr-list-text">1-866-253-2748</td>
</tr>
<tr>
<td class="addr-icon"><i class="fa fa-fax"></i></td>
<td class="addr-list-text">1-866-611-0548 (Fax)</td>
</tr>
<tr>
<td class="addr-icon"><i class="fa fa-envelope"></i></td>
<td class="addr-list-text">info#cleardent.com</td>
</tr>
</table>
</address>
</div>
<div class="map-img"></div>
</div>
</div>
<!--/col-md-3-->
<!-- End Address -->
</div>
</div>
</div>
<!--/footer-->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>© ClearDent | Privacy Policy</p>
</div>
<!-- Social Share Links -->
<div class="col-md-6">
<div class="social-icons pull-right">
<p>Share this page:
<button class="btn btn-sm rounded-4x btn-facebook" onClick="window.open('https://www.facebook.com/dialog/share?app_id=211125742252409&display=popup&href=' + encodeURI(window.location.href) + '&redirect_uri=https%3A%2F%2Fwww.cleardent.com%2F')"><i class="fa fa-facebook"></i></button>
<button class="btn btn-sm rounded-4x btn-twitter" onClick="window.open('https://twitter.com/intent/tweet?via=cleardentcanada&url=' + encodeURI(window.location.href))"><i class="fa fa-twitter"></i></button>
<button class="btn btn-sm rounded-4x btn-googleplus" onClick="window.open('https://plus.google.com/share?url=' + encodeURI(window.location.href))"><i class="fa fa-google-plus"></i></button>
</p>
</div>
</div>
</div>
<!-- End Social Share Links -->
</div>
</div>
</div>
<!--/copyright-->
<!--=== End Footer Version 1 ===-->
</div>
<!--/wrapper-->
<!-- Demo Request Success Message -->
<div id="demoSuccessMsg" class="modal fade" tabindex="-1" role="alertdialog" aria-labelledby="demoSuccessLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="alert">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" data-dismiss="modal" class="close"><i class="fa fa-times fa-fw"></i></button>
<h4 id="demoSuccessLabel" class="modal-title">Demo Request Sent!</h4>
</div>
<div class="modal-body">
<p>Thank you. A ClearDent consultant will contact you via the contact information you have just provided within two (2) business days.</p>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn-u"><i class="fa fa-times fa-fw"></i> Got it!</button>
</div>
</div>
</div>
</div>
<!-- Google Optimize Popup Modal -->
<div id="modalConvert" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="labelConvert">
<div class="modal-dialog" role="document">
<div class="modal-content"> <!-- InstanceBeginEditable name="convertPopup-GoogleOptimize-plugin" -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times"></i></span></button>
<h4 id="labelConvert" class="modal-title">Like what you see? See even more!</h4>
</div>
<div class="modal-body"> <img class="img-responsive img-spacer margin-bottom-30" src="assets/img/features/cleardent/kiosk.png" alt="iPad Kiosk helps with gathering patient in-take">
<p>Book a demo and one of our friendly consultants can walk you through all the benefits your practice can expect when you choose to implement Kiosk at your practice. Plus, we have many other amazing features that we would be happy to show you as well!</p>
<!-- Demo Menu-->
<form action="#" method="post" id="demo-formPopup" name="demo-formPopup" class="sky-form" onSubmit="return false;">
<fieldset>
<label class="input"><i class="icon-prepend fa fa-user"></i>
<input type="text" name="demo-name" id="demo-namePopup" required placeholder="Your name">
</label>
<label class="input"><i class="icon-prepend fa fa-envelope"></i>
<input type="email" name="demo-email" id="demo-emailPopup" required placeholder="Your email">
</label>
<label class="input"><i class="icon-prepend fa fa-phone"></i>
<input type="tel" name="demo-phone" id="demo-phonePopup" required placeholder="Your phone number">
</label>
<label class="input"><i class="icon-prepend fa fa-commenting"></i>
<input type="text" name="demo-notes" placeholder="Additional notes to us">
</label>
<input class="hidden" type="text" id="n7Q2326JYZ334s58FWq3TrPopup" name="n7Q2326JYZ334s58FWq3Tr" value="bg62U79DPNCTbBvpZHueZG" tabindex="-1" aria-hidden="true">
<input class="hidden" type="text" id="campaignPopup" name="campaign" value="" tabindex="-1" aria-hidden="true">
</fieldset>
<footer>
<div class="form-buttons">
<button id="btnReqDemoPopup" class="btn-u pull-left"><i class="fa fa-paper-plane fa-fw"></i> Book</button>
<button type="button" class="btn-u btn-brd pull-right" data-dismiss="modal"><i class="fa fa-times fa-fw"></i> Close</button>
</div>
<div class="form-sub-msg">
<p>Sending a demo request, please wait…</p>
</div>
</footer>
</form>
</div>
<!-- InstanceEndEditable --> </div>
</div>
</div>
<!-- Google Optimize Popup Modal End -->
<!-- JS Global Compulsory
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
-->
<!-- JS Implementing Plugins
<script src="../assets/1.9.5/plugins/back-to-top.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
-->
<script src="assets/1.9.7/assets/js/all-page-pack/js/all-page-pack.min.js"></script>
<!-- InstanceBeginEditable name="page-linked-script" --> <!-- InstanceEndEditable -->
<!-- JS Main
<script src="../assets/1.9.5/js/plugins/fancy-box.js"></script>
<script src="../assets/1.9.5/js/app.js"></script>
-->
<!-- JS Customization
<script src="../assets/1.9.5/js/custom2.js"></script>
-->
<script src="assets/1.9.7/assets/js/all-page-pack/js/custom-pack.min.js"></script>
<!-- JS Page Level -->
<script>
function parse_query_string(query) {
var vars = query.split("&");
var query_string = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = decodeURIComponent(pair[1]);
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(decodeURIComponent(pair[1]));
}
}
return query_string;
}
$(document).ready(function () {
App.init();
FancyBox.initFancybox();
wow = new WOW().init();
$("#demo-phone").mask('(999) 999-9999', {placeholder:'X'});
$("#demo-form").validate({
submitHandler: function(form) {
var query_str = parse_query_string(window.location.search.substring(1));
if (typeof(query_str) || typeof(query_str["utm_campaign"])) {
$("#campaign").val(query_str["utm_campaign"]);
} else {
$("#campaign").val("Not Specified");
}
ga("send", "pageview", "/script/demo.php");
$(".form-buttons").fadeOut("fast");
$(".form-sub-msg").fadeIn("fast");
$.fancybox.showLoading();
$.post("/script/demo.php", $("#demo-form").serialize(), function(data) {
if (data.indexOf("Failed") == -1) {
try {
ga("send", "pageview", "/script/demoed.php");
/* fbq("track", "Purchase", {
value: 1.00,
currency: "CAD",
content_type: "product",
content_ids: ["1"]
});
twq("track", "Purchase", {
value: "1.00",
currency: "CAD",
content_type: "product",
content_ids: ["1"],
num_items: 1
}); */
} catch (e) {}
$.fancybox.hideLoading();
$(".form-sub-msg").fadeOut("fast");
$(".form-buttons").fadeIn("fast");
$("#btnClear").click();
$("#demoSuccessMsg").modal("show");
} else {
$(".form-sub-msg").html("<strong style='color: red;'>Error sending request, please call <a href='tel:+18662532748,1'>1-866-253-2748</a>. Sorry for the inconvenience.</strong>");
}
});
}
});
//Pop-up conversion plugin for Google Optimize
$("#demo-phonePopup").mask('(999) 999-9999', {placeholder:'X'});
$("#demo-formPopup").validate({
submitHandler: function(form) {
var query_str = parse_query_string(window.location.search.substring(1));
if (typeof(query_str) || typeof(query_str["utm_campaign"])) {
$("#campaignPopup").val(query_str["utm_campaign"]);
} else {
$("#campaignPopup").val("Not Specified");
}
ga("send", "pageview", "/script/demo.php");
$(".form-buttons").fadeOut("fast");
$(".form-sub-msg").fadeIn("fast");
$.fancybox.showLoading();
$.post("/script/demo.php", $("#demo-formPopup").serialize(), function(data) {
if (data.indexOf("Failed") == -1) {
try {
ga("send", "pageview", "/script/demoed.php");
fbq("track", "Purchase", {
value: 1.00,
currency: "CAD",
content_type: "product",
content_ids: ["1"]
});
twq("track", "Purchase", {
value: "1.00",
currency: "CAD",
content_type: "product",
content_ids: ["1"],
num_items: 1
});
} catch (e) {}
$.fancybox.hideLoading();
$(".form-sub-msg").fadeOut("fast");
$(".form-buttons").fadeIn("fast");
$('#modalConvert').modal("hide")
$("#demoSuccessMsg").modal("show");
} else {
$(".form-sub-msg").html("<strong style='color: red;'>Error sending request, please call <a href='tel:+18662532748,1'>1-866-253-2748</a>. Sorry for the inconvenience.</strong>");
}
});
}
});
});
</script>
<!-- InstanceBeginEditable name="page-script" -->
<!--Facebook Advanced Matching Start-->
<!-- Homework for Jason Begin (Wrong Use Here; Use Cookie to send successful submit to thank you page) -->
<!--<script>
/*
fbq('init', '697649880319954', {
em: '{{_email_}}',
ph: '{{_phone_}}',
});
*/
</script> -->
<!-- Homework for Jason End -->
<!--Facebook Advanced Matching End-->
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
//Required Salesforce functions
function timestamp() {
var response = document.getElementById("g-recaptcha-response");
if (response == null || response.value.trim() == "") {
var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);
elems["ts"] = JSON.stringify(new Date().getTime());
document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems);
}
}
window.setInterval(timestamp, 500);
//Masking
$("#sfphone").mask('(999) 999-9999', {placeholder:'X'});
//Form helper functions
function getProvince(pStrPhone) {
var areacode = pStrPhone.substring(0, 3);
switch (areacode) {
case "403":
case "780":
case "587":
case "825":
return "AB";
case "604":
case "778":
case "250":
case "236":
return "BC";
window.location.replace('page1.html');
break;
case "204":
case "431":
return "MB";
case "506":
return "NB";
case "709":
return "NL";
case "867":
return "YT";
case "902":
case "782":
return "NS";
case "416":
case "647":
case "437":
case "519":
case "226":
case "548":
case "613":
case "343":
case "705":
case "249":
case "807":
case "905":
case "289":
case "365":
return "ON";
case "418":
case "581":
case "450":
case "579":
case "514":
case "438":
case "819":
case "873":
return "QC";
default:
return "";
}
}
function cleanPhNum(pStrPhone) {
return pStrPhone.replace("-", "").replace("(", "").replace(")","").replace(" ", "");
}
//Form validation and reCAPTCHA
//Jason Home Work - jQuery Validate and figure out how it validates
$("#sfdemoPreSubmit").click(function(e) {
e.preventDefault();
$("#sfcompany").val($("#sflast_name").val() + ", " + $("#sffirst_name").val());
$("#sfphone").val(cleanPhNum($("#sfphone").val()));
$("#sfstate").val(getProvince($("#sfphone").val()));
$("#sfDemoForm").validate();
if ($("#sfDemoForm").valid()) {
grecaptcha.execute();
}
});
function submitDemoToLead(token) {
$("#sfDemoForm").submit();
}
function redirect() {
var textValue = areacode;
if(textValue == 'BC')
{
location.href = "www.xxx.com/bc";
}
if(textValue == 'AB')
{
location.href = "www.xxx.com/ab";
}
if(textValue == 'ON')
{
location.href = "www.xxx.com/on";
}
else
{
alert("Invalid Input");
}
}
/*
$("#sfDemoForm").validate({
submitHandler: function(form) {
var query_str = parse_query_string(window.location.search.substring(1));
if (typeof(query_str) || typeof(query_str["utm_campaign"])) {
$("#campaign").val(query_str["utm_campaign"]);
} else {
$("#campaign").val("Not Specified");
}
ga("send", "pageview", "/script/demo.php");
$(".form-buttons").fadeOut("fast");
$(".form-sub-msg").fadeIn("fast");
$.fancybox.showLoading();
$.post("/script/demo.php", $("#demo-form").serialize(), function(data) {
if (data.indexOf("Failed") == -1) {
try {
ga("send", "pageview", "/script/demoed.php");
fbq("track", "Purchase", {
value: 1.00,
currency: "CAD",
content_type: "product",
content_ids: ["1"]
});
twq("track", "Purchase", {
value: "1.00",
currency: "CAD",
content_type: "product",
content_ids: ["1"],
num_items: 1
});
} catch (e) {}
$.fancybox.hideLoading();
$(".form-sub-msg").fadeOut("fast");
$(".form-buttons").fadeIn("fast");
$("#btnClear").click();
$("#demoSuccessMsg").modal("show");
} else {
$(".form-sub-msg").html("<strong style='color: red;'>Error sending request, please call <a href='tel:+18662532748,1'>1-866-253-2748</a>. Sorry for the inconvenience.</strong>");
}
});
}
});
*/
Can JavaScript perform type coercion on just a plain old BC, AB, and ON? even if you're using == instead of ===, you still need BC, AB and ON to be enclosed in quotes of some sort to indicate a literal string rather than another variable... especially since the textValue variable you're comparing against (which is just areacode) is a string.
I want to show my value when I click the button like this:
I want to show that value using JavaScript, but I can't. Because this is make me confused.
This is code in view blade:
<!-- Category Field -->
<div class="form-group col-sm-6">
{!! Form::label('category_id', 'Category:') !!}
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
#foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio"> {{ $occasions }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
#foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio"> {{ $types }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
#foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio"> {{ $flowers }}</label>
</div>
</li>
#endforeach
</div>
</div>
</div>
</div>
And this is code in Controller edit function
public function edit($id)
{
$product = $this->productRepository->findWithoutFail($id);
$store = Store::pluck('name', 'id')->all();
$photo = json_decode($product->photo_list);
$category = Category::pluck('name','id')->all();
$category1 = Category::where('parent_id','=',1)->pluck('name','id')->all();
$category2 = Category::where('parent_id','=',2)->pluck('name','id')->all();
$category3 = Category::where('parent_id','=',3)->pluck('name','id')->all();
if (empty($product)) {
Flash::error('Product not found');
return redirect(route('products.index'));
}
return view('products.edit',compact('product','store','category','photo','category1','category2','category3'));
}
UPDATE CODE
I try this code its work, but when I check 1 button or 2 button only. In other one give me result "undefined".
This is my update code in view blade:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
#foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
#foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio" value="{{ $types }}"> {{ $types }}</label>
</div>
</li>
#endforeach
</div>
<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
#foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers }}"> {{ $flowers }}</label>
</div>
</li>
#endforeach
</div>
</div>
</div>
<script type="text/javascript">
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').val();
var category_types = $('input[name="category[\'types\']"]:checked').val();
var category_flowers = $('input[name="category[\'flowers\']"]:checked').val();
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});
</script>
Look my image for detail
You missed value attributes to your radio button. Checkout the below code and kindly repeat it for other fields also.
<label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>
Jquery
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').val() || '';
var category_types = $('input[name="category[\'types\']"]:checked').val() || '';
var category_flowers =$('input[name="category[\'flowers\']"]:checked').val() || '';
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});
I have this form
<tr ng-repeat="quote in quotes">
<form ng-submit="submit()" name="qut">
<td class="text-left">
{[{ quote.business_name }]}
</td>
<td class="text-left">
<span ng-if="quote.quote">
{[{ quote.quote }]}
</span>
<span ng-if="!quote.quote">
<input ng-model="qt" class="form-control" type="text" name="quote" />
</span>
</td>
<td class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</td>
</form>
</tr>
In my controller I have
$scope.submit = function() {
console.log('form');
};
If I change ng-submit="submit()" to ng-click="submit()" in button it works, not sure why I am unable to submit the form
The problem is that you have an illegal html structure by nesting a table > tr element with a form. That causes the inner input[type=submit] not to identify his parent form and trigger the submit.
I could get your example working by replacing tables and tr with div and td with spans.
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.quotes = [{
business_name: "business_name 1",
quote: "quote1",
status: 1
}, {
business_name: "business_name 2",
quote: "quote2",
status: 1
}]
$scope.submit = function() {
console.log('form');
};
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-controller="myController">
<div ng-repeat="quote in quotes">
<form ng-submit="submit()" name="qut{{$index}}">
<span class="text-left">
{{ quote.business_name }}
</span>
<span class="text-left">
<span ng-if="quote.quote">
{{ quote.quote }}
</span>
<span ng-if="!quote.quote">
<input ng-model="qt" class="form-control" type="text" name="quote" />
</span>
</span>
<span class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</span>
</form>
</div>
</div>
Because multiple same form names are being created.
What you should do is you can create dynamic form names inside ng-repeat.
<tr ng-repeat="quote in quotes">
<form ng-submit="submit(qut{{$index}}.$valid)" name="qut{{$index}}">
<td class="text-left">
{[{ quote.business_name }]}
</td>
<td class="text-left">
<span ng-if="quote.quote">
{[{ quote.quote }]}
</span>
<span ng-if="!quote.quote">
<input ng-model="quote.quote" class="form-control" type="text" name="quote{{$index}}" />
</span>
</td>
<td class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</td>
</form>
</tr>
$scope.submit = function(value) {
console.log('form',value);
};