Menu
In the script below, all works fine.
Now I want to make a change.
I have two questions:
1. How do I make the second <div> tag contents display below the first?
I think this is a CSS float question associated with the ‘fieldset’ tag, but I don’t know how to clear after the first two fieldset displays. How would I modify this or am I completely wrong with the CSS settings?
This is a minor problem, so I can jump over to the CSS forum if no answers show up here.
More interesting JSON question (at least for me).
2. I have to use two arrays to check for errors and form the alert display.
It seems I should be able to somehow read the IDs of the ‘Errs{}’ array
without resorting to creating the ‘ErrIDS’ array. My knowledge of a correct
JSON syntax is not up to the task. Any ideas?
[code=php]
<html>
<head>
<title>Verify with Error message Array</title>
<style type=”text/css”>
fieldset { width: 200px; float: left}
</style>
<script type=”text/javascript”>
// JSON version: want to erase ErrIDS and use portion of Errs{} hash
var ErrIDS = new Array(‘F0′,’F1′,’F2′,’F3’);
var Errs = {}
Errs = {‘F0′:’ – Name’,’F1′:’ – Address’,’F2′:’ – Email’,’F3′:’ – Phone’};
function verify() {
var errmsg = []
for (var i=0; i<ErrIDS.length; i++) {
if (document.getElementById(ErrIDS[i]).value == ”) { errmsg.push(Errs[ErrIDS[i]]); }
}
//alert if fields are empty and cancel form submit
if (errmsg.length > 0) {
alert(“You are required to complete the following fields:n”+errmsg.join(‘n’)); return false;
} else {
alert(‘Success – Error size: ‘+errmsg.length); return false; // used for testing (normally true)
}
}
function CheckEmpty(IDS) {
var obj = document.getElementById(IDS);
if (obj.value == ”) { obj.style.backgroundColor = ‘#ffffff’; }
else { obj.style.backgroundColor = ‘#ffff00′; }
}
</script>
</head>
<body>
<form action=”” onSubmit=”return verify();” method=”POST” name=”inform”>
<div>
<fieldset><legend><strong>Name *</strong></legend>
<input type=”text” id=’F0′ name=”name” value=”” size=”24″ onBlur=”CheckEmpty(this.id)”>
</fieldset>
<fieldset><legend><strong>Address *</strong></legend>
<input type=”text” id=’F1′ name=”address” value=”” size=”24″ onBlur=”CheckEmpty(this.id)”>
</fieldset>
</div>
<br />
<div>
<fieldset><legend><strong>Email *</strong></legend>
</strong><input type=”text” id=’F2′ name=”email” value=”” size=”24″ onBlur=”CheckEmpty(this.id)”>
</fieldset>
<fieldset><legend><strong>Phone *</strong></legend>
<input type=”text” id=’F3’ name=”phone” value=”” size=”24″ onBlur=”CheckEmpty(this.id)”>
</fieldset>
</div>
<input value=”Submit” type=”submit”>
</body>
</html>