I have a file upload that I'm trying to get in Bootstrap layout. I have the following code:
<form action="{{route('admin_auctions_images', ['id' => $auction_id])}}" method="post" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse;
<input type="file" name="filefield" single>
</span>
</span>
<input type="text" class="form-control" readonly>
</div>
<button class="btn btn-primary type="submit">Upload image</button>
</form>
I have following css file:
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
background: red;
cursor: inherit;
display: block;
}
input[readonly] {
background-color: white !important;
cursor: text !important;
}
and following JS file:
$(document).on('change', '.btn-file :file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(document).ready( function() {
$('.btn-file :file').on('fileselect', function(event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
});
The problem is that once I select the file (for upload), it does not display in the text box. I would expect it to show the selected file.
I have added the css and js file through gulpfile.js (Elixir). It compiled correctly. The JSfiddle file is here
Note: when I comment out the css and js file from the gulpfile.js and change the form to the below and run gulp again it works (although Bootstrap file is not applied). See screenshot.
<form action="{{route('admin_auctions_images', ['id' => $auction_id])}}" method="post" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
Browse
<input type="file" name="filefield" single>
<div>
<button class="btn btn-primary type="submit">Upload image</button>
</div>
</form>
See
Related
Im having issues with getting addEventListener to close a form that I opened using addEventListener.
For example, here is my HTML, CSS and JS for opening the form:
let addAlarmLink = document.getElementById('alarm-add');
let addAlarmForm = document.getElementById('adding-alarm');
addAlarmLink.addEventListener('click', () => {
if (addAlarmForm.style.display === 'none' || addFriendForm.style.display === 'none') {
addAlarmForm.style.display = 'block';
} else {
addAlarmForm.style.display = 'none';
}
});
#adding-alarm {
display: none;
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
width: 25vw;
}
<section id="adding-alarm" style="display: none;">
<form id="alarm-form">
<h5 id="close">X</h5>
<h4>Adding Alarm</h4>
<input class="add-form-info" id="n-name" placeholder="Nickname" type="text" >
<input class="add-form-info" id="f-name" placeholder="First Name" type="text" >
<input class="add-form-info" id="l-name" placeholder="Last Name" type="text" >
<h4>Login Info </h4>
<input class="add-form-info" id="add-username-email" placeholder="Username or Email of Friend" type="text" >
<input class="login-info" id="add-alarm-submit" type="submit" value="Add Alarm">
</form>
</section>
This works fine, the form opens and is editable. However, when setting up a addEventListener to close the form, its not triggering or even being recognized. Here's the code for that:
let closeForm = document.getElementById('close');
closeForm.addEventListener('click', () => {
addAlarmForm.display.style = 'none';
});
This did not work and i tried it a few other ways by using onClick and setting up a function but had the same results. I also tried setting up a console.log to just spit out a message and i get nothing in the console. One other thing i noticed is that style gets pushed out of #adding-alarm to element.style when inspecting the styles.
picture of style showing under element.style rather than updating #adding-alarm
Is there something im doing wrong or a better to make this happen?
This is all very new to me.
It is working fine taken from your code only . Here is a working example in snippet below ,the only problem was told in the other answer that is .style.display is wrongly written as .display.style .
let addAlarmLink = document.getElementById('alarm-add');
let addAlarmForm = document.getElementById('adding-alarm');
addAlarmLink.addEventListener('click', () => {
if (addAlarmForm.style.display === 'none' || addFriendForm.style.display === 'none') {
addAlarmForm.style.display = 'block';
} else {
addAlarmForm.style.display = 'none';
}
});
let closeForm = document.getElementById('close');
closeForm.addEventListener('click', () => {
addAlarmForm.style.display = 'none';
});
#adding-alarm {
display: none;
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
width: 25vw;
}
<div class="add-option"> <p>Add an alarm to be reminded to do a task.</p> <i id="alarm-add" class="fas fa-plus-circle">+</i> </div>
<section id="adding-alarm" style="display: none;">
<form id="alarm-form">
<h5 id="close">X</h5>
<h4>Adding Alarm</h4>
<input class="add-form-info" id="n-name" placeholder="Nickname" type="text" >
<input class="add-form-info" id="f-name" placeholder="First Name" type="text" >
<input class="add-form-info" id="l-name" placeholder="Last Name" type="text" >
<h4>Login Info </h4>
<input class="add-form-info" id="add-username-email" placeholder="Username or Email of Friend" type="text" >
<input class="login-info" id="add-alarm-submit" type="submit" value="Add Alarm">
</form>
</section>
Notice mixed up order of properties. In working case you have:
addAlarmForm.style.display = 'block';
And in not working case you have:
addAlarmForm.display.style = 'none';
This is likely to be your error. However, you said nothing is showing on the console, and it's suspicious because clearly there should be some error on the console (display is not defined on HTMLElement)
Your code is actually running fine. it only need some clean up and few adjustment,
here is some adjustment I made to your code and it works as expected.
let addAlarmLink = document.getElementById('showForm');
let closeForm = document.getElementById("closeForm");
let addAlarmForm = document.getElementById('adding-alarm');
let addAlarmSubmit = document.getElementById("add-alarm-submit");
addAlarmLink.addEventListener('click', () => {
if (addAlarmForm.style.display === 'none') {
addAlarmForm.style.display = 'block';
addAlarmLink.style.display = 'none';
closeForm.style.display = 'block';
} else {
addAlarmForm.style.display = 'none';
}
});
if(closeForm.addEventListener("click", () => {
addAlarmForm.style.display = 'none';
closeForm.style.display = 'none';
addAlarmLink.style.display = 'block';
}));
if(addAlarmForm.addEventListener('click', (event) => {
event.preventDefault();
alert('form submitted successfully..!')
}));
#adding-alarm {
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
width: 25vw;
}
<button id="showForm">show form</button>
<button id="closeForm" style="display: none;">Close form</button>
<section id="adding-alarm" style="display: none;">
<form id="alarm-form">
<h4>Adding Alarm</h4>
<input class="add-form-info" id="n-name" placeholder="Nickname" type="text" >
<input class="add-form-info" id="f-name" placeholder="First Name" type="text" >
<input class="add-form-info" id="l-name" placeholder="Last Name" type="text" >
<h4>Login Info </h4>
<input class="add-form-info" id="add-username-email" placeholder="Username or Email of Friend" type="text" >
<input class="login-info" id="add-alarm-submit" type="submit" value="Add Alarm">
</form>
</section>
In my .php I have session_start();, and a default avatar for specific users $_SESSION['avatar']. These avatars is displayed with background-image:. I made a JavaScript that changes the background-image to the one uploaded input, but before the user choose to Save this image as their new profile avatar, they have the option to Cancel what they are doing. If they do Cancel I want to change the background back to their avatar, and I was thinking this would work, but it doesn't:
.php
session_start();
$CurrentAvatar = $_SESSION['avatar'];
.html
<div id="avatar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="imgDivEdit"></div>
<div id="ChangeImg" class="overlay">
<div class="text">Change Image</div>
</div>
</div>
</div>
<form method="POST" enctype="multipart/form-data">
<input id="imageUpload" type="file" name="imageUpload" placeholder="Photo" accept="image/x-png,image/gif,image/jpeg" required="" capture>
<div id="Change" hidden>
<input type="submit" name="Save" id="Save" value="Save" class="btn btn-info Save"/> <input type="button" onclick="Cancel()" value="Cancel" class="btn btn-info Cancel"/> <p style="font-size:11px;">Max size: 1Mb</p>
</div>
</form>
<style>
#imgDivEdit{
width: 125px;
height: 125px;
background-image: url("data:image/jpeg;base64,'.$_SESSION['avatar'].'");
border-radius: 50%;
background-size: cover;
}
</style>
.js
$("#imageUpload").change(function() {
$("#Change").show();
});
function Cancel() {
var CurrentAvatar = "<?php echo $CurrentAvatar;?>";
$("#Change").hide();
document.getElementById("imgDivEdit").style.backgroundImage =
"url(data:image/jpeg;base64,CurrentAvatar)";
}
$("#ChangeImg").click(function(e) {
$("#imageUpload").click();
});
function fasterPreview(uploader) {
if (uploader.files && uploader.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(uploader.files[0]);
reader.onloadend = function(){
document.getElementById("imgDivEdit").style.backgroundImage = "url(" + reader.result + ")";
}
}
}
$("#imageUpload").change(function() {
fasterPreview(this);
});
You overcomplicated with too many functions. Keep it simple. Click Run code snippet bellow bellow.
I rewrote my initial answer, therefore the code bellow is using pure JS and no jQuery.
document.getElementById('imageUpload').addEventListener('change', function(e) {
let preview_div = document.getElementById("imgDivEdit"),
change_div = document.getElementById("Change");
// If there are files, preview them, else go back to initial background
// which is defined inside <style> tags
if (this.files && this.files[0]) {
change_div.style.display = 'block';
let reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onloadend = function(){
preview_div.style.backgroundImage = "url(" + reader.result + ")";
}
} else {
Cancel();
}
});
function Cancel(){
let preview_div = document.getElementById("imgDivEdit"),
change_div = document.getElementById("Change");
change_div.style.display = 'none';
preview_div.style.backgroundImage = '';
}
<div id="avatar">
<div class="container">
<div id="imgDivEdit"></div>
<div id="ChangeImg" class="overlay">
<div class="text">Change Image</div>
</div>
</div>
</div>
<form method="POST" enctype="multipart/form-data">
<input id="imageUpload" type="file" name="imageUpload" placeholder="Photo" accept="image/x-png,image/gif,image/jpeg" required="" capture>
<div id="Change" hidden>
<input type="submit" name="Save" id="Save" value="Save" class="btn btn-info Save"/> <input type="button" onclick="Cancel()" value="Cancel" class="btn btn-info Cancel"/> <p style="font-size:11px;">Max size: 1Mb</p>
</div>
</form>
<style>
#imgDivEdit{
width: 125px;
height: 125px;
background-image: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABLCAIAAABRBSb5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE8SURBVHhe7ddBEsIwDENR7n/pknF+GBjYOHEKFXq7qmBby96Ov+GqilxVkasqclVFrqrIVRW5qiJXVeSqilxVkasqctUvuQUeqhXMrbqvz+mISq0O5bRANIspgajUb91XNeejX7+v0AVOrOKqilxVkasqclVFrqrIVRVdqWr/hGp4TrpMVVoGoqT5qqw960uVZYEoqaBqQ7QTmwJRUk3Vjhd7sCMQJS3dx+aBdA92BKKk1ftYPpBuwIJAlFRwHPsH0mpMD0RJNZdxwkBaitGBKKnsLK54xbsKTAxESbuueeDdMsYFoqTKqg23vOH1LKYMpEnFVTsu+oRfZPDPgTRvS9WGuzZgQd6uqg2n1WHurI1VH7h0GeNmnVH1GVcn8ec1Z1f9IldV5KqKXFWRqypyVUWuqshVFf1N1eO4A7VmgBItY0/QAAAAAElFTkSuQmCC);
border-radius: 50%;
background-size: cover;
}
</style>
I have a form here that I'm trying to get an error message when either 3 boxes are empty when I click submit but it's not working, what am I doing wrong? I put in a onsubmit in my form but still doesnt work
HTML:
var message = document.getElementById("ErrorMessage");
function clearMyField(el) {
if(el.placeholder !='') {
el.placeholder = '';
}
}
function checkforblank() {
var allInputs = document.querySelectorAll('input[type=text]');
for(let i = 0; i<allInputs.length; i++){
let v = allInputs[i].value.trim();
let n = allInputs[i].name;
if(v == ""){
message.textContent = n + " is empty";
return false;
}
}
}
<!doctype html>
<html lang="en">
<head>
<title> Lab 6 - Task 2 </title>
<style>
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
</style>
<meta charset="utf-8">
<script src="prototype.js"></script>
<script src="task2.js"></script>
</head>
<body>
<form id="myForm" method="get" onsubmit="return checkforblank()">
<h1> Form Submit </h1>
<p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);"></p>
<p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);"></p>
<p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);"></p>
<p>
<button id="submitButton" type="submit"> Submit </button>
<input type="reset" value="Reset">
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
</body>
</html>
Fix this:
<form id="myForm" method="get" onsubmit="checkforblank()">
</form>
See here
There is no need for return statement
The type of the button should be submit instead of button. Since you are comparing the value inside the function, you have to set the input's placeholder property instead of value
<button id="submitButton" type="submit"> Submit </button>
var message = document.getElementById("ErrorMessage");
function clearMyField(el) {
if(el.placeholder !='') {
el.placeholder = '';
}
}
function checkforblank() {
var allInputs = document.querySelectorAll('input[type=text]');
for(let i = 0; i<allInputs.length; i++){
let v = allInputs[i].value.trim();
let n = allInputs[i].name;
if(v == ""){
message.textContent = n + " is empty";
return false;
}
}
}
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
<form id="myForm" method="get" onsubmit="return checkforblank()">
<h1> Form Submit </h1>
<p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);"></p>
<p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);"></p>
<p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);"></p>
<p>
<button id="submitButton" type="submit"> Submit </button>
<input type="reset" value="Reset">
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
Though I will prefer the following:
var message = document.getElementById("ErrorMessage");
function clearMyField(el) {
if(el.placeholder !='') {
el.placeholder = '';
}
}
function checkforblank() {
var allInputs = document.querySelectorAll('input[type=text]');
for(let i = 0; i<allInputs.length; i++){
let v = allInputs[i].value.trim();
let n = allInputs[i].name;
if(v == ""){
return false;
}
}
}
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
<form id="myForm" method="get" onsubmit="return checkforblank()">
<h1> Form Submit </h1>
<p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);" required></p>
<p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);" required></p>
<p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);" required></p>
<p>
<button id="submitButton" type="submit"> Submit </button>
<input type="reset" value="Reset">
</p>
</form>
You can use html5 attributes to do this easily. (required, placeholder attributes)
Try below code.
<!doctype html>
<html lang="en">
<head>
<title> Lab 6 - Task 2 </title>
<style>
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
</style>
<meta charset="utf-8">
</head>
<body>
<form id="myForm" method="get">
<h1> Form Submit </h1>
<p><span>Name:</span> <input id="input1" placeholder="Enter Name" name="Name" required></p>
<p><span>Student Id:</span> <input id="input2" placeholder="Enter Student ID" name="StudentID" required></p>
<p><span>Email:</span> <input id="input3" placeholder="Enter Email" name="Email" required></p>
<p>
<button id="submitButton" type="submit">Submit </button>
<input type="reset" value="Reset"/>
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
</body>
</html>
You cannot see the error messages because the form submission refreshes the page. To see the errors, use event.preventDefault to get the errors.
Try the below code.
<html lang="en">
<head>
<title> Lab 6 - Task 2 </title>
<style>
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
</style>
<meta charset="utf-8">
</head>
<body>
<form id="myForm" method="get">
<h1> Form Submit </h1>
<p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);"></p>
<p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);"></p>
<p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);"></p>
<p>
<button id="submitButton" type="submit"> Submit </button>
<input type="reset" value="Reset">
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
<script>
var message = document.getElementById("ErrorMessage");
//document.getElementById('myForm')
function clearMyField(el) {
if (el.placeholder != '') {
el.placeholder = '';
}
}
//Add event listener
document.getElementById('myForm')
.addEventListener('submit', function (e) {
console.log('submit')
//prevent the default submission to see the errors.
e.preventDefault()
var allInputs = document.querySelectorAll('input[type=text]');
for (let i = 0; i < allInputs.length; i++) {
let v = allInputs[i].value.trim();
let n = allInputs[i].name;
if (v == "") {
message.textContent = n + " is empty";
return false;
}
}
})
</script>
</body>
</html>
I'm making text editor for my project , i need to use this editor for forum , i'm making simple texteditor using javascript everything working fine . Problem is that i can't use <b></b> or <i></i> <u></u> because of htmlentities. My question is that how to bold text using [b][/b] instead of <b></b> or [i][/i] instead of <i></i> , i needed this very much. I need your help guys , Thanks.
Below Is My Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#my_textarea{
width: 320px;
height: 150px;
border: thin solid #000;
color: #000;
padding: 10px;
min-height: 150px;
min-width: 320px;
max-height: 150px;
max-width: 320px;
}
#preview{
width: 320px;
height: 150px;
border: thin solid #000;
color: #000;
padding: 10px;
}
</style>
<script type="text/javascript">
function formatText(tag) {
var myTextArea = document.getElementById('my_textarea');
var myTextAreaValue = myTextArea.value;
var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
myTextArea.value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt;
}
function preview() {
var textbox , view ;
textbox = document.getElementById('my_textarea');
view = document.getElementById("preview");
view.innerHTML = textbox.value
}
</script>
</head>
<body><br>
<form>
<input name="title" id="title" type="text" size="80" maxlength="80" /><br><br>
<input type="button" value="Bold" onClick="formatText ('b');" />
<input type="button" value="Italic" onClick="formatText ('i');" />
<input type="button" value="Underline" onClick="formatText ('u');" />
<input type="button" value="Unordered List" onClick="olist ('ul');" /><br><br>
<textarea name="my_textarea" id="my_textarea" style="width:300px;"></textarea><br>
<input type="submit" value="Submit" name="submit" id="submit" /><br><br>
</form>
<div id="preview"></div><br>
<button id="btn" onClick="preview();">Preview</button>
</body>
Demo : http://jsfiddle.net/aMR4M/
I'm not sure if this is what you want, but you can use [ and ] and replace them with < and > when setting the innerHtml of your preview area.
view.innerHTML = textbox.value.replace(/\[/g, '<').replace(/\]/g, '>');
See http://jsfiddle.net/aMR4M/1/
I am trying to auto update the image to the text of the input box.
Here is the index code:
<body>
<div id="registeer">
<form method="post" action="javascript:login()">
<input type="text" name="gebruikersnaam" placeholder="Gebruikersnaam" /><br><br>
<input type="password" name="wachtwoord" placeholder="Wachtwoord" /><br><br>
<input type="submit" value="Registeer">
<form>
<br>
</div>
<div id="registeer-avatar"></div>
<script src="registeer.js"></script>
And here is the registeer.js:
$("#registeer input[type=text]").keyup(function(){
var value = $(this).val();
var background = "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=" + value + "&action=std&direction=3&head_direction=3&gesture=sml&size=b)";
$("#registeer-avatar").css("background", background);
});
$("#registeer input[type=text]").blur(function() {
if(!this.value) {
$("#registeer-avatar").css("background", "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=ulk&action=std&direction=3&head_direction=3&gesture=sml&size=b)");
}
});
So if you type in the first input for example 'hi', the image in registeer-avatar will be habbo....&user=hi, but it is not working.
Thanks for the help.
It works, but you need to size the container:
<div id="registeer-avatar"></div>
as it is now it has no "space" and when background is set, it does not show.
Try, for example, CSS:
#registeer-avatar {
border: 1px solid #eee;
min-height: 100px;
}
$("#registeer input[type=text]").keyup(function(){
var value = $(this).val();
var background = "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=" + value + "&action=std&direction=3&head_direction=3&gesture=sml&size=b)";
$("#registeer-avatar").css("background-image", background);
console.log(background);
});
$("#registeer input[type=text]").blur(function() {
if(!this.value) {
$("#registeer-avatar").css("background", "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=ulk&action=std&direction=3&head_direction=3&gesture=sml&size=b)");
}
});
#registeer-avatar {
border: 1px solid #eee;
min-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="registeer">
<form method="post" action="javascript:login()">
<input type="text" name="gebruikersnaam" placeholder="Gebruikersnaam" /><br><br>
<input type="password" name="wachtwoord" placeholder="Wachtwoord" /><br><br>
<input type="submit" value="Registeer">
<form>
<br>
<div id="registeer-avatar"></div>