I got an app which i use from CodePen but i cant use expressions in this way {{Expression}}
i need to use it on this way [[]]
here is the code for the app
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sistema de Alarmas Ever-Track</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Oxygen+Mono' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://staticmapmaker.com/css/main.css'>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<body ng-app="myApp">
[[1+3+"QUE FUCKING PEDO OSEA"]]
<input type="checkbox" class="toggle" id="toggle">
<header class="col col-right">
<h1><i class="fa fa-map-marker"></i> Ever-Track GPS System </h1>
Sistema de rastreo de Alarmas
</header>
<div class="main" ng-controller="controller">
<div class="col-left col">
<label for="toggle" class="label-toggle">
<span class="close-it"><span class="fa fa-arrow-circle-left"></span></span>
<span class="open-it"><span class="fa fa-arrow-circle-right"></span></span>
</label>
<div class="controls">
<div class="container" >
<form>
<fieldset ng-show="false">
<div class="form-group">
<label for="location" class="cushion">Location <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.locationAbout]]"></i></label>
<div class="form-control" ><input type="text" ng-model="e.location" id="location"></div>
</div>
<div class="form-group">
<label for="api" class="cushion">
API Key
<i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.APIAbout]]"></i></label>
<div class="form-control"><input type="text" ng-model="e.API" id="api" placeholder="API Key"></div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="zoom">Zoom</label>
<div class="form-control"><input type="range" name="input" ng-model="e.zoom" min="[[e.minZoom]]" max="[[e.maxZoom]]" id="zoom"></div>
</div>
<div class="form-group">
<label for="scale">Scale (2x) <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.scaleAbout]]"></i>
</label>
<div class="form-control"><input type="checkbox" ng-model="scale" ng-true-value="2" ng-false-value="1" id="scale" ng-init="scale='false'"></div>
</div>
<div class="form-group">
<label for="width" class="cushion">Ancho <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i></label>
<div class="form-control"><input type="number" ng-model="e.width" min="0" max="[[e.maxSize]]" id="width"></div>
</div>
<div class="form-group">
<label for="height" class="cushion">Alto <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i>
</label>
<div class="form-control"><input type="number" ng-model="e.height" min="0" max="[[e.maxSize]]" id="height"></div>
</div>
</fieldset>
<fieldset ng-show="false">
<div class="form-group">
<label for="showMarker">Map Marker</label>
<div class="form-control"><input type="checkbox" ng-model="showMarker" ng-true-value="true" ng-false-value="false" id="showMarker"></div>
</div>
<ng-switch on="showMarker">
<ng-switch ng-switch-when="true">
<div class="form-group">
<label for="markerColor"> Marker Color</label>
<div class="form-control"><select ng-model="e.markerColor"
ng-options="color for color in colors" id="markerColor">
</select></div>
</div>
<div class="form-group">
<label for="markerSize"> Marker Size</label>
<div class="form-control"><select ng-model="e.markerSize"
ng-options="markerSize.value as markerSize.text for markerSize in markerSizes" id="markerSize">
</select></div>
</div>
</ng-switch>
</ng-switch>
</fieldset>
<fieldset>
<div class="form-group">
<label for="mapType"> Tipo de Mapa</label>
<div class="form-control"><select ng-model="e.mapType"
ng-options="mapType for mapType in mapTypes" id="mapType">
</select></div>
</div>
<div class="form-group">
<label for="format"> Formato imagen</label>
<div class="form-control"><select ng-model="e.format"
ng-options="format for format in formats" id="format">
</select></div>
</div>
<div class="form-group">
<label for="visual"> Efecto Virtual</label>
<div class="form-control"><input type="checkbox" ng-model="visual" ng-true-value="true" ng-false-value="false" ng-init="visual='true'" id="visual"></div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-right col">
<div class="static">
<img ng-src="http://maps.googleapis.com/maps/api/staticmap?center=[[e.location.split(' ').join('+')]]&zoom=[[e.zoom]]&scale=[[scale]]&size=[[e.width]]x[[e.height]]&maptype=[[e.mapType]]&sensor=false[[ e.API !== '' && '&key='+e.API || '' ]]&format=[[e.format]]&visual_refresh=[[visual]][[ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' ]]" alt="Google Map of [[$route.current.params]]" class="static-map" id="map">
</div>
<div class="tabs">
</div>
</div>
</div>
</body>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.3/angular-route-segment.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Can you tell me why this is happening ?? thanks im getting started with angularJS
You can use $interpolateProvider:
Used for configuring the interpolation markup. Defaults to {{ and }}.
Example:
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}]);
Finally got it, didn't realize there was this piece of code on Index.js
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
Thaks a lot guys, im really getting started so i got no idea why was this part of code until now....
With Angular JS you should use {{ scopeVariableName }}, below is a very simple and easy to understand example for you to get started.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Related
I'm making a websurvey where I have to load several bootstrap-sliders for each individual page, submit and then move to the next where I have to load several bootstrap-sliders again.
The problem is that whenever the page is loading (right after pressing submit), it loads each individual bootstrap-slider (taking about more pixels space than it'll need) before snapping into the way it's supposed to render.
Does anyone have any suggestions as to how to load my page correctly? (i.e. rendering it only when it's "ready"?)
You can check a copy of my code at https://jsfiddle.net/MRT77/crmhqbaz/5/.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.1/css/bootstrap-slider.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css" rel="stylesheet" integrity="sha384-uhut8PejFZO8994oEgm/ZfAv0mW1/b83nczZzSwElbeILxwkN491YQXsCFTE6+nx" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div class="container my-container">
<form action="/submit-testSlim" method="post">
<div class="form-group row my-row my-row-slider">
<div class="col-5 text-right my-col">
<label class="control-label" for="0" data-toggle="tooltip" data-placement="top" > </label>
</div>
<div class="col-7 my-col">
<input class="slider form-control" id="0" name="0" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
</div>
</div>
<div class="form-group row my-row my-row-slider">
<div class="col-5 text-right my-col">
<label class="control-label" for="1" data-toggle="tooltip" data-placement="top" > </label>
</div>
<div class="col-7 my-col">
<input class="slider form-control" id="1" name="1" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
</div>
</div>
<div class="form-group row my-row my-row-slider">
<div class="col-5 text-right my-col">
<label class="control-label" for="2" data-toggle="tooltip" data-placement="top" > </label>
</div>
<div class="col-7 my-col">
<input class="slider form-control" id="2" name="2" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
</div>
</div>
<div class="form-group row my-row my-row-slider">
<div class="col-5 text-right my-col">
<label class="control-label" for="3" data-toggle="tooltip" data-placement="top" > </label>
</div>
<div class="col-7 my-col">
<input class="slider form-control" id="3" name="3" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
</div>
</div>
<div class="form-group row my-row my-row-slider">
<div class="col-5 text-right my-col">
<label class="control-label" for="4" data-toggle="tooltip" data-placement="top" > </label>
</div>
<div class="col-7 my-col">
<input class="slider form-control" id="4" name="4" data-toggle="tooltip" data-placement="top" data-provide="slider" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0">
</div>
</div>
<button class="btn btn-primary" type="button">SUBMIT</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.1/bootstrap-slider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.js"></script>
<script src="/javascripts/script.js"></script>
</body>
</html>
Add css display: none; to your input selector, it will be load before javascript.
input.slider {
display: none;
}
ex => https://jsfiddle.net/a0wsg7mo/
I'm trying to make the last row look exactly like the others, but with the icon appended to the text box. I can't seem to get the width right!
(I apologize... I don't know how to make the code snippet render properly in this page. You have to view full screen.)
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="input-group row">
<label>Date To:</label>
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
Retain the form group of the div above "Date to:" label, then you can insert a div wrapping the input and image div's and add the input-group class which will produce the required result, please check my below example!
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date To:</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you want to keep it to the left, it takes a bit of out of class work like so:
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="input-group row">
<label class="pt-2">Date To:</label>
<input type="text" class="form-control ml-2"
style="border-top-left-radius: .25rem;border-bottom-left-radius: .25rem;"/>
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
i need to get an id from the url, and display it to the input.
When i try to get it in the input, they tell me they give me this error:
"Required Integer parameter 'idpatient' is not present."
this is my html page and table from where i get the id:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tous les patients</title>
<meta charset="utf-8" content="text/html" X-Content-Type-Options="nosniff" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"
th:href="#{/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/myStyle.css"
th:href="#{/css/myStyle.css}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="ListePatientController">
<div class="container">
<form>
<label>Mot clé:</label>
<input type="text" ng-model="motCle"/>
<Button ng-click="charger()">Chercher un patient</Button>
</form>
</div>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Prenom</th>
<th>Sexe</th>
<th>Date de naissance</th>
<th>Nationalité</th>
<th>CIN</th>
<th>CNE</th>
<th>Type de couverture</th>
<th>Num° du type de couverture</th>
<th>Province</th>
<th>Résident</th>
<th>Adresse personnelle du patient</th>
<th>Adresse parents du patient</th>
<th>GSM</th>
<th>Adresse électronique</th>
<th>Pratiquer un sport</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in patients.content">
<td>{{p.idPatient}}</td>
<td>{{p.nomPatient}}</td>
<td>{{p.prenomPatient}}</td>
<td>{{p.sexe}}</td>
<td>{{p.dateNaiss|date:'dd/MM/yyyy'}}</td>
<td>{{p.nationalite}}</td>
<td>{{p.cin}}</td>
<td>{{p.cne}}</td>
<td>{{p.typeCouverture}}</td>
<td>{{p.numTypeCouverture}}</td>
<td>{{p.province}}</td>
<td>{{p.resident}}</td>
<td>{{p.adressPerso}}</td>
<td>{{p.adressPatient}}</td>
<td>{{p.gsmPatient}}</td>
<td>{{p.mailPatient}}</td>
<td>{{p.pratiquePatient}}</td>
<td>
ajout consult
</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<ul class="nav nav-pills">
<li ng-class="{active:$index==pageCourante}" class="clickable" ng-repeat="p in pages track by $index">
<a ng-click="gotoPage($index)">{{$index}}</a>
</li>
</ul>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myApp.js"></script>
</body>
</html>
This is the html page when i should display it in the input :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inscription d'une consultation</title>
<meta charset="utf-8" content="text/html" X-Content-Type-Options="nosniff" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"
th:href="#{/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/myStyle.css"
th:href="#{/css/myStyle.css}"/>
</head>
<body ng-app="myApp" ng-controller="inscriptionConsultationController">
<div class="col-md-6 col-sm-6 col-xs-12 container">
<div class="panel panel-success container spacer ">
<div class="panel-heading"><b><h1>Ajout d'une consultation</h1></b></div>
<div class="panel-body">
<div ng-if="mode.value=='form'" >
<form>
<div class="form-group">
<label class="control-label">Date de la consultation:</label>
<input class="form-control" type="date" ng-model="consultation.dateConsult"/>
<span ng-if="errors" class="error">{{errors.dateConsultt}}</span>
</div>
<div class="form-group">
<label class="control-label">Type de la consultation:</label>
<input class="form-control" type="text" ng-model="consultation.typeConsult"/>
<span ng-if="errors" class="error">{{errors.typeConsult}}</span>
</div>
<div class="form-group">
<label class="control-label">Motif(s):</label>
<input class="form-control" type="text" ng-model="consultation.motifConsult"/>
<span ng-if="errors" class="error">{{errors.motifConsult}}</span>
</div>
<div class="form-group">
<label class="control-label">Dignostics:</label>
<input class="form-control" type="text" ng-model="consultation.diagnostic"/>
<span ng-if="errors" class="error">{{errors.diagnostic}}</span>
</div>
<div class="form-group">
<label class="control-label">Maladie chronique?</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="consultation.maladieChronique">Oui</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="consultation.maladieChronique">Non</label>
</div>
<span ng-if="errors" class="error">{{errors.maladieChronique}}</span>
</div>
<div class="form-group">
<label class="control-label">Décision:</label>
<input class="form-control" type="text" ng-model="consultation.decision"/>
<span ng-if="errors" class="error">{{errors.decision}}</span>
</div>
<div class="form-group">
<input type = "number" ng-model="consultation.idPatient" value="idpatient"/>
</div>
<div class="form-group">
<button class="btn btn-success" ng-click="saveConsultation()"> Enregistrer</button>
</div>
</form>
</div>
<div ng-if="mode.value=='confirm'">
<div class="panel-heading container spacer"><h2>Confirmation: La consultation a été ajoutée avec succès!</h2></div>
<div class="form-group">
<label class="control-label">ID:</label>
<label class="control-label">{{consultation.idConsult}}</label>
</div>
<div class="form-group">
<label class="control-label">Date de la consultation:</label>
<label class="control-label">{{consultation.dateConsult|date:'yyyy-MM-dd'}}</label>
</div>
<div class="form-group">
<label class="control-label">Type de la consultation:</label>
<label class="control-label">{{consultation.typeConsult}}</label>
</div>
<div class="form-group">
<label class="control-label">Motif(s):</label>
<label class="control-label">{{consultation.motifConsult}}</label>
</div>
<div class="form-group">
<label class="control-label">Diagnostics:</label>
<label class="control-label">{{consultation.diagnostic}}</label>
</div>
<div class="form-group">
<label class="control-label">Maladie chronique?</label>
<label class="control-label">{{consultation.maladieChronique}}</label>
</div>
<div class="form-group">
<label class="control-label">consultation:</label>
<label class="control-label">{{consultation.decision}}</label>
</div>
<div class="form-group">
<label class="control-label">id patient:</label>
<label class="control-label">{{consultation.idPatient}}</label>
</div>
</div>
<div ng-if="exception">
<span class="error">{{exception.message}}</span>
</div>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myApp.js"></script>
</body>
</html>
This is the Spring service that gets the id :
#RequestMapping(value="/consultations",method=RequestMethod.POST)
public Object saveConsultation(#RequestParam (value = "idpatient", required = true) String idpatient,
#RequestBody #Valid Consultation c,
BindingResult bindingResult){
if(bindingResult.hasErrors()){
Map<String, Object> errors=new HashMap<>();
errors.put("errors", true);
for(FieldError fe: bindingResult.getFieldErrors()){
errors.put(fe.getField(), fe.getDefaultMessage());
}
return errors;
}
return consultationMetier.saveConsultation(idpatient,c,bindingResult);
}
You can not use it directly, you need share data for two controller in service level.
See - AngularJS - Passing data between pages for details.
When i include the CodeIgniter library on my website
I have this :
SEE THE PROBLEM HERE
A blank after the body tag
This is caused by the recaptcha library , because when i have removed it , the blank have disappeared
Need some help ;)
My code :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Razal</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<META NAME="description" CONTENT="Serveur privé Dofus 1.29.1">
<META NAME="author" CONTENT="Ichiga">
<link href="https://www.razal.eu/style/css/style_v13.css" rel="stylesheet" type="text/css" />
<link href="https://www.razal.eu/style/css/pure-min.css" rel="stylesheet" type="text/css" />
<script language="javascript">
<!--
if (top.location!= self.location)
{
top.location = self.location.href
}
function ToogleMobileMenu()
{
document.getElementById("div-left").classList.toggle('div-left-open');
}
function UpdateMinViewIpad()
{
var viewportmeta = document.querySelector('meta[name="viewport"]');
if(window.innerHeight > window.innerWidth) {viewportmeta.content = 'width=device-width';}
else{viewportmeta.content = 'width=device-height';}
}
// BUG orientation portrait/lanscape IOS //
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i))
{
UpdateMinViewIpad();
document.addEventListener('orientationchange', function ()
{
UpdateMinViewIpad();
}, false);
}
//-->
</script>
</head>
<body>
<div class="div-header">
<div class="div-header-content">
</div>
<div class="div-bar-menu">
<div class="div-menu">
<img src="https://www.razal.eu/style/img/menu_separator.png">
Accueil
<img src="https://www.razal.eu/style/img/menu_separator.png">
Rejoindre Razal
<img src="https://www.razal.eu/style/img/menu_separator.png">
Classements
<img src="https://www.razal.eu/style/img/menu_separator.png">
Forum
<img src="https://www.razal.eu/style/img/menu_separator.png">
<a onclick="alert('à venir')" href="#">Vidéos</a>
<img src="https://www.razal.eu/style/img/menu_separator.png">
</div>
</div>
</div>
<div class="div-content">
<div id="div-left" class="div-left">
<div class="div-floater-menu" onclick="ToogleMobileMenu();">
<img src="images/floatter-menu.png" alt="menu">
</div>
<div class="div-box">
<button class="pure-button pure-button-active" style="width:100%;" id="vote">Créer un compte</button>
</div>
<div class="div-box">
<legend>Connexion</legend>
<hr>
<form action="https://www.razal.eu/utilisateur/connexion" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="username" type="text" name="username" placeholder="Nom de compte">
</div>
<label for="password">Mot de passe</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="password" type="password" name="password" placeholder="Mot de passe">
</div>
<button type="submit" class="pure-button pure-button-primary">se connecter</button>
</fieldset>
</div>
</form>
</div>
<div class="div-box">
<legend>Voter</legend>
<img style="width:100%" src="https://www.razal.eu/style/img/rpg.png">
</div>
</div>
<div class="div-page">
<div class="div-box">
<h2>Formulaire d'inscription</h2>
<hr class="hrtitle" />
<div class="pure-u-1-4">
</div>
<div class="pure-u-1-3">
<form action="https://www.razal.eu/utilisateur/inscription" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="username" name="username" type="text">
<label for="email">Adresse e-mail</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="email" name="email" type="email">
<label for="nickname">Pseudo</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="nickname" name="nickname" type="text">
<label for="password">Mot de passe</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="password" type="password">
<label for="password">Confirmation MDP</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="passwordconfirm" type="password" >
<p><div class="g-recaptcha" data-sitekey="6LfDgB0TAAAAANw_dSy0Pd-ezJMRTko_UHmpcm6R"></div>
<script src="https://www.google.com/recaptcha/api.js?hl=fr" async defer></script></p>
<button type="submit" class="pure-button pure-button-primary">S'inscrire</button>
</fieldset>
</div>
</form>
</div>
</div>
<br>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
entity looks like a result of including files saved in UTF-8 with BOM.
I suggest to check for files encoding, maybe if you are working with different conflicting formats.
I am trying to develop a responsive form with twitter bootstrap, but it is not submitting.
Why isn't it submitting?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Generate Reports</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src='js/bootstrap-datepicker.js'></script>
<script src='js/bootstrap.js'></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script>
$(document).ready(function() {
$('#report_repetitions').change(function() {
var number_of_repetitions=$('#report_repetitions').val();
var container = $('#date_list');
var numItems = $('.date_group').length;alert(numItems);
if(number_of_repetitions>numItems)
{
for(var i=numItems+1;i<=number_of_repetitions;i++)
$('<div class="well"> <div class="date_group" id="group_'+i+'" > <div class="control-group" > <label class="control-label required span5" for="Step1_home_zip">Enter Date Range Text '+i+'<span class="required">*</span></label><div class="controls"><input class="span3" size="5" name="text_'+i+'" maxlength="5" name="Step1[home_zip]" id="report_repetitions" type="text" /></div></div>'
+'<div class="control-group" ><label class="control-label required span5" for="Step1_home_zip">From<span class="required">*</span></label><div class="controls "><div id="from'+i+'" class="input-append date "><input type="text" name="from_'+i+'" ></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div><div class="control-group" ><label class="control-label required span5" for="Step1_home_zip">To<span class="required">*</span></label><div class="controls "><div id="to'+i+'" class="input-append date "><input type="text" name="to_'+i+'"></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div></div></div>'
+'<script type="text/javascript">'
+'$(function() {'
+' $("#from'+i+'").datetimepicker({'
+' pickTime: false'
+' });'
+'$("#to'+i+'").datetimepicker({'
+' pickTime: false'
+'});});<'
+'/script>').click(function () {
window.open(path);
}).appendTo(container);
}
else if(number_of_repetitions<numItems)
{
alert("kkk");alert(number_of_repetitions);alert(numItems);
for(var i=number_of_repetitions;i<=numItems;i++)
{ alert(i);
('#group_2').remove();
}
}
else
alert("hhh");
});
});
</script>
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<center><h2>Generate Report</h2></center>
</div>
<div class="span4 pull-right"> </div>
</div>
<div class="row-fluid">
<form class="well span12">
<center>
<div class="row-fluid">
<div class="span12">
<form class="form-horizontal" id="report_form" action="insert.php" method="post">
<div id="report_group">
<div class="control-group">
<label class="control-label required span5" for="Step1_email">Improvement Threshold<span class="required">*</span></label>
<div class="controls">
<input class="span4" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required span5" for="Step1_home_zip">Services Top Threshold <span class="required">*</span></label>
<div class="controls">
<input class="span4" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
<div id="date_list">
<div class="well">
<div class="date_group" id="group_1" >
<div class="control-group" id="date_group">
<label class="control-label required span5" for="Step1_home_zip">Enter Date Range Text 1<span class="required">*</span></label>
<div class="controls">
<input class="span3" size="5" maxlength="5" name="text_1" id="report_repetitions" type="text" />
</div>
</div>
<div class="control-group" >
<label class="control-label required span5" for="Step1_home_zip">From<span class="required">*</span></label>
<div class="controls ">
<div id="from1" class="input-append date ">
<input type="text" name="from_1" ></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
<div class="control-group" >
<label class="control-label required span5" for="Step1_home_zip">To<span class="required">*</span></label>
<div class="controls ">
<div id="to1" class="input-append date ">
<input type="text" name="to_1"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div> </div>
</div>
</div>
<div class="pull">
<button type="submit" class="btn btn-primary">Submit</button>
<input type="reset" class="btn" value="Reset">
</div>
</div>
</form>
</div>
</center>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#from1").datetimepicker({
pickTime: false
});
$("#to1").datetimepicker({
pickTime: false
});
});
</script>
</body>
</html>
insert.php also there on same folder
but it not moving to insert.php
You have nested forms. This is invalid and the cause of your problem.
Remove the extra form. Use a validator.
You have nested forms, which is invalid syntax.
<form class="well span12">
This should have been a div instead
<input type="submit" name="submit" value="Submit">
Can you try this
Replace the
<button type="submit" class="btn btn-primary">Submit</button>
with
<input type="submit" class="btn btn-primary" value="Submit" />