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" />
Related
So I want to validate if the email submitted is valid. Tried to make it work with bootstrap because I have to use it.
Here's the codepen:
https://codepen.io/yytimo/pen/ExWLbLd
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustomEmail"
value=""
required
/>
<label for="validationCustomEmail" class="form-label">E-Mail</label>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter valid e-mail.</div>
</div>
</div>
Found a working solution with some javascript tricks. Try this
(() => {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
var email = document.getElementById('validationCustomEmail');
email.oninput = () => {
const re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!re.test(email.value)){
email.setCustomValidity("Invalid field.");
email.classList.add('is-invalid');
} else {
email.classList.remove('is-invalid');
email.setCustomValidity("")
}
}
}
)();
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustom01"
value="Mark"
required
/>
<label for="validationCustom01" class="form-label">First name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustom02"
value="Otto"
required
/>
<label for="validationCustom02" class="form-label">Last name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustomEmail"
value=""
required
/>
<label for="validationCustomEmail" class="form-label">E-Mail</label>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter valid e-mail.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom03" required />
<label for="validationCustom03" class="form-label">City</label>
<div class="invalid-feedback">Please provide a valid city.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom05" required />
<label for="validationCustom05" class="form-label">Zip</label>
<div class="invalid-feedback">Please provide a valid zip.</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="invalidCheck"
required
/>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Use input with type:email can help you.
image
So My text goes around the left and my form on the right. This is exactly what I want but everything is out of my jumbotron.
I have listed my HTML and CSS code below. Please review it .
<div class = "jumbotron">
<div class = "cmpnt"><h1 style="font-family: 'Pacifico';"class="logo" > Mesmere</h1><h5> A safe social network <br>for <b>Everyone.</b><br>Build your Online presence <br>from the ground up.<br></h5></div>
<div class="cmpnt" >
<h3>Sign Up</h3>
<form id = "signup" action="/signAction" method="POST" >
<input type='hidden' name='csrfmiddlewaretoken' value='yr9j1vpQzJsfZXriKQLpU6GjqkdDZpSQeDlbwp5ENBaSLKZZDOrDq25iONXVjfXf' />
<div id="div_id_username" class="control-group"> <label for="id_username" class="control-label requiredField">
Username<span class="asteriskField">*</span> </label> <div class="controls"> <input type="text" name="username" placeholder="Make it Creative" class="textinput textInput" required id="id_username" /> </div> </div> <div id="div_id_password" class="control-group"> <label for="id_password" class="control-label requiredField">
Password<span class="asteriskField">*</span> </label> <div class="controls"> <input type="password" name="password" placeholder="We won't sell it" class="textinput textInput" required id="id_password" /> </div> </div> <div id="div_id_email" class="control-group"> <label for="id_email" class="control-label requiredField">
Email Id<span class="asteriskField">*</span> </label> <div class="controls"> <input type="email" name="email" class="emailinput" required id="id_email" /> </div> </div>
<br>
<input type="submit" class="btn btn-info" value="Submit">
</form>
<p>Already have an account?Login </p>
</div>
</div>
CSS-
html,body{
overflow-x:hidden;
width:100%;
height: 100%;
font-family: "Open Sans"
}
.jumbotron{
background-color:#23103a;
color:#FF6C00;
}
.cmpnt{
float:left;
}
.btn{
background-color: #a0204c;
border-color:#a0204c;
}
~Thanks in advance
Is this you want ??
html, body {
overflow-x: hidden;
width: 100%;
height: 100%;
font-family: "Open Sans"
}
.jumbotron {
background-color: #23103a;
color: #FF6C00;
}
.cmpnt {
float: left;
}
.btn {
background-color: #a0204c;
border-color: #a0204c;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class = "jumbotron clearfix">
<div class="container">
<div class = "cmpnt">
<h1 style="font-family: 'Pacifico';"class="logo" > Mesmere</h1>
<h5> A safe social network <br>
for <b>Everyone.</b><br>
Build your Online presence <br>
from the ground up.<br>
</h5>
</div>
<div class="cmpnt" >
<h3>Sign Up</h3>
<form id = "signup" action="/signAction" method="POST" >
<input type='hidden' name='csrfmiddlewaretoken' value='yr9j1vpQzJsfZXriKQLpU6GjqkdDZpSQeDlbwp5ENBaSLKZZDOrDq25iONXVjfXf' />
<div id="div_id_username" class="control-group">
<label for="id_username" class="control-label requiredField"> Username<span class="asteriskField">*</span> </label>
<div class="controls">
<input type="text" name="username" placeholder="Make it Creative" class="textinput textInput" required id="id_username" />
</div>
</div>
<div id="div_id_password" class="control-group">
<label for="id_password" class="control-label requiredField"> Password<span class="asteriskField">*</span> </label>
<div class="controls">
<input type="password" name="password" placeholder="We won't sell it" class="textinput textInput" required id="id_password" />
</div>
</div>
<div id="div_id_email" class="control-group">
<label for="id_email" class="control-label requiredField"> Email Id<span class="asteriskField">*</span> </label>
<div class="controls">
<input type="email" name="email" class="emailinput" required id="id_email" />
</div>
</div>
<br>
<input type="submit" class="btn btn-info" value="Submit">
</form>
<p>Already have an account?Login </p>
</div>
</div>
</div>
I'm trying to build my first website and stumbled over a problem.
I can't align my register forms in the center.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content ="width = device-width, initial-scale = 1">
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style type="text/css">
body{font: 14px sans-serif;background-color: slategrey;}
.wrapper{width: 350px; padding: 20px;}
h2 {color:#ff0000}
</style>
</head>
<body>
I can't get the next part to line up in the middle of the page. It just get pushed to the side.
<div align=center>
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form class="form-horizontal" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div align=center>
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<div class="col-xs-2">
<label>Username</label>
<input type="text" name="username"class="form-control" value="<?php echo $username; ?>">
<span class="help-block"><?php echo $username_err; ?></span>
</div>
</div>
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<div class="col-xs-2">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="help-block"><?php echo $password_err; ?></span>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Check the demo here https://www.bootply.com/v5nmPRdDmR, With the following code
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form class="form-horizontal" action="" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="help-block"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
A little bit simpler than example from #ild_flue by using offset class. See https://www.bootply.com/7i5NQn4fiL
<div class="row">
<div class="col-md-3 col-md-offset-3">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form class="form-horizontal" action="" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="help-block"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</form>
</div>
</div>
Can some one check my code and tell me why <br> tags aren't working after <textarea> tags <br> and why things messed up after the Date field?
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function(){
$('#dateRangePicker').datepicker({
format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
$('#dateRangeForm').formValidation('revalidateField', 'date');
});
});
</script>
</head>
<body>
<h1 align="center">Some text here</h1>
<div class="form-group">
<div class="col-sm-3">
<label>Full Name:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px;"/>
</div><br><br>
<div class="col-sm-3">
<label>Father's Name:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px;"/>
</div><br><br>
<div class="col-sm-3">
<label>Permanent Residential Address:</label>
</div>
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea>
</div><br><br>
<div class="col-sm-3">
<label>Address for Communication:</label>
</div>
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea>
</div><br><br>
<div class="col-sm-3">
<label>Date:</label>
</div>
<div class="col-sm-3 input-group input-append date" id="dateRangePicker">
<input type="text" class="form-control" name="date" style="width:400px;"/>
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div><br><br>
<div class="col-sm-3">
<label>Age as on Date:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px;"/>
</div><br><br>
<div class="col-sm-3">
<label>Caste:</label>
</div>
<div class="col-sm-9">
<label>SC</label>
<input type="radio"/>   
<label>ST</label>
<input type="radio"/>   
<label>OBC</label>
<input type="radio"/>   
<label>GENERAL</label>
<input type="radio"/>
</div><br><br>
</body>
</html>
If you want to add spacing below an element (in this case ) you should really use CSS. It gives you a lot more control, and you can be more certain that different browsers have the same result.
Seeing as you're already using inline styles in this document, you could do it by saying
<div class="col-sm-9" style="margin-bottom: 20px;">
Generally inline styles is not a good idea - you should really have it in a seperate file, using classes and ID's but i assume you know that :)
Looked at the code and it seems as though you don't understand what the
<br>
tag is used for, but as explained here http://www.w3schools.com/tags/tag_br.asp it inserts a single line break. Hope that helped!
There are few modifications needed in your code.
Problem
<br> tag inserts line break which adds extra space between elements.
The Date field is getting misaligned because of incorrect use of input-group class.
There is no semicolon (;) after  . Correct syntax is
Solution
You can eliminate the need of <br> tags by wrapping each element inside form-group
To align Date, create a child container with class input-group.
is not needed. This is not the standard way of writing HTML. Use margin instead.
Have modified your code with above fixes. Check here
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function()
{
$('#dateRangePicker')
.datepicker(
{
format: 'dd/mm/yyyy',
})
.on('changeDate', function(e)
{
$('#dateRangeForm').formValidation('revalidateField', 'date');
});
});
</script>
</head>
<body>
<h1 align="center">Some text here</h1>
<div class="form-group">
<div class="col-sm-3">
<label>Full Name:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Father's Name:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Permanent Residential Address:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Address for Communication:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Date:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<div class="input-group input-append date" id="dateRangePicker">
<input type="text" class="form-control" name="date" style="width:400px; margin-bottom: 10px;" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Things messed up from here ------>
<div class="form-group">
<div class="col-sm-3">
<label>Age as on Date:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Caste:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<label>SC</label>
<input type="radio"/>   
<label>ST</label>
<input type="radio"/>   
<label>OBC</label>
<input type="radio"/>   
<label>GENERAL</label>
<input type="radio"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Educational Qualification:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Sports Event / Game:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<select class="form-control" id="usr" style="width:400px; margin-bottom: 10px;">
<option>Inspector of Income Tax</option>
<option>Tax Assistant</option>
<option>Stenographer-Gr. II</option>
<option>Multitasking Staff</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Details of Best Performance:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
</div>
</div>
</body>
</html>
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>