I have a simple HTML form and am using JavaScript to display the entered value to the webpage, but everytime I hit submit the webpage reloads.
I have read the question at Webpage reloading on submitting form but that is jQuery and e.preventDefault(); isn't working in my case.
How to stop the page from reloading?
I have the following code:
function myFunction() {
var pm1, sqrtInt, pm2, constInt;
pm1 = document.getElementById("pm1").value;
pm1 = document.getElementById("sqrtInt").value;
pm1 = document.getElementById("pm2").value;
pm1 = document.getElementById("constInt").value;
document.getElementById("proof").innerHTML =
'<br>pm1 = ' + pm1 +
'<br>sqrtInt = ' + sqrtInt +
'<br>pm2 = ' + pm2 +
'<br>constInt = ' + constInt;
}
#proof {
background: black;
color: yellow;
width: 100%;
height: 20%;
}
<div>Form Trial</div>
<div>
<form onsubmit="myFunction()">
<div>
<select class="uk-select" id="pm1">
<option>Minus (-)</option>
<option>Plus (+)</option>
</select>
</div>
<div>
<input class="uk-input" type="text" placeholder="Square Root" id='sqrtInt'>
</div>
<div>
<select id="pm2">
<option>Minus (-)</option>
<option>Plus (+)</option>
</select>
</div>
<div>
<input type="text" placeholder="Constant" id='constInt'>
</div>
<div>
<input type="submit" value='submit'>
</div>
</form>
</div><br><br>
<div id="proof"></div>
Two things to do:
Add return to the onsubmit code:
<form onsubmit="return myFunction()">
Add at the end of your myFunction function:
return false;
function myFunction() {
var pm1, sqrtInt, pm2, constInt;
pm1 = document.getElementById("pm1").value;
pm1 = document.getElementById("sqrtInt").value;
pm1 = document.getElementById("pm2").value;
pm1 = document.getElementById("constInt").value;
document.getElementById("proof").innerHTML =
'<br>pm1 = ' + pm1 +
'<br>sqrtInt = ' + sqrtInt +
'<br>pm2 = ' + pm2 +
'<br>constInt = ' + constInt;
return false; // <---------
}
#proof {
background: black;
color: yellow;
width: 100%;
height: 20%;
}
<div>Form Trial</div>
<div>
<form onsubmit="return myFunction()">
<div>
<select class="uk-select" id="pm1">
<option>Minus (-)</option>
<option>Plus (+)</option>
</select>
</div>
<div>
<input class="uk-input" type="text" placeholder="Square Root" id='sqrtInt'>
</div>
<div>
<select id="pm2">
<option>Minus (-)</option>
<option>Plus (+)</option>
</select>
</div>
<div>
<input type="text" placeholder="Constant" id='constInt'>
</div>
<div>
<input type="submit" value='submit'>
</div>
</form>
</div><br><br>
<div id="proof"></div>
Related
I have this code where I take the submissions from a form and append it to a HTML.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>
<p>Submission Number: <a id="clicks">1</a>
<div class="output-area">
<h4>Output</h4>
<div id="output" class="inner">
</div>
</div>
<span></span>
</body>
<script>
var clicks = 1;
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`,
`<p>Submission No: ${submissions.value}</p>`];
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
</html>
In this code, I wanted to print the users' current submission number. So I made a click counter.
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
And then I tried to put it into a constant and append it.
const submissions = document.getElementById('clicks');
But issue I'm facing here is, when appended my submission field comes out as Submission No: undefined. Any help would be much appreciated.
Your submissions element is an anchor (<a>) element. These HTML elements do not have a value field.
You can read the value the same way you are writing it, via innerHTML.
E.g.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>
<p>Submission Number: <a id="clicks">1</a>
<div class="output-area">
<h4>Output</h4>
<div id="output" class="inner">
</div>
</div>
<span></span>
</body>
<script>
var clicks = 1;
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`,
`<p>Submission No: ${submissions.innerHTML}</p>`]; // Use innerHTML here
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
</html>
Generally you could of course also insert the clicks variable directly (instead of the contents of the a element).
Note
It is highly insecure to render user-input into your HTML. It creates all sorts of vulnerabilities for malicious users so DON'T do this in production.
<a> tags don't have a value attribute. You'll have to use textContent or innerText to get the count.
console.log(document.getElementById('clicks').textContent);
<a id="clicks">2</a>
Ok, so submissions is not a input element and so it does not have the value method.
Instead of using submissions.value use submissions.innerHTML.
Also, rearrange the last few lines to make sure the clicks counter is updated before outputting all the data.
Edit: I did not realize your clicks counter was initially let clicks = 1; and not let clicks = 0;. The rearranging in the below JS will only work if clicks is initially set to 0.
I would generally advise to use let clicks = 0; because it makes more sense to potentially yourself and another person reading your code. If you think about it - when you make your counter (clicks), there have not been any clicks yet and so it would make more sense to have it initially set to 0.
let clicks = 0;
const writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
// ++ is same thing as += 1
clicks++;
submissions.innerHTML = clicks;
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`,
`<p>Submission No: ${submissions.innerHTML}</p>`
];
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
}
I have a form in visual studio that asks for feedback, name and their order number.
I'd like to save all this information into a txt file when they click Submit so that I can review it later on.
return (
<>
<Typography variant="h6" gutterBottom>Feedback</Typography>
<FormProvider {...methods}>
<form onSubmit=''>
<Grid container spacing={3}>
<FormInput required name='fullName' label='Full Name' />
<FormInput required name='orderNumber' label='Order Number' />
<FormInput required name='message' label='Message' />
</Grid>
</form>
</FormProvider>
<div>
<Button component= className={classes.checkoutButton} size="large" type="button" variant="contained" color="primary">Submit</Button>
</div>
</>
Try this code:
<!DOCTYPE html>
<html>
<head>
<title>Save form Data in a Text File using JavaScript</title>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text], textarea, select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button]{
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<!--Add few elements to the form-->
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<!--Add to button to save the data.-->
<div>
<input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
</div>
</div>
</body>
<script>
let saveFile = () => {
// Get the data from each element on the form.
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
// This variable stores all the data.
let data =
'\r Name: ' + name.value + ' \r\n ' +
'Age: ' +age.value + ' \r\n ' +
'Email: ' + email.value + ' \r\n ' +
'Country: ' + country.value + ' \r\n ' +
'Message: ' + msg.value;
// Convert the text to BLOB.
const textToBLOB = new Blob([data], { type: 'text/plain' });
const sFileName = 'formData.txt'; // The file to save the data.
let newLink = document.createElement("a");
newLink.download = sFileName;
if (window.webkitURL != null) {
newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
newLink.href = window.URL.createObjectURL(textToBLOB);
newLink.style.display = "none";
document.body.appendChild(newLink);
}
newLink.click();
}
</script>
</html>
I need to trigger the class "alert success" when the button is clicked in HTML,
The code is:
function appendText() {
var title = $("#title").val();
var content = $("#content").val();
var type = $("#type").val();
var markup = "<div>" + title + content + "</div>";
$(".alert success").append(markup);
$(".closebtn").append()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="margin-top: 2%">
<select id="type">
<option value="success">success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
<label for="title">title:</label>
<input type="text" value="title" id="title">
<label for="content">content:</label>
<input type="text" id="content" value="content" style="width: 50%">
<button onclick="appendText()">Add Notification</button>
</p>
I need to create dynamically the following HTML code when the button is clicked.
<div class="alert success">
<span class="closebtn">×</span>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Can you suggest the correct Jquery code for my need?
Here is working and simplified snippet.
Its appending the notification data and also the closebtn close button is working as well and deleting the clicked notification.
Just run snippet to see in action.
function appendText() {
var title = $("#title").val();
var content = $("#content").val();
var type = $("#type").val();
var markup = "<div class='results'><button class='closebtn' onclick='closeAlert(this)'>X</button> " + type + ' ' + title + ' ' + content + "</div>";
if (type === 'success') {
$('.messages').css({
"background-color": "green"
});
} else if (type === 'warning') {
$('.messages').css({
"background-color": "yellow"
});
} else if (type === 'error') {
$('.messages').css({
"background-color": "red"
});
} else if (type === 'info') {
$('.messages').css({
"background-color": "blue"
});
}
$(".messages").html(markup);
}
function closeAlert(_this) {
$(_this).parent().remove()
}
label,
button {
display: block;
}
.results {
display: flex;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="margin-top: 2%">
<select id="type">
<option value="success">success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
<label for="title">title:</label>
<input type="text" value="title" id="title">
<label for="content">content:</label>
<input type="text" id="content" value="content" style="width: 50%">
<button onclick="appendText()">Add Notification</button>
</p>
<div class="messages"></div>
function appendText() {
var title = $("#title").val();
var content = $("#content").val();
var type = $("#type").val();
var result = '<div>'
+ title + ' ' + content
+ '<div class="alert success">'
+ '<span class="closebtn">×</span>'
+ '<strong>Success!</strong> Indicates a successful or positive action.'
+ '</div>'
+ '</div>';
$('#result').append(result);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="margin-top: 2%">
<select id="type">
<option value="success">success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
<label for="title">title:</label>
<input type="text" value="title" id="title">
<label for="content">content:</label>
<input type="text" id="content" value="content" style="width: 50%">
<button onclick="appendText()">Add Notification</button>
</p>
<div id="result"></div>
For HTML Tags or Content
var content = "Hello World";
$(".className").html(content);
Or
var content = "<b>Hello World</b>";
$(".className").html(content);
I need a javascript function that can be used to get the value of an HTML form, create a paragraph inside a div container and input the form value into the created paragraph whenever the submit button is clicked. The javascript code i tried seems not to be responding well.
Note: I don''t want the form to return any value.
Here's the whole HTML and javascript code, the button kept on submitting the form value to the page and not updating the commentBox container.
<div class="chat-popup" id="myForm">
<form name="commentForm" class="form-container">
<label for="msg"><b>Comment</b></label>
<textarea id="myComment" placeholder="Type comment.." name="msg" required></textarea>
<button type="submit" class="lk-btn" onclick="postComment(); return false">Send</button>
<button class="lk-btn" onclick="closeForm()">Close</button>
</form>
</div>
</div>
<div id="commentBox" style="width: 400px; height: 400px; background-color: white; color: green;"></div>
function postComment() {
var paragraph = document.createElement("p");
p.id = 'com';
document.getElementById('com').innerHTML = document.getElementById('myComment').value;
var commentContainer = document.getElementById('commentBox');
commentContainer.appendChild(paragraph);
return false;
}
Just ommit the whole "id" thing and it's done:
function postComment() {
var paragraph = document.createElement("p");
paragraph.innerHTML = document.getElementById('myComment').value;
var commentContainer = document.getElementById('commentBox');
commentContainer.appendChild(paragraph);
return false;
}
<div class="chat-popup" id="myForm">
<form name="commentForm" class="form-container">
<label for="msg"><b>Comment</b></label>
<textarea id="myComment" placeholder="Type comment.." name="msg" required></textarea>
<button type="submit" class="lk-btn" onclick="postComment(); return false">Send</button>
<button class="lk-btn" onclick="closeForm()">Close</button>
</form>
</div>
</div>
<div id="commentBox" style="width: 400px; height: 400px; background-color: white; color: green;"></div>
The created p element reference is stored in variable paragraph. In order to assign id attribute use paragraph.id instead of p.id.
Since the newly created p is not yet appended to the document. So, the statement document.getElementById('com') will return null.
document.querySelector('button')
.addEventListener('click', function() {
const p = document.createElement('p');
p.id = "com";
const val = document.getElementById('myComment').value;
if (val.length) {
p.innerHTML = val;
document.querySelector('div').appendChild(p);
}
});
<input type="text" id="myComment">
<div></div>
<button>Click Me</button>
--Edit--
function postComment(e) {
e.preventDefault();
const p = document.createElement('p');
p.id = "com";
const val = document.getElementById('myComment').value;
if (val) {
p.innerHTML = val;
document.getElementById('commentBox').appendChild(p);
}
}
<div class="chat-popup" id="myForm">
<form name="commentForm" class="form-container">
<label for="msg"><b>Comment</b></label>
<textarea id="myComment" placeholder="Type comment.." name="msg" required></textarea>
<button type="submit" class="lk-btn" onclick="postComment(event); return false">Send</button>
<button class="lk-btn" onclick="closeForm()">Close</button>
</form>
</div>
<div id="commentBox" style="width: 400px; height: 400px; background-color: white; color: green;"></div>
I finally did this more easily using p5.js library.
Simply Calling function CreateP() did the trick.
This click function was previously working, until i added another button and some php...curious what's preventing it from executing as before, i've checked issues from other questions:
-jquery is properly loaded before the local script
-all functions are wrapped in .ready() [Why is this jQuery click function not working?
I found an interesting post about delegated event handling here: Jquery button click() function is not working
But i don't understand if or why this would apply to my situation...and if it does can someone explain to me its significance?
Javascript:
jQuery ( document ).ready( function ( $ ) {
function initColorPicker0 () {
for ( x=0; x < 4; x++ ) {
var canvasEl0 = document.getElementById('colorCanvas0');
var canvasContext0 = canvasEl0.getContext('2d');
var image0 = new Image(150, 150);
image0.onload = () => canvasContext0.drawImage(image0, 0, 0, image0.width, image0.height);
image0.src = "../img/color-wheel-opt.jpg";
}
canvasEl0.onclick = function ( mouseEvent0 ) {
var imgData0 = canvasContext0.getImageData(mouseEvent0.offsetX, mouseEvent0.offsetY, 1, 1);
var rgba0 = imgData0.data;
var bannerInput = $ ( '#bannerColor' );
bannerInput.val("rgba(" + rgba0[0] + ", " + rgba0[1] + ", " + rgba0[2] + ", " + rgba0[3] + ")" );
}
}
function demoBanner () {
// set click handler
$( '#demo' ).click( function () {
// store input values
var formObject = {
"prompt": document.getElementById('prompt').value,
"c2a" : document.getElementById('c2a').value,
"bannerColor" : document.getElementById('bannerColor').value,
}
//apply input values to style of new content
var newContent = " <div style='height: auto; padding: 15px 0px; margin: 0px -15px; background-color:" + formObject.bannerColor + ";'> <a href='#'> <p style=' margin-top: 0px; margin-bottom: 0px; text-align: center; color:" + formObject.promptTextColor + ";'>"+ formObject.prompt + " <a style='padding: 5px 12px; border-radius: 7px; background-color:" + formObject.c2aBG + "; color:" + formObject.c2aTextColor + " ' href='#'> <em> " + formObject.c2a + " </em> </a> </p> </a> </div>";
//set input as html content of demo
$( 'div.demo' ).html( newContent );
})
}
// called functions
$ ( function () {
initColorPicker0();
demoBanner();
});
});
HTML:
<div id="demo" class="demo"></div>
<div class="container">
<div class="row">
<div class="col-sm-3 text-center">
<div class="form-group">
<br>
<form action="test.php" method="post" name="form">
<label for="prompt">Prompt:
<input class="form-control" name="prompt" id="prompt" type="text">
</label>
<label for="c2a">Call-to-Action:
<input class="form-control" name="c2a" id="c2a" type="text">
</label>
<label for="bannerColor">Banner Background Color:
<input class="form-control" name="bannerColor" id="bannerColor" type="text">
<canvas style="border-radius:50%;" id="colorCanvas0" class="color-canvas" width="150" height="150"></canvas>
</label>
<input id="demo" type="button" class="btn btn-warning" value="Demo Banner">
<br>
<br>
<input id="submit" type="submit" class="btn btn-success" name="submit" value="Submit Form">
</form>
</div>
</div>
</div>
</div>
<!--jquery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- local JS -->
<script src="http://localhost:8888/vorotech_site/js/banner-tool.js"> </script>
EDIT: $( '#demo' )
First of all, for .click(), it passes an event to the callback. For type="submit", this includes submitting the form. Would advise using .preventDefault().
Here is an example including some jQuery cleanup. Also tried to retain proper object indexes.
$(function() {
function initColorPicker0() {
var canvasEl0, canvasContext0;
for (x = 0; x < 4; x++) {
canvasEl0 = $('#colorCanvas0')[0];
canvasContext0 = canvasEl0.getContext('2d');
var image0 = new Image(150, 150);
image0.onload = () => canvasContext0.drawImage(image0, 0, 0, image0.width, image0.height);
image0.src = "../img/color-wheel-opt.jpg";
}
canvasEl0.onclick = function(mouseEvent0) {
var imgData0 = canvasContext0.getImageData(mouseEvent0.offsetX, mouseEvent0.offsetY, 1, 1);
var rgba0 = imgData0.data;
var bannerInput = $('#bannerColor');
bannerInput.val("rgba(" + rgba0[0] + ", " + rgba0[1] + ", " + rgba0[2] + ", " + rgba0[3] + ")");
};
}
function demoBanner() {
// set click handler
$('#demo').click(function(e) {
e.preventDefault();
// store input values
var formObject = {
prompt: $('#prompt').val(),
c2a: $('#c2a').val(),
bannerColor: $('#bannerColor').val(),
};
//apply input values to style of new content
var newContent = $("<div>").css({
height: "auto",
padding: "15px 0px",
margin: "0px -15px",
"background-color": formObject.bannerColor,
});
$("<a>", {
href: "#"
}).appendTo(newContent);
$("<p>")
.css({
"margin": "0",
"text-align": "center ",
color: formObject.prompt
})
.html(formObject.prompt)
.appendTo($("a", newContent));
$("<a>", {
href: "#"
}).css({
padding: "5px 12px",
"border-radius": "7px",
"background-color": formObject.c2a,
color: formObject.c2a
}).html("<em>" + formObject.c2a + "</em>").appendTo("p", newContent);
//set input as html content of demo
$('div.demo').html(newContent);
});
}
// called functions
initColorPicker0();
demoBanner();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo" class="demo">DEMO</div>
<div class="container">
<div class="row">
<div class="col-sm-3 text-center">
<div class="form-group">
<br>
<form action="test.php" method="post" name="form">
<label for="prompt">Prompt:
<input class="form-control" name="prompt" id="prompt" type="text">
</label>
<label for="c2a">Call-to-Action:
<input class="form-control" name="c2a" id="c2a" type="text">
</label>
<label for="bannerColor">Banner Background Color:
<input class="form-control" name="bannerColor" id="bannerColor" type="text">
<canvas style="border-radius:50%;" id="colorCanvas0" class="color-canvas" width="150" height="150"></canvas>
</label>
<input id="demo" type="button" class="btn btn-warning" value="Demo Banner">
<br>
<br>
<input id="submit" type="submit" class="btn btn-success" name="submit" value="Submit Form">
</form>
</div>
</div>
</div>
</div>