I am creating a registration form with a name a email and a phone number. I have a name id a phone id and a email id also I have txtNameError, txtPhoneError, and txtEmailError and I am using a bnt button id.
Here is the HTML for the program.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Week 12: Registration Form</title>
</head>
<body>
<div class="page">
<table>
<tr>
<td><input type="text" name="txtName" id="txtName" placeholder="Name" /></td>
<td><p class="error" id="txtNameError">Name must be at least 6 characters long.</p>
</td>
</tr>
<tr>
<td><input type="text" name="txtPhone" id="txtPhone" placeholder="Phone: ###-###-
####" /></td>
<td><p class="error" id="txtPhoneError">Phone must be in the format ###-###-####.</p>
</td>
</tr>
<tr>
<td><input type="text" name="txtEmail" id="txtEmail" placeholder="Email Address" />
</td>
<td><p class="error" id="txtEmailError">Must be a valid email address.</p></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><button id="btnRegister"
name="btnRegister">Register</button></td>
</tr>
</table>
</div>
<link type="text/css" rel="stylesheet" href="week12.css" />
<script type="text/javascript" src="week12.js"></script>
</body>
</html>
and my JavaScript:
var txtEmail = document.getElementById('txtEmail');
var txtPhone = document.getElementById('txtPhone');
var txtName = document.getElementById('txtName');
var txtEmailError = document.getElementById('txtEmailError');
var txtPhoneError = document.getElementById('txtPhoneError');
var txtNameError = document.getElementById('txtNameError');
function register(){
if (/^[A-Z \.\-']{6,20}$/i.test(txtName.value)) {
p.error {display:none;}
} else {
p.error {display:txtNameError;}
}
if (/\d{3}[ \-\.]?\d{3}[ \-\.]?\d{4}/.test(txtPhone.value)) {
p.error {display:none;}
} else {
p.error {display:txtPhoneError;}
}
if (/^[\w.-]+#[\w.-]+\.[A-Za-z]{2,99}$/.test(txtEmail.value)) {
p.error {display:none;}
} else {
p.error {display:txtEmailError;}
}
}
{
var btnRegister = document.getElementById('btnRegister');
btnRegister.onclick = register;
}
I'm using Modern javascript develop and design which was written by larry ullman.
I'm not sure though on how I am suppose to get the txterrors to work before I had a style.visibility in the html which I could set the if and else statement and if it was true I could make it hid or vis or if false hid or vis. I'm not sure on how to do this though I did read about addErrorMessage() and removeErrorMessage() functions which I would add the id and the error message but I am not sure what that means though since in the html file I was provided the Error msg are in the html file. Thanks For any tips.
CSS
body {
margin: 0;
}
.page {
margin: 10px auto;
height: 500px;
width: 500px;
background: #CCC;
}
.page table {
width: 500px;
height: 500px;
}
.error {
color: #FF0000;
font-weight: bold;
font-style: italic;
visibility: hidden;
}
You use in one place
var txtPhone = U.$('phone');
and in other
var txtNameError = document.getElementById('txtNameError');
I think this is copy and paste and you don't understand how it work.
And in your html not exists fields with name or id "phone".
In first you should use one method for access to HTML elements.
var txtPhone = document.getElementById('txtPhone');
This code is very strange too:
if (/^[A-Z .-']{2,20}$/i.test(txtName.value.length > 6))
For check length you should make check it separate or change regexp.
if (/^[A-Z \.\-']{7,20}$/i.test(txtName.value))
For hidden errors text you can use CSS. For example,
p.error {display:none;}
For show error you should make error message visible
if (/^[A-Z .-']{7,20}$/i.test(txtName.value)) {
//value is correct. make some if need
} else {
//value is wrong
//show element txtNameError
}
Related
I have a form where a user fills out their phone number. this is part of an email signature generator. When you generate it, the placeholder a href phone number is replaced with the phone number that the user input on the form. This works fine except is also replaces "tel:" so the end result is for example '345.345.3456' when I want it to be 'tel:345.345.3456' so that it is clickable. I would like to replace everything EXCEPT the tel so that the phone number will be clickable.
EDIT: I have added the full code for the particular ask below now. I removed as much as I could of all those things not related to the question.
<body>
<!-- Start main form -->
<form method='POST' action='.' enctype='application/x-www-form-urlencoded' role="form" id="signatureForm">
<p id='formErrorContainer'></p>
<label for='mobile_phone'>Mobile Phone Number
<input type='tel' id='mobile_phone' name='mobile_phone' title='Enter phone number' placeholder='e.g. 555.123.4567'>
<span>Enter valid phone number</span> <span class='success-validation-check'></span> </label>
<button type='submit' title='Generate Email Signature!!!' id='generateButton'>Generate Email Signature</button>
</form>
<template id="signatureTemplate">
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr height="25">
<td><span style="font-weight: 600;">m: </span> <a href="tel:123.123.1234" style="text-decoration:none !important; color: #063852 "><span data-column="mobile_phone"></span></td>
</tr>
</tbody>
</table>
</template>
<script>
// Adding the error validation
const inputs = document.querySelectorAll('input, select');
const inputLength = inputs.length;
for (let i=0; i<inputLength; i++) {
inputs[i].addEventListener('blur', function() {
if (!this.classList.contains('blurred')) {
this.classList.add('blurred');
}
}, false);
}
const signatureForm = document.getElementById("signatureForm");
signatureForm.addEventListener("submit", (ev) => {
if (signatureForm.checkValidity()) {
ev.preventDefault();
const templateEle = document.getElementById("signatureTemplate").content.querySelector("table");
templateEle.querySelector("[data-column='mobile_phone']").innerText = document.getElementById("mobile_phone").value;
templateEle.querySelector("[href='tel:123.123.1234']").href = document.getElementById("mobile_phone").value;
document.querySelector("body").innerHTML = "";
document.querySelector("body").appendChild(templateEle);
}
}, false);
</script>
</body>
So I'm still not entirely sure if it's what you're after but I think this will get you closer. I started to put in some extra flare for validation etc but I've got to run for the day and don't have the free time to go setup patterns and maxlengths and etc, so feel free to ignore the stuff you don't need.
SECOND TRY
const inputs = document.querySelectorAll('input, select'),
signatureForm = document.getElementById("signatureForm"),
template = document.getElementById("signatureTemplate"),
phoneInput = document.getElementById('phone-input'),
phoneOutput = signatureTemplate.content.getElementById('phone-output');
signatureForm.addEventListener("submit", (e) => handleForm(e), false);
for (let i=0, x = inputs.length; i < x; i++) {
inputs[i].addEventListener('blur', function() {
if (!this.classList.contains('blurred')) {
this.classList.add('blurred');
}
}, false);
}
handleForm = (e) => {
if (signatureForm.checkValidity()) {
e.preventDefault();
if (template) {
const table = document.getElementById('signatureTemplate').content;
phoneOutput.href = `tel:${phoneInput.value}`;
phoneOutput.innerText = phoneInput.value ? phoneInput.value : 'NO NUMBER PROVIDED';
document.body.appendChild(table);
} else { console.error('No template found in the document') }
} else {
inputs.forEach((input) => input.classList.add(input.valid ? 'is-valid' : 'not-valid'));
}
}
.the-table {
border-collapse: collapse;
}
.blurred {
/* For the sake of example */
outline: gray 1px dashed;
}
.anchor-link {
text-decoration: none;
color: #063852;
}
.default-input {
border: #ddd 2px solid;
}
.is-valid {
border: #0f0 2px solid;
}
.not-valid {
border: #f00 2px solid;
}
<form id="signatureForm"
method="POST"
action="."
enctype="application/x-www-form-urlencoded"
onsubmit="handleForm(event)">
<p id="formErrorContainer"></p>
<label for="mobile_phone">
Mobile Phone Number
<input type="tel"
class="default-input"
id="phone-input"
min-length="10"
title="Enter phone number"
placeholder="e.g. 555.123.4567">
</label>
<aside data-phone-invalid>
<span>Enter valid phone number</span> <span class='success-validation-check'></span>
</aside>
<button title="Generate Email Signature!!!"
id="generateButton">
Generate Email Signature
</button>
</form>
<template id="signatureTemplate">
<table class="the-table">
<tbody>
<tr height="25">
<td>
<span style="font-weight: 600;">m:</span>
<a class="anchor-link" id="phone-output"></a>
</td>
</tr>
</tbody>
</table>
</template>
FIRST TRY
If I understand your question correctly, this should get your sorted. Cheers.
inputToHref = () => {
const anchor = document.createElement('a'),
anchorVal = document.getElementById('phone1').value;
anchor.innerText = anchorVal ? anchorVal : 'Enter A Phone Number First';
anchor.href = `tel:${anchorVal}`;
document.body.appendChild(anchor);
}
a {
display: block;
font-size: 3rem;
margin: 1rem;
}
<input type="tel" id="phone1" placeholder="tel: 123-456-7890"/>
<br><br>
<button onclick="inputToHref()">Click to Generate Anchor Tag</button>
I want to place asterisk in the right side of the each text box individually when I am submitting the empty form/field. The code is working but asterisk is displaying in the end of the form.
This is my code:
[<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
input { text-align:center; border:2px solid #CCC; }
#wrap { width:400px; height:200px; margin:20px; padding:10px; }
#une { margin-top:10px; }
#reg {margin-top:10px; }
.a13B { color:#F00; }
.cntr { text-align:center; }
</style>
</head>
<body>
<div id="wrap">
<form id="regform" name="registerationform" method="POST">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="300">
<tr>
<td>First Name: </td>
<td class="cntr">
<input type="text" name="fnametxt" size="20"></td>
</tr>
<tr>
<td>Second Name: </td>
<td class="cntr">
<input type="text" name="snametxt" size="20"> </td>
</tr>
<tr>
<td>User Name:</td>
<td class="cntr">
<input type="text" name="unametxt" size="20"> </td>
</tr>
<tr>
<td>Email Address: </td>
<td class="cntr">
<input type="text" name="emailtxt" size="20"> </td>
</tr>
<tr>
<td>Password : </td>
<td class="cntr"><input type="password" name="pwdtxt" size="20"> </td>
</tr>
<tr>
<td>Confirm : </td>
<td class="cntr"><input type="password" name="cpwdtxt" size="20"> </td>
</tr>
</table>
<input id="reg" name="reg" type="button" onclick="regvalidate(this.form)" value="Register Now">
</form>
<div id="une" class="a13B">
</div>
</div>
<!-- end wrap -->
<script type="text/javascript">
var uneObj=document.getElementById("une"); // object ref to msg line
var currentBrdObj;
//
function regvalidate(formObj)
{ uneObj.innerHTML=""; // clear msg line before resubmitting
// gather object ref to input boxes
var allInputs=document.getElementById("regform").getElementsByTagName("input");
// check if value of box is ""
for(var i=0;i<allInputs.length;i++)
{ if(allInputs\[i\].name !="reg") // ignore submit button
{ if(allInputs\[i\].value=="")
{ uneObj.innerHTML=msg\[i\];
if(currentBrdObj){currentBrdObj.style.border="2px solid #CCC"; }
allInputs\[i\].style.border="2px solid #F00";
currentBrdObj=allInputs\[i\];
allInputs\[i\].onclick=function(){ this.style.border="2px solid #CCC"; }
return;
} } }
// check if password and confirm are the same
if((formObj.pwdtxt.value) != (formObj.cpwdtxt.value))
{ uneObj.innerHTML = msg\[msg.length-1\]; // last msg in array
formObj.pwdtxt.value = ""; formObj.pwdtxt.style.border="";
formObj.cpwdtxt.value = ""; formObj.cpwdtxt.style.border="";
return;
}
// all ok so submit form
uneObj.innerHTML = "All ok so submitting form";
formObj.submit();
}
// -----
var msg =\["*","*",
"*","*",
"*","*"\];
msg\[msg.length\]="Passwords must be equal.<br>Please type a password";
//
</script>
</body>
</html>][1]
#PawanKumar
Here is your code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submitBtn').on('click', function(e) {
debugger;
e.preventDefault();
var fields = document.getElementsByTagName('input');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('required')) {
if (fields[i].value == "") {
fields[i].classList.add('redBorder');
$(fields[i]).after('*');
} else {
fields[i].classList.remove('redBorder');
}
}
}
});
});
</script>
<style>
.redBorder {
border: 2px solid red;
border-radius: 2px;
}
</style>
</head>
<form novalidate>
<input type="text" placeholder="first name" required/><br/><br/>
<input type="text" placeholder="last name" /><br/><br/>
<button id="submitBtn" value="Submit">Submit</button>
</form>
</html>
Use span element to display asterisk at the end of text box. Try this :
<input type="text" id="name"/> <span style="color:red"> * </span>
Hope this solves your requirement.
Why bother with all that mess?
<input type="text" name="fnametxt" required />*
<input type="email" name="emailtxt" required />*
<input type="submit" value="Register" />
JavaScript required: none at all
With the help of jquery after() method, you can achieve this.
$(fields[i]).after("<span class='redColor'>*</span>");
I have also added code to show red border for required input field.
Note: If you use <form> tag, then HTML5 will automatically does the validation and your script will not execute, so to prevent that use novalidate attribute in the form tag or just remove the form tag.
$(document).ready(function() {
$('#submitBtn').on('click', function(e) {
e.preventDefault();
var fields = document.getElementsByTagName('input');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('required')) {
if (fields[i].value == "") {
fields[i].classList.add('redBorder');
$(fields[i]).after("<span class='redColor'>*</span>");
} else {
fields[i].classList.remove('redBorder');
}
}
}
});
});
.redBorder {
border: 2px solid red;
border-radius: 2px;
}
.redColor{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form novalidate>
<input type="text" placeholder="first name" required/><br/><br/>
<input type="text" placeholder="last name" /><br/><br/>
<button id="submitBtn" value="Submit">Submit</button>
</form>
Trying to trigger the submit functionality from JQuery. what am I doing wrong? In theory, this should work. I've tried about 4 different ways though.
I have tried
$('input#submit').trigger("click");
$( form:first ).submit();
$( form:first ).trigger("submit");
$('form#databaseActionForm').submit();
NOTHNG HAS WORKED (YET)?!
CODE:
<html lang="en">
<head>
<title>Database Management</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<style>
table td { border: 1px solid black; }
table td:first-child { text-align: left; }
</style>
<script>
<!--
$(document).ready(function() {
$('#erase').click(function() {
if (confirm("Are you sure that you want to ERASE ALL DATA from the database?"))
{
$('#buttonTypePressed').val("erase");
$('input#submit').trigger("click"); <!-- HERE -->
}
});
$('#update').click(function() {
var appID = $('#updateAppID').val();
var field = $('#fieldName').val();
var value = $('#newValue').val();
if (appID == null || appID == "") {
alert("You must enter the ID number of the entry you wish to modify.");
$('#updateAppID').focus();
}
else if (field == null || field == "") {
alert("You must choose which field you wish to modify.");
$('#fieldName').focus();
}
else if (value == null || value == "") {
alert("You must choose the new value you wish to appear in the database.");
$('#newValue').focus();
}
else {
$('#buttonTypePressed').val("update");
$('input#submit').trigger("click"); <!-- HERE -->
}
});
$('#delete').click(function() {
var appID = $('#deleteAppID').val();
if (appID == null || appID == "") {
alert("You must enter the ID number of the entry you wish to delete.");
$('#deleteAppID').focus();
}
else {
$('#buttonTypePressed').val("delete");
$('input#submit').trigger("click"); <!-- HERE -->
}
});
});
-->
</script>
</head>
<body>
<div id="container">
<from id="databaseActionForm" name="databaseActionForm" method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<table border=0 style="margin: 50px auto; text-align: right;">
<tr style="text-align: center; font-weight: bold; font-size: 1.5em; text-decoration: underline;">
<th>Action</th>
<th>Additional Info</th>
<th>Button</th>
</tr>
<tr name="Clear">
<td>Erase Database</td>
<td style="text-align: center;">ARE YOU SURE?</td>
<td><input type="button" id="erase" name="erase" value="ERASE ALL?" /></td>
</tr>
<tr name="Update">
<td>Update Value</td>
<td>
Entry ID: <input type="text" id="updateAppID" name="updateAppID" placeholder="App entryID" /><br />
Field Name: <input type="text" id="fieldName" name="fieldName" placeholder="Field to change" /><br />
New Value: <input type="text" id="newValue" name="newValue" placeholder="New value" /><br />
</td>
<td><input type="button" id="update" name="update" value="Update Value" /></td>
</tr>
<tr name="Delete">
<td>Delete Payment</td>
<td>
Entry ID: <input type="text" id="deleteAppID" name="deleteAppID" placeholder="App entryID" />
</td>
<td><input type="button" id="delete" name="delete" value="Delete Entry" /></td>
</tr>
</table>
<input type="hidden" id="buttonTypePressed" name="buttonTypePressed" />
<input type="submit" id="submit" name="submit" value="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1"/>
</form>
</div>
</body>
There are 2 issues here, 1 is a typo in the element name form, you have it as from.
Another is the name/id of the submit button, it should not be submit as it will override the default submit property(the function) of the form element
<input type="submit" id="bsubmit" name="bsubmit" value="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
Then just use the below snippet to submit the form
$('#databaseActionForm').submit();
Demo: Fiddle
I think the problem is you misspelled "form" as "from". Check the syntax highlighting. After that, any of these will work:
$('form#databaseActionForm').submit();
$('#databaseActionForm').submit(); // referencing the form's ID
document.databaseActionForm.submit(); // referencing the form's NAME
I am trying to take numbers entered by a user and use them for calculating values, and then having these numbers displayed in the text boxes. When I submit the values, The text boxes to the right do not change. Any Ideas?
<!DOCTYPE html>
<html>
<head>
<title>Car Payment Calculator</title>
<style>
html, body {
margin:0;
padding:0;
}
#pagewidth {
max-width:9000em;
min-width:1000em;
}
#header {
position:relative;
height:150px;
background-color:#06F9FC;
width:100%;
display:block;
overflow:auto;
}
#maincol {
background-color: #FCC66C;
position: relative;
}
</style>
<HTA:APPLICATION ID="myCarPayment"
APPLICATIONNAME="Car Payment Calculator"
SYSMENU="yes"
BORDER="thin"
BORDERSTYLE="normal"
CAPTION="yes"
ICON=""
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SCROLL="no"
VERSION="1.0"
WINDOWSTATE="normal"/>
<script>
window.resizeTo(300,300);
function calculate() {
var years= document.forms.myForm.years.value;
var monthly= amount/(years*12);
var number= monthly/amount;
var form = document.forms.myForm;
var loanAmount = form.loanAmount.value;
var downPayment = '0';
var anualInterestRate = form.interestRate.value;
var years = form.years.value;
var monthRate = anualInterestRate/12;
var numberOfPayments = years * 12;
var Principal=loanAmount-downPayement;
var valueNumber = document.getElementById("numPay");
var vlaueMonthly = document.getElementById("monthlyPay");
valueNumber.value = numberOfPayments;
valueMonthly.value = monthly;
}
</script>
</head>
<body>
<div id="header">
<pre>
<p>This application will help you calculate car payments.<br/>
Just enter the information and hit Calculate!</p>
</pre>
</div>
<div id="maincol">
<pre>
<form name="myForm" action="" onsubmit="calculate()">
<table>
<tr>
<td>Loan Amount:</td><td> <input type="number" name="loanAmount"></td>
</tr>
<tr>
<td>Interest Rate:</td><td> <input type="number" name="interestRate"></td><td>Number of Payments:</td><td><input type="text" name="numberPayments" id="numPay" value="0"></td>
</tr>
<tr>
<td>Number of Years:</td><td> <input type="number" name="years"></td><td>Monthly Payment:</td><td><input type="text" name="monthlyPayments" id="monthlyPay" value="0"></td>
</tr>
<tr>
<td><input type="submit" value="Calculate"></td>
</tr>
</table>
</form>
</pre>
</div>
</body>
</html>
You are getting an error in your callback function calculate():
Uncaught ReferenceError: amount is not defined
You're using amount but you've not defined/declared it.
I'm not sure what the value of amount should be.
Also get the value from input and convert it into number by using parsetInt(), you need convert them into number before calculation.
var years = parseInt(document.forms.myForm.years.value, 10);
var loanAmount = parseInt(form.loanAmount.value, 10);
var valueNumber = parseInt(document.getElementById("numPay"), 10);
var vlaueMonthly = parseInt(document.getElementById("monthlyPay"), 10);
I'm making an application where the user fills out all the information for a logo and adds it to a list where he can then add more logos or delete them.
Imagine I add a logo to the list with the following information:
Name: Pepsi
Location: Front, Back
Dimensions: 90mm, 60mm
Colors: Red, Blue, White
Options: Whitebg
Comment: This is a cool logo.
The array would be:
logos[logo[name, loc[], dim[], col[], opt[], com]]
Now I can do this to retrieve some info:
logos[0][0] //Prints "Pepsi"
logos[0][1][0] //Prints "Front"
logos[0][2][1] //Prints "60mm"
Now comes the problem. Whenever the user completes all the info and adds the logo the list I want to empty all the arrays except the main "logos" one so the user can add another logo to the list.
I tried to empty the "logo" array at the end of the "add" button function:
logo.length = 0;
But now the main array "logos" contains one "logo" array witch is empty. I want to keep that information there.
I think you could look at this differently.
I think you should just have a main logos array. And a Logo Object.
The Logo Object.
function Logo(name,loc, dim, col, opt, com){
return {
name:name,
loc:loc,
dim:dim,
col:col,
opt:opt,
com:com
}
}
var logos = [];
logos.push(Logo("blah",somthing[],else[]....);
Then reference by:
logos[0].name;
logos[0].dimensions[0];
....
you can add another...
logos.push(Logo("another",....));
Another Option
Same thing as before.
But instead of a Logos[]
Use a Logos = {} object.
You can dynamically add properties by given input like this.
Logos["First"] = Logo(loc,dim,col,opt,com);
Logos["Second"] = Logo(loc2,dim2,col2,opt2,com2);
If the user inputs that they want the "First" logo.
You can use
var firstlogo = Logos["first"];
firstlogo.loc[0] etc.
Play around with it, using objects provides a better understanding of the data you are dealing with, esp when multidimensional arrays are not "required"
I think you want do this :
var tempLogo = new Array();
tempLogo[0] = logos[0]; // or the logo you have choose
// Clear the logo
logos.clear();
// Set the logos with the tempLogo value
logos = tempLogo;
Finally I used objects instead of arrays as "Bodman" suggested. Works much better and is simpler.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/master.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<form action="/" method="post" id="form">
<p><label for="">Name:</label><input type="text" id="name"/></p>
<p><label for="">Location:</label><input type="checkbox" name="loc" value="Front"/> Front <input type="checkbox" name="loc" value="Back"/> Back <input type="checkbox" name="loc" value="Right"/> Right <input type="checkbox" name="loc" value="Left"/> Left</p>
<p><label for="">Dimensions:</label>H: <input type="text" size="4" id="dimH"/> W: <input type="text" size="4" id="dimW"/></p>
<p><label for="">Colors:</label><input type="text" size="4" id="col1" /> <input type="text" size="4" id="col2" /> <input type="text" size="4" id="col3" /> <input type="text" size="4" id="col4" /></p>
<p><label for="">Comments:</label><textarea id="com" cols="30" rows="2"></textarea></p>
<p><label for=""> </label><input type="button" id="add" value="Add" /> <input type="button" id="del" value="Del" /></p>
</form>
<ul id="results"></ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
CSS:
body { padding: 50px; }
p { margin: 10px 0; }
label { float: left; width: 100px; }
input { margin: 0 }
ul input[type="checkbox"]{ float:left; }
ul { list-style: none;}
li { margin: 10px 0; }
li div { margin-left: 20px; }
h2 { font: bold 14px Arial; margin-bottom: 5px; }
jQuery:
$(function(){
function logo(name, loc){
var locSize = loc.length;
return {
name: name,
loc: loc,
locSize: locSize
}
}
var logos = [];
$("#add").click(function(){
var name = $("#name").val();
var loc = [];
$("input[name='loc']:checked").each(function(){
loc.push($(this).val());
});
logos.push(logo(name, loc));
$("#results").children().remove();
$.each(logos, function(n){
$("#results").append("<li><input type='checkbox'/><div><h2>" + logos[n].name + "<h2/> Locations(" + logos[n].locSize + "): " + logos[n].loc.join(", ") + "<div/></li>");
});
});
$("#del").click(function(){
$("#results input[type='checkbox']:checked").each(function(){
var index = $(this).closest("li").index();
logos.splice(index, 1);
$(this).closest("li").remove();
});
});