I am working through http://twitterbootstrap.org/bootstrap-form-validation/. I have got the project working except for adding an image at the end of the individual fields in my form.
my form looks like:
form id="registration-form" class="form-horizontal">
<h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2>
<!-- Text input-->
<div class="form-control-group">
<label class="control-label" for="FirstName">First Name</label>
<div class="controls">
<input id="FirstName" name="FirstName" type="text" placeholder="Bob" class="input-xlarge" required="">
</div>
</div>
<!-- <div class="form-form-control-group">
<label class="control-label" for="name">Your Name</label>
<div class="controls"><input class="input-xlarge" id="name" type="text" name="name" /></div>
</div>
<pre>-->
<!-- Text input-->
<div class="form-control-group">
<label class="control-label" for="LastName">Last Name</label>
<div class="controls">
<input id="LastName" name="LastName" type="text" placeholder="Smith" class="input-xlarge" required="">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success btn-large">Register</button>
<button type="reset" class="btn">Cancel</button></div>
</form>
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<script src="assets/js/script.js"></script>
<script>
addEventListener('load', function (event) { prettyPrint() }, false); $(document).ready(function(){
$('pre').addClass('prettyprint linenums');
});
</script>
when the page loads in firebug I see:
ReferenceError: prettyPrint is not defined
referring to :
addEventListener('load', prettyPrint, false);
There are no other js errors.
PS I've added:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
as above but am still getting the error. what am I doing wrong.
From: http://google-code-prettify.googlecode.com/svn/trunk/README.html
If you are calling prettyPrint via an event handler, wrap it in a function. Instead of doing
addEventListener('load', prettyPrint, false);
wrap it in a closure like
addEventListener('load', function (event) { prettyPrint() }, false);
so that the browser does not pass an event object to prettyPrint which will confuse it.
That being said, make sure
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
is loaded before your script is, even though it shouldn't matter.
Related
I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
Im using meteor JS and try to implement a summernote.
The problem is, when i try to open a summernote with my data, it work just sometimes.
when i charge the page for the first time, nothing appears in the summernote, but if i change something in my code and save it, the content will appear in the summernote.
please, help me :'(
<template name="consigneModif">
<div class="container">
<div class = "col text-center">
<h1>Modification de {{{this.Name}}}</h1>
</div>
<form class="formConsigne">
<div class="form-group">
<label for="Description"><h4>Nom :</h4></label>
<textarea class="summernote" id="Name" name="Name">{{{this.Name}}}</textarea>
</div>
<div class="form-group">
<label for="Description"><h4>Description :</h4></label>
<textarea class="summernote" id="Description" name="Description" rows="3">{{{this.Description}}}</textarea>
</div>
<div class="form-group">
<label for="Condition"><h4>Condition d'application de la consigne : </h4></label>
<textarea class="summernote" id="Condition" name = "Condition" rows="3">{{{this.Condition}}}</textarea>
</div>
<div class="form-group">
<label for="Mode"><h4>Mode opératoire :</h4></label>
<textarea class="summernote" id="Mode" name ="Mode" rows="3">{{{this.Mode}}}</textarea>
</div>
<div class="form-group">
<label for="Date"><p>Date effective :</p></label>
<input type="Date" id="Date" name = Date>
</div>
<div class="form-group">
<label for="DateFin"><p>Date de fin :</p></label>
<input type="Date" id="DateFin" name = DateFin>
</div>
<div>
<button type="submit" class ="btn btn-success" id="AddConsignButton">Modifier</button>
</div>
</form>
</div>
{{>footerNavbar}}
<script>
$('.summernote').summernote('code');
</script>
</template>
I think the issue is with the script tag you are using to activate the summernote. It should work if you use the onRender method of the template instead.
This may work:
Template.consigneModif.onRendered(function () {
this.$('.summernote').summernote('code');
});
I am trying to find a way to change the color of text in a form as a result of passing a validation by another JavaScript function. Is there an easy way to do this?
Example of the element I want to update the color for:
<form name="contact" method="post" action="send_form_email.php" novalidate>
<div class="row">
<div class="col">
<label for="nameInput">Name:*</label>
<input name="name" type="text" class="form-control" id="nameInput" placeholder="E.g. Alan Turing" oninput="bootstrapValidate('#nameInput', 'required:Please fill out this field')">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="emailInput">Email:*</label>
<input name="email" type="email" class="form-control" id="emailInput" placeholder="E.g. name#domain.com" oninput="bootstrapValidate('#emailInput', 'email:Enter a valid E-Mail!|required:Please fill out this field')">
</div>
<div class="col-sm-12 col-md-6">
<label for="telInput">Telephone:</label>
<input name="tel" type="tel" class="form-control" id="telInput" placeholder="E.g. (01452) 714 xxx">
</div>
</div>
<div class="form-group">
<label for="msgInput">Message:*</label>
<textarea name="msg" class="form-control" id="msgInput" placeholder="E.g. Hello world!" oninput="bootstrapValidate('#msgInput', 'required:Please fill out this field')"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
For example document. GetElementById('msgInput').style.color='#ABC666';
Another way is to toglle a class containing a rule like so:
JS: document. GetElementById('msgInput').classList.add('valid');
CSS: .valid { color: #ABC666; }
Aforementioned JS code has to be placed in the event listener.
You can add CSS class to your element:
// styles.css
.warning {
color: red;
}
// scripts.js
document.getElementById('msgInput').classList.add('warning');
so I'm having a weird problem that I haven't encountered before. My code is the following:
<div class="row">
<div class="col-md-12">
<h4>Send message to seller</h4>
<div class="panel panel-default">
<div class="panel-body">
<form action="#" method="POST">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" id="InputEmail" placeholder="Enter your email" >
</div>
<div class="form-group">
<label for="InputText">Your text</label>
<textarea class="form-control" id="InputText" name="message" placeholder="Type in your message" rows="5" style="margin-bottom:10px;"></textarea>
</div>
<button class="btn btn-info" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
When I run it on the server, this is the result, and it is really annoying:
<div class="form-group">
<label for="InputEmail">Email address</label>
<div class="has-placeholder form-control"><label>Enter your email</label><input type="email" class="form-control" id="InputEmail"></div>
For the second code, I omitted the rest of the code. As you can see, it adds a new and a new with a class of place-holer.
I have 2 versions of this file. Full HTML, and one with PHP etc.. The HTML version is just fine, but this one, for some reason, has this result. Can anyone explain to my why this is happening.
I have looked in the js files that are being included and cannot find anything regarding that added class and what not.
Thanks.
Your this html code is just perfect. Probably you missed some tag in php file. Can you please post your php code so that we can sorted it out.
Thanks
I am working on a webpage and I have this form that will execute a script once the submit button is pressed. I plan to add AJAX in to push data to a PHP script, but for now I can't even get the javascript code block to run. Am i doing something wrong? In addition, I do have the includes for jQuery.
Below are snippets of my code.
<!--Scripts -->
<script src="js/jquery.min.js"></script>
<!--Legacy jQuery support for quicksand plugin-->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<div class="col-md-6">
<form id="contact-form" role="form">
<div class="form-group">
<label class="sr-only" for="contact-name">Name</label>
<input type="text" name="name" class="form-control" id="contact-name" placeholder="Name">
</div>
<div class="form-group">
<label class="sr-only" for="contact-email">Email</label>
<input type="email" name="email" class="form-control" id="contact-email" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="contact-message">Message</label>
<textarea rows="12" name="message" class="form-control" id="contact-message" placeholder="Message"></textarea>
</div>
<input type="submit" class="btn btn-primary" value="Send Message">
</form>
<!-- Function To Submit Contact Us Form-->
<script type="text/javascript">
$("#contact-form").submit(function(event) {
alert("Dammit");
});
</script>
</div>
When clicking submit the Web Browser URL shows the fields and content from the form, however the alert is not being executed. I appreciate any assistance in advanced.
$("#contact-form").submit(function(event) {
alert("Dammit");
});
You need the # character when querying for an element by ID. Your code is currently looking for a tag named contact-form