I am working through "Google Apps Script" by James Ferreira.
I have found several issues with code examples given so far and have been able to stumble my way through them.
I'm not great with HTML and this one has me stumped.
.gs
function startWorkflow() {
var html = HtmlService.createTemplateFromFile('startWorkflow').evaluate()
.setTitle('Start Workflow').setWidth(300)
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
ui.showSidebar(html);
}
.html
<div id="wrapper">
<div>
<span>Let's get started with your workflow.
First;
Add an approver by entering their email address
in the Approvers box and clicking the add button.
When you are done adding appovers, click the Start Workflow button.</span>
</div>
<br>
<div>
<span class="sectionHeader">Approvers</span><br>
<div id="approvers"></div>
<div>
<form id="addApprover">
<input type="email" id="approver" placeholder="Email Address">
<input type="submit" class="button blueButton" value="Add">
</form>
</div>
<br>
<div class="center">
<span id="startButton" class="button redButton">Start Workflow</span>
</div>
</div>
<?!= HtmlService.createHtmlOutputFromFile('styles').getContent(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
styles.html
<style type="text/css">
.sectionHeader {
color: #202020 ;
font-size: 18px;
text-decoration:underline;
margin-bottom: 20px;
}
.button {
color: #FFFFFF;
font-size: 12px;
moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 3px;
border:0;
}
.blueButton {
background-color: #3366FF;
}
.redButton {
background-color: #C80000;
}
.button:hover {
opacity:0.7;
}
.center {
text-align: center:
}
#wrapper {
margin:2px 4px 3px 4px;
font-family: Verdana, Generva, sans-serif;
}
.reminder {
color: #FFFFFF;
background-color: #3366FF;
font-size: 10px;
moz-border-radius: 3x;
-webkit-border-radius: 3px;
padding: 3px;
}
The issue is with the "start workflow" button as I only have text.
This is the the HTML you are referencing:
<span id="startButton" class="button redButton">Start Workflow</span>
The span tag does support events like onclick and onmouseup. It would look like this:
<span id="startButton" class="button redButton" onmouseup="fncStartWorkFlow()">Start Workflow</span>
There needs to be a corresponding function in a <script> tag:
<script>
function fncStartWorkFlow() {
console.log('fncStartWorkFlow() ran!');
//more code here
};
</script>
Make those changes, then view the browser console to see if a message printed to the console.
Related
I'm trying to make a Chrome extension, but click listeners aren't working. Yes it's being injected, but it's still not working.
// define all other functions...
var start = document.getElementById("startTask")
start.addEventListener("click", function() {
addTask()
console.log("add")
})
var cancel = document.getElementById("deleteTask")
cancel.addEventListener("click", function() {
hideAddTaskForm()
})
var showForm = document.getElementById("showForm");
showForm.addEventListener("click", function() {
showAddTaskForm()
console.log("add progrees")
})
HTML for refrence:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<style>
/* Add some styling for the task cards and the "add task" button */
.task-card {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
background-color: #f1f1f1;
box-shadow: 2px 2px 5px #ccc;
}
.task-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.task-time {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.task-url {
font-size: 14px;
color: #666;
text-decoration: underline;
cursor: pointer;
}
.task-buttons {
float: right;
}
.add-task-button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin-top: 10px;
}
/* Hide the "add task" form by default */
#add-task-form {
display: none;
}
</style>
</head>
<body>
<h2>Task List</h2>
<div id="task-list">
<!-- Task cards will be added here dynamically -->
</div>
<button class="add-task-button" id="showForm">Add Task</button>
<form id="add-task-form">
<input type="text" id="task-name" placeholder="Task Name">
<input type="text" id="task-time" placeholder="Task Time (HH:MM)">
<input type="text" id="task-url" placeholder="Task URL">
<button id="startTask" type="submit">Save</button>
<button id="deleteTask" type="button">Cancel</button>
</form>
</body>
</html>
It was supposed to show a form for the task for the user to fill in, but it's not showing, and it is being clicked.
Not sure if the code is running on the webpage instead of the popup page, any other things I should do? I am not using jQuery, by the way.
Things I did
I made it execute when the DOM loads, shown above. I haven't seen any difference when I click it.
I am trying to build a form and do some validation using JS. On success I want to redirect it to some other page in the same directory. While running window.location.href over console it is working...but while submitting form, it is not working.
Can someone please help me in this.
My code is:
<html>
<head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
width: 400px;
align-self: center;
}
span.psw {
padding-top: 16px;
}
</style>
<title>Login Page</title>
</head>
<body style="text-align: center;">
<h2 style="text-align: center;">The Mega Cart</h2>
<form name=loginForm onsubmit="login()" style="display: inline-block;">
<div class="container" style="text-align: center;">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
<span class="psw">New user Sign up here. Sign Up</span>
</div>
</form>
</body>
<script>
function login() {
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
window.location.href="main.html";
return false;
}
</script>
</html>
I have already checked that this login function is called.
When you click on the form submit button it call the function login in javascript. In which you have write down the code to redirect the page.
You forgot to prevent the form to submit and that is why you are redirecting to the same page with filled-up values.
If you want to submit your form to specific URL then you should add the action attribute to the form like below.
<form name=loginForm action="URL on which you want to submit form" onsubmit="login()" style="display: inline-block;">
If you want to redirect from the login() function then you should pass the event as an argument from the form and then prevent form submission from the login() function. Please check the below code.
In your form: <form name=loginForm onsubmit="login(event)" style="display: inline-block;">
Change Login function:
function login(e) {
e.preventDefault();
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
window.location.href="main.html";
}
NOTE! Don't forget to pass event in login function
Try this:
window.location.replace('main.html');
In onsubmit function, you can't redirect the page
First, In your form tag, add an action attribute
<form name=loginForm onsubmit="login()" action="main.html" style="display: inline-block;">
Second, Fixed your login function
function login() {
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
return false;
}
Check the redirect URL that contains your data
Try This:
<html>
<head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
width: 400px;
align-self: center;
}
span.psw {
padding-top: 16px;
}
</style>
<title>Login Page</title>
</head>
<body style="text-align: center;">
<h2 style="text-align: center;">The Mega Cart</h2>
<form name=loginForm onsubmit="login()" style="display: inline-block;">
<div class="container" style="text-align: center;">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="button" onclick="login()">Login</button>
</div>
<span class="psw">New user Sign up here. Sign Up</span>
</div>
</form>
</body>
<script>
function login() {
let uname = document.forms["loginForm"]["uname"].value;
let pwd = document.forms["loginForm"]["psw"].value;
window.location.href = "https://minisoft.com.bd/";
return false;
}
</script>
</html>
I am trying to make this website about time management for a project at school. I am trying to create a input (text box) that when the button "add task" is click it is placed (the text inside of it) in a paragraph or p2 and then the input is moved down.
This I think is the problematic section:
Sorry I have posted all the html, css, and Javascript in the html section of the code snippet
Please I really need help
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
<p id= "p1"> </p>
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<button onclick ="appendRow()" value="Add Row">Add Row</button>
</div>
<div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
</style>
</div>
<script>
function addtask() {
var 1 = document.getElementById("first").value;
document.getElementById("p1").innerHTML = var 1;
{
function generateRow() {
var d = document.getEleme ntById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
</script>
</body>
</html>
I think this is the problematic part
function addtask() {
var 1 = document.getElementById("first").value;
document.getElementById("p1").innerHTML = var 1;
{
This image is what it looks like. As you can see the text box is where you put in the task you want or other input and then when you click the green button it will place it will place it above the current input box as a p2 and then the user is able to add another task.
I know there is a lot of extra code however, I hope you get the basic idea
Something like this
You can't name a variable as a number. You'd need to name it something else - also note you shouldn't have the var when you're using the variable.
var val = document.getElementById("first").value;
document.getElementById("p1").innerHTML = val;
Here you go.
Obviously you can't add rows because that function isn't created yet
As an advice I suggest you to use placeholder in your input instead of value.
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
<p id= "p1"> </p>
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<button onclick ="appendRow()" value="Add Row">Add Row</button>
</div>
<div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
</style>
</div>
<script>
function addtask() {
var first = document.getElementById("first").value;
document.getElementById("p1").innerHTML = first;
}
function generateRow() {
var d = document.getElementById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
</script>
</body>
</html>
I created a web-to-lead form using SuiteCRM. Using the code generated by it,I further enhanced it and added a set of 4-checkboxes.
I saved it as a HTML normal page. When I open this html page in browser and it correctly display the alert and submits all the required values correctly to prescribed MySQL database table.
Here is the complete code of this html page:
<html lang='en_us'><head><base target=”_parent” /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><style type="text/css"><!--
form#WebToLeadForm, form#WebToLeadForm * {margin: 0; padding: 0; border: none; color: #333; font-size: 12px; line-height: 1.6em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}
form#WebToLeadForm {float: left; border: 1px solid #ccc; margin: 10px;}
form#WebToLeadForm h1 {font-size: 32px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h2 {font-size: 24px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h3 {font-size: 12px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h4 {font-size: 10px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h5 {font-size: 8px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h6 {font-size: 6px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm p {padding: 10px 20px;}
form#WebToLeadForm input,
form#WebToLeadForm select,
form#WebToLeadForm textarea {border: 1px solid #ccc; display: block; float: left; min-width: 170px; padding: 5px;}
form#WebToLeadForm select {background-color: white;}
form#WebToLeadForm input[type="button"],
form#WebToLeadForm input[type="submit"] {display: inline; float: none; padding: 5px 10px; width: auto; min-width: auto;}
form#WebToLeadForm input[type="checkbox"],
form#WebToLeadForm input[type="radio"] {width: 18px; min-width: auto;}
form#WebToLeadForm div.col {display: block; float: left; width: 330px; padding: 10px 20px;}
form#WebToLeadForm div.clear {display: block; float: none; clear: both; height: 0px; overflow: hidden;}
form#WebToLeadForm div.center {text-align: center;}
form#WebToLeadForm div.buttons {padding: 10px 0; border-top: 1px solid #ccc; background-color: #f7f7f7}
form#WebToLeadForm label {display: block; float: left; width: 160px; font-weight: bold;}
form#WebToLeadForm span.required {color: #FF0000;}
--></style>
<!-- TODO ???
<script type="text/javascript" src='http://localhost/suitecrm/cache/include/javascript/sugar_grp1.js?v=WCpISilUvngJZgJBZ4o1BA'></script>
--><form id="WebToLeadForm" action="http://localhost/suitecrm/index.php?entryPoint=WebToPersonCapture" method="POST" name="WebToLeadForm">
<h2>FREE Blog Subscription - IT & Networking Blog</h2>
<p style="text-align: center;">Submitting this form will add you to subscription list of IT & Networking Blog. You will receive email about each new post as soon as published.</p>
<p><img src="http://localhost/images/banners/LeadManagement/Blog-Subscription-image.png" alt="" /></p>
<div class="row">
<div class="col"><label>First Name: <span class="required">*</span></label><input name="first_name" id="first_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Last Name: <span class="required">*</span></label><input name="last_name" id="last_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Email Address: <span class="required">*</span></label><input name="email1" id="email1" type="email" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<p style="text-align: center;">Select the target lists, you want to join:</p>
<input type="checkbox" id="IT" value="IT">IT<br>
<input type="checkbox" id="Process" value="Process">Process<br>
<input type="checkbox" id="Management" value="Management">Management<br>
<input type="checkbox" id="Education" value="Education">Education<br>
<p style="text-align: center;">100% Privacy! We will never spam you.</p>
<div class="row center buttons" style="text-align: center;"><input class="button" name="Submit" type="submit" value="Subscribe" onclick="submit_form();" />
<div class="clear"> </div>
</div>
<input name="campaign_id" id="campaign_id" type="hidden" value="13f62ae3-f38d-fe80-a93a-57d4090f764d" /> <input name="assigned_user_id" id="assigned_user_id" type="hidden" value="1" /> <input name="moduleDir" id="moduleDir" type="hidden" value="Prospects" /><input name="prospect_list_id" id="prospect_list_id" type="hidden" value="ac6ce628-de45-4813-d1a0-57e2jgjhr49146" />
<!--my code starts here -->
<input name="list_name_c" id="list_name_c" type="hidden" value="mello" /></div>
</form>
<p>
<script type="text/javascript">// <![CDATA[
function submit_form()
{
if (typeof(validateCaptchaAndSubmit) != 'undefined')
{
validateCaptchaAndSubmit();
}
else
{
check_webtolead_fields();
//document.WebToLeadForm.submit();
check();
}
}
function check_webtolead_fields()
{
if (document.getElementById('bool_id') != null)
{
var reqs = document.getElementById('bool_id').value;
bools = reqs.substring(0, reqs.lastIndexOf(';'));
var bool_fields = new Array();
var bool_fields = bools.split(';');
nbr_fields = bool_fields.length;
for (var i = 0; i < nbr_fields; i++)
{
if (document.getElementById(bool_fields[i]).value == 'on')
{
document.getElementById(bool_fields[i]).value = 1;
}
else
{
document.getElementById(bool_fields[i]).value = 0;
}
}
}
}
function check()
{
var list_name = "";
var test = document.forms[0];
var txt = "";
var i;
for (i = 0; i < test.length; i++)
{
if (test[i].checked)
{
txt = txt + test[i].value + " ";
}
}
list_name = txt;
alert(list_name);
document.getElementById('list_name_c').value = list_name;
}
// ]]></script>
</p></body></html>
But my problem starts when I strips the opening & closing html codes from it. I created a 'Custom HTML' module in Joomla and pasted the code there and accessed in a article. The form takes correct shape at the front-end of website.
All the values of 3-fields viz., First Name, Last Name, Email are correctly recorded in database, but checkbox value(s) are not recorded. Even the alert is blank which occurs immediately after I click on submit/subscribe button.
I don't know why it is not working in JOOMLA 3.
MY OBJECTIVE: To have four checkboxes whose values are appended with " - " and stored in the 'list_name_c' field of database table.
What can I do to make it work?
With thanks,
RK
The problem has been solved. Java script was not working because of one more form on the final html webpage. The solution was to replace the code line var test = document.forms[0]; with the code line: var test = document.MYFORMNAME; Thanks!
I am trying to make all my JavaScript external including the onclick for the submit button, I have a commented out window.onload function that I can't get to work. When I remove the onclick="checkInput();" from the submit input and uncomment the window.onload event in the script , my form doesn't work.
Can someone explain what I am doing wrong besides being new to JavaScript.I have included a working snippet, just not external, thanks for any guidance.
/*----------------------------------------------
css settings for HTML div exactCenter
------------------------------------------------*/
#import url(http://fonts.googleapis.com/css?family=Raleway);
#main{
width:960px;
margin:50px auto;
font-family:raleway;
}
span{
color:black;
font-weight:bold;
}
h2{
background-color: white;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 30px;
}
hr{
border:0;
border-bottom:1px solid blue;
margin: 10px -40px;
margin-bottom: 30px;
}
#form_layout{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: -2px;
}
input[type=text],input[type=password]{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
input[type=submit]{
width: 100%;
background-color:#0467fc;
color: white;
border: 2px solid #0467fc;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 15px;
}
a{
text-decoration:none;
color: cornflowerblue;
}
i{
color: cornflowerblue;
}
p{
font-size:16px;
font-weight:bold;
color:red;
}
<!DOCTYPE html>
<html>
<head>
<script>
//window.on onload functionload = function() {
//document.getElementById('submit').onclick = function(evt) {
//checkInput();
//}//end onload onclick
</script>
</head>
<body>
<div id="main">
<div id="form_layout">
<h2>Palindrome Test</h2>
<br>Enter a 10 character Palindrome.
<!-- Form starts here-->
<form name="pForm" id="pForm" method="post" >
<label>Palindrome:</label>:
<input type="text" name="uput" id="uput"/><br>
<!-- ... all the other stuff ... -->
</form><br>
<input type='submit' id="submit" value="Check Palindrome" onclick="checkInput();"/><br>
<p><span id="eMsg" class="error"></span><p/><br>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>isPalindrome</title>
<script>
//window.on onload functionload = function() {
//document.getElementById('submit').onclick = function(evt) {
//checkInput();
//}//end window.onload
Palindrome(str);
</script>
</head>
<body>
<div id="main">
<div id="form_layout">
<h2>Palindrome Test</h2>
<br>Enter a 10 character Palindrome.
<!-- Form starts here-->
<form name="pForm" id="pForm" method="post" >
<label>Palindrome:</label>:
<input type="text" name="uput" id="uput"/><br>
<!-- ... all the other stuff ... -->
</form><br>
<input type='submit' id="submit" value="Check Palindrome" onclick="checkInput();"/><br>
<p><span id="eMsg" class="error"></span><p/><br>
</div>
</div>
</body>
</html>
You have to wait for the DOM to finish loading before you can query it to find DOM elements and atach events.
The simplest fix would be placing your <script> at the end of body.
Another fix is to attach handlers in window onload event ( that's how it works in code snippet below)
In code snippet provided in question the the way window.onload was attached was unclear. Also at the end of script expression Palindrome(str); raised error as var str is undefined, so i've fixed it.
See working snippet below:
document.getElementById('submit').onclick = function(evt) {
checkInput();
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('submit').onclick = function(evt) {
checkInput();
};};
function checkInput() {
alert('Check input fired');
}//end check input
</script>
</head>
<body>
<div id="main">
<div id="form_layout">
<h2>Palindrome Test</h2>
<br>Enter a 10 character Palindrome.
<!-- Form starts here-->
<form name="pForm" id="pForm" method="post" >
<label>Palindrome:</label>:
<input type="text" name="uput" id="uput"/><br>
<!-- ... all the other stuff ... -->
</form><br>
<input type='submit' id="submit" value="Check Palindrome" /><br>
<p><span id="eMsg" class="error"></span><p/><br>
</div>
</div>
</body>
</html>