HTML forms jazzed up with JS

SparrowSquire · 06-29-2012, 01:37 PM

hi guys can anyone help me; i want to jazz up a html form so that a customer can fill in their details and js will feedback with a confirm box
ie: are these details correct?
Customer Name: Whatevers been entered
Email Address: whatever@yahoo.co.uk
OK Cancel

if OK is clicked the html form will clear and it would print to screen "Your details have been submitted"
if Cancel is clicked the html form will clear and it would print to screen "please check your details"

i have done part of this but im struggling please can someone talk me through it?

sunfighter · 06-29-2012, 04:14 PM

Here. Finish the styling yourself.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
<script type="text/javascript">
function DisplayConfirmMessage(msg)
{
c_name = 'Whatevers been entered';  /*Get these your self from the form*/
c_addrs = 'whatever@yahoo.co.uk';

  var divLayer = document.getElementById('divConfMessage');
  divLayer.style.display = 'block';
  divLayer.style.height = '100px';
  divLayer.style.width = '300px';
  document.getElementById('confirmText').innerHTML = 'Customer Name:'+c_name+ 'Email Address:'+c_addrs;
}
</script>

<style type="text/css">
#divConfMessage
{
	border:black thin solid;
	display:none;
}
#confirmText
{
	background-color: #6699cc;
	text-align: left;
}
</style>
</head>

<body>
<div id="divConfMessage">
	<div id="confirmText"></div>
	<button id="btnConfOK">OK</button>
	<button id="btnConfCancel">Cancel</button>
</div>
<button onclick="DisplayConfirmMessage('Hello World');">Push Me</button>
</body>
</html>

SparrowSquire · 06-29-2012, 04:46 PM

thats really different im not sure i could get it to work how i wanted?

the code ive got so far;

CSS
form {
background-color:#F8F8F8;
border: 1px solid #666699;
padding: 8px;
line-height:20px;
text-align:left;
}

HTML
<form id="detailDisplay" action="#" onsubmit="return false">
Full Name <input type="text" name="customername" value="" size="20" />
<br />
Email Address <input type="text" name="emailaddress" value="" size="20" />
<br />
<input type="button" value="Submit" onClick="confirmDetails('detailDisplay')" />
<br />
</form>

JS
function confirmDetails(formID) {

if (document.getElementById(formID)) {
var form = document.getElementById(formID);
} else {
return;
}

// CONFIRM REQUIRES ONE ARGUMENT
var message = "Please confirm your details are correct;"+ form.customername.value + form.emailaddress.value;

// CONFIRM IS BOOLEAN. THAT MEANS THAT
// IT RETURNS TRUE IF 'OK' IS CLICKED
// OTHERWISE IT RETURN FALSE
var customername = confirm(message);

// DISPLAY THE RETURNED VALUE IN THE
// CONFIRM POPUP DEMO TEXT INPUT BOX
form.customername.value = customername;

// TEST TO SEE IF TRUE|FALSE RETURNED
if ( customername === true ) {
// YOUR 'OK' SCRIPT GOES HERE
yourOkFunction("details submitted");
}
else
{
// YOUR 'CANCEL' SCRIPT GOES HERE
yourCancelFunction();
}
}

basically it works but i cant get the text to align left to the text boxes,

when the pop up window appears whatevers been entered in the text boxes appear squished at the side (i tried \ to put it on a new line but that doesnt work maybe something like console.Writeline.form.confirmDetails.customername ?)

when ok pressed true appears in text box cancel false appears in text box. instead i want ok pressed- details submitted printed to screen in someway cancel pressed - form just clears

any ideas?