Hi This Is My fist time o stack overflow but i would just like to find out how do i make my code clear after a user clicks send in my form here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>Order Now</title>
<link rel="stylesheet" type="text/css" href="styleo.css">
</head>
<body>
<div class="container">
<h2>Order Now</h2>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Discord Name And Discrimator</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Email Address</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<div class="select">
<select name="format" id="format">
<option selected disabled>Choose Your Package</option>
<option value="basic">Basic Bot</option>
<option value="advanced">Advanced Bot</option>
<option value="premuim">Premuim Bot</option>
<option value="Website">Website</option>
</select>
<span class="line"></span>
</div>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox textarea">
<textarea required="required"></textarea>
<span class="text">Type Your Message Here...</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<input type="submit" value="Send">
</div>
</div>
</div>
</body>
</html>
I dont know what should i use should i create a separate file i am new to coding thou i think maybe i should use and use JavaScript but i dont know is there anyone open to help me.sorry if its kinda a noob question
You'll need some JS for that, and you have to make some modifications to your code.
For submitting data you should use <form></form>html element with ID and then target it with JS to do a reset() on it.
Example
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
<title>Order Now</title>
<link rel="stylesheet" type="text/css" href="styleo.css" />
</head>
<body>
<div class="container">
<h2>Order Now</h2>
<div class="row100">
<form id="my-form" autocomplete="off" onsubmit="submit()">
<div>
<label>Discord name and Discrimator : </label> <input type="text" />
</div>
<div><label>Email : </label> <input type="text" /></div>
<div>
<label>Type your text here : </label>
<textarea></textarea>
</div>
<div class="col">
<div class="inputBox">
<div class="select">
<select name="format" id="format">
<option selected disabled>Choose Your Package</option>
<option value="basic">Basic Bot</option>
<option value="advanced">Advanced Bot</option>
<option value="premuim">Premuim Bot</option>
<option value="Website">Website</option>
</select>
<span class="line"></span>
</div>
</div>
</div>
<div class="col">
<input type="submit" value="Send" />
</div>
</form>
</div>
</body>
<script src="clear-form.js"></script>
</html>
clear-form.js :
function submit() {
document.getElementById("my-form").reset();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h2>Order Now</h2>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Discord Name And Discrimator</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Email Address</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
<d iv class="col">
<div class="inputBox">
<div class="select">
<select name="format" id="format">
<option selected disabled>Choose Your Package</option>
<option value="basic">Basic Bot</option>
<option value="advanced">Advanced Bot</option>
<option value="premuim">Premuim Bot</option>
<option value="Website">Website</option>
</select>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox textarea">
<textarea required="required"></textarea>
<span class="text">Type Your Message Here...</span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="btnsubmit" style="border: solid 1px; width: 85px; padding: 10px; cursor: pointer ;border-radius: 8px; background-color: greenyellow;">
submit
</div>
</div>
</div>
</body>
<script>
let send = document.querySelector(".btnsubmit")
console.log(send)
send.addEventListener("click", function () {
console.log("okay")
var container = document.querySelector(".container");
let inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
if(inputs[index].type =="text")
inputs[index].value = '';
}
})
</script>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello Bulma!</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma#0.9.0/css/bulma.min.css"
/>
</head>
<style>
input, label{
display: block;
}
#drive_access{
margin-left: 270px;
}
#submit{
margin-left: 600px;
}
</style>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-narrow">
<label for="name">Name</label>
<input type="text" placeholder="Enter First Name" id="name" class="input is-info"/>
</div>
<div class="column is-narrow">
<label for="last_name">Last Name</label>
<input type="text" placeholder="Enter Last Name" id="last_name" class="input is-info"/>
</div>
<div class="column is-narrow">
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" id="email" class="input is-info"/>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-narrow">
<label for="contact_number">Contact number</label>
<input type="tel" placeholder="Enter contact number" id="contact_number" class="input is-info"/>
</div>
<div class="column is-narrow">
<label>Department</label>
<p class="control">
<span class="select is-info">
<select>
<option value=""> Please choose department</option>
<option value="Administration">Administration</option>
<option value="Electronics">Electronics</option>
<option value="IT Department">IT Department</option>
<option value="">Library</option>
<option value="Mechanical">Mechanical</option>
</select>
</span>
</p>
</div>
<div class="column">
<label for="employment_type">Employment type</label>
<p class="control">
<span class="select is-info">
<select>
<option value="">Choose employment types</option>
<option value="Contract">Contract</option>
<option value="Internship">Internship</option>
<option value="Permanent">Permanent</option>
</select>
</span>
</p>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-narrow">
<label for="preferred_username">Preferred username</label>
<input type="text" id="preferred_username" class="input is-narrow is-info" placeholder="Enter preferred username"/>
</div>
<div class="column is-one-fifth">
<label for="starting_date">Starting date</label>
<input type="date" id="starting_date" class="input is-narrow is-info"/>
</div>
<div class="column is-one-fifth">
<label for="ending_date" id="end_date_label">Ending date</label>
<input type="date" id="ending_date" class="input is-info"/>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-two-fifths">
<label for="affiliation">Affiliation</label>
<p>
<span class="select is-info">
<select>
<option value="">Select employee affiliation</option>
<option value="Rookie">Rookie</option>
<option value="Veteran">Veteran</option>
</select>
</span>
</p>
</div>
<div class="column is-two-fifths">
<label for="computation_device">Computation device</label>
<p class="control">
<span class="select is-info">
<select>
<option value="">Select computation device</option>
<option value="Laptop">Laptop</option>
<option value="Desktop">Desktop</option>
</select>
</span>
</p>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-one-fifth">
<label for="mailing_list">Mailing list</label>
<p class="control">
<textarea rows="4" cols="15" placeholder="Enter names of mailing lists user needs to be added on" id="mailing_list"
class="textarea is-info"></textarea>
</p>
</div>
<div class="column is-one-fifth" id="drive_access">
<label for="drive_access">Specify shared drive access</label>
<p class="control">
<textarea rows="4" cols="15" placeholder="specify shared drive access names here"
id="mailing_list" class="textarea is-info" ></textarea>
</p>
</div>
</div>
</div>
<div class="columns">
<div class="column is-pulled-right">
<button class="button is-primary" id="submit">Submit</button>
</div>
</div>
</div>
</section>
My problem is the UI does not respond well when screen changes. For example if the developer tools tab is opened and you stretch it to the left, the elements just float about. The second issue is i would to have the edges of the elements align. I tried looking into Bulma classes to fix this but no luck. Please help
.section{
display: flex;
flex-direction: column;
align-items: center;
}
I have used both row and col classes of bootstrap and not working properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width-device-width,initial-scale=1">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row ">
<div style="background: cyan" class="offset-md-2 col-md-8">
<h1 style="color: red">Login</h1>
</div>
</div>
<form method="post" action="login">
<div class="row" style="background: lightblue; height: 300px; width:500px;">
<div class="col-md-12">
<div class="col-md-4">Select Type:</div>
<div class="col-md-8">
<select name="user_type" ad="user_type">
<option value="0">Select Type</option>
<option value="Admin" name="admin" id="admin">Admin</option>
<option value="Teacher" name="teacher" id="teacher">Teacher</option>
<option value="Parent" name="parent" id="parent">Parent</option>
</select> </div>
</div>
<div class="col-md-12">
<div class="col-md-4">User Name:</div>
<div class="col-md-8"><input type="text" name="user_name" id="user_name" maxlength="63"> </div>
</div>
<div class="col-md-12">
<div class="col-md-4">Password:</div>
<div class="col-md-8"><input type="password" name="password" id="password" </div>
</div>
<div class="col-md-5"><input type="submit" class="btn btn-primary" name="submit"> </div>
<div class="col-md-offset-2 col-md-5"><input type="reset" class="btn btn-danger" name="reset"> </div>
</div>
</form>
</div>
</body>
</html>
In this first field text select type and select are displaying in two rows. like all fields. I want the text and input field in single row. can anyone help me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width-device-width,initial-scale=1">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row ">
<div style="background: cyan" class="offset-md-2 col-md-8">
<h1 style="color: red">Login</h1>
</div>
</div>
<form method="post" action="login">
<div class="row" style="background: lightblue; height: 300px; width:500px;">
<div class="col-md-12">
<div style="float:left;" class="col-md-4">Select Type:</div>
<div class="col-md-8">
<select name="user_type" ad="user_type">
<option value="0">Select Type</option>
<option value="Admin" name="admin" id="admin">Admin</option>
<option value="Teacher" name="teacher" id="teacher">Teacher</option>
<option value="Parent" name="parent" id="parent">Parent</option>
</select> </div>
</div>
<div class="col-md-12">
<div style="float:left;" class="col-md-4">User Name:</div>
<div class="col-md-8"><input type="text" name="user_name" id="user_name" maxlength="63"> </div>
</div>
<div class="col-md-12">
<div style="float:left;" class="col-md-4">Password:</div>
<div class="col-md-8"><input type="password" name="password" id="password" </div>
</div>
<div style="float:left;" class="col-md-5"><input type="submit" class="btn btn-primary" name="submit"> </div>
<div class="col-md-offset-2 col-md-5"><input type="reset" class="btn btn-danger" name="reset"> </div>
</div>
</form>
</div>
</body>
</html>
Make your life easy and don't put everything in a div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width-device-width,initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body style="background-color: lightgray">
<div class="container">
<div class="row ">
<div class="offset-md-2 col-md-8">
<h1 style="color: #333">Login</h1>
</div>
</div>
<form method="post" action="login">
<div class="row">
<div class="col-md-12">
<h5 style="float: left;margin-left: 30px; ">Select Type:</h5>
<select name="user_type" ad="user_type" style="float: left; margin-left: 20px; margin-top:5px; ">
<option value="0">Select Type</option>
<option value="Admin" name="admin" id="admin">Admin</option>
<option value="Teacher" name="teacher" id="teacher">Teacher</option>
<option value="Parent" name="parent" id="parent">Parent</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">User Name:</div>
<div class="col-md-8"><input type="text" name="user_name" id="user_name" maxlength="63"> </div>
</div>
<div class="col-md-12">
<div class="col-md-4">Password:</div>
<div class="col-md-8"><input type="password" name="password" id="password" </div>
</div>
<div class="col-md-5 m-2"><input type="submit" class="btn btn-primary" name="submit"> </div>
<div class="col-md-offset-2 col-md-5 m-2"><input type="reset" class="btn btn-danger" name="reset"> </div>
</div>
</form>
</div>
</body>
</html>
I am using bootstrap3 and trying to create a horizontal form in which one of the rows should show the controls inline.
In the code below I would like the three selects to be on the same line as the input-group.
I have tried the approaches here: Form inline inside a form horizontal in twitter bootstrap? but I cannot get it to work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="input-group col-xs-4">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
</body>
</html>
Have you tried using a table?
<table>
<tbody>
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</td>
<td>
<select>
<option>Select1</option>
</select>
</td>
<td>
<select>
<option>Select2</option>
</select>
</td>
<td>
<select>
<option>Select3</option>
</select>
</td>
</tr>
</tbody>
</table>
You can try using the row class and not the form group class, tried it with Boostrap 3.
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
https://jsfiddle.net/FJB_ZA/Lmzubdw3/
You need to make changes in your structure to make it fit in one line.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="col-xs-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select1</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
I'm trying to do that bootstrap model:
But the alignement isn't working well because there's a dropdown list (It's not all elements of the same type).
This is what I came for:
This is my fiddle:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label class="col-xs-3 control label">Prefix:</label><br />
<div class="col-xs-5 selectContainer">
<select name="prefix" class="form-control">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="fname" name="fname">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lname" name="lname">
</div>
</div>
<div class="row">
<label for="suffix">Suffix:</label>
<input type="text" class="form-control" id="suffix" name="suffix">
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="info">Information:</label>
<textarea class="form-control" rows="4" id="info" name="info"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
How can I fix this alignment problem?
Try something like this: http://www.bootply.com/TvgQizWRZw
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<label for="prefix">Prefix</label>
<select name="prefix" class="form-control" id="prefix">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
<div class="col-md-6">
<label for="tbLastName">Last name</label>
<input type="text" class="form-control" id="tbLastName">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="tbFirstName">First Name</label>
<input type="text" class="form-control" id="tbFirstName">
</div>
<div class="col-md-6">
<label for="tbSuffix">Suffix</label>
<input type="text" class="form-control" id="tbSuffix">
</div>
</div>
</div>
<div class="col-md-4">
<label for="tbInfo">Information</label>
<textarea rows="4" cols="50" class="form-control" id="tbInfo">Test</textarea>
</div>
</div>
</div>
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>