Forum Moderators: open
I am trying to write a JavaScript that will pull the last entered values, and automatically fill in the form elements with them after a form submit and page reload. I have been mostly successful; however I am having particular trouble with the select menus.
Two of my select menus contains numbers, so a scripting like this:
(Irrelevant code removed)
$minlev = mysql_real_escape_string($_POST['minlev']);
echo "window.onload=function() {
document.getElementById('minlev').options['" . $minlev . "'].selected = true;
}"; Is not viable, as my array of numbers is not equally incremental or consecutive, and it would try and select the, say, 10th value, rather than the value 10.
So, my question is this: is it possible to call an array value in <select> format by name rather than by order of appearance, and if so, (how) is it possible to do so with a purely numerical name?
Cheers,
Readie
[edit]
To clarify my question, where I say "name" I am referring to what is between the quotations in
<option value="">
$select = <'select name="minlev" id="minlev">';
// do your query, get the values from the database, so
// with each option, you have
$select .= '<option value="' . $row['whatever'] . '"';
if (isset($_POST['minlev']) and ($_POST['minlev']==$row['whatever'])) {
$select .= ' selected';
$select .= '>' . $row['whatever'] . '</option>';
Then after the loop,
$select .= '</select>';
Warning: Legacy code ahead dug up from Bill's archives, using the dreaded eval, which shouldn't be used in this way. Fix it. :-)
And be sure to change these -> ¦ to valid logical or pipe characters, otherwise, works as expected.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
window.onload=function() {
if (document.getElementById('clear-frm')) {
document.getElementById('clear-frm').innerHTML =
'<input type="button" id="clear-form" value="Clear Form">';
document.getElementById('clear-form').onclick = function() { clearForm(this.form); }
}
if (document.getElementById('the-form')) {
document.getElementById('the-form').onsubmit= function() { return chkForm(this); };
}
}; // End window.onload, not a typo
function chkForm (form) { alert('validation and submit here.'); return false; }
function clearForm(form) {
var msg = 'This will clear ALL fields in this form.\n' +
'To return to the current values, use\n' +
'the reset button. Continue?';
var okToClear = confirm(msg);
if (okToClear == true) {
for (i=0;i<form.elements.length;i++) {
var element = eval('form.elements[' + i + ']');
if ((element.type == 'text') ¦¦ (element.type == 'textarea') ¦¦
(element.type == 'file')) { element.value = ''; }
else if (element.type == 'select-one') { element.selectedIndex = 0; }
else if (element.type == 'radio') {
var elementName = element.name;
var radio = eval ('form.' + elementName);
for (r=0;r<radio.length;r++) {
if (r == 0) { eval ('form.' + elementName + '[' + r + '].checked=true'); }
else { eval ('form.' + elementName + '[' + r + '].checked=false'); }
}
} // end if radio
} // end for elements loop
alert('Form cleared - Psst . . . now hit reset, check it out . . . ');
} // end ok to clear
} // end func
</script>
</head>
<body>
<p>Radio buttons are tricky. It's good to estalish a "policy"<br>
of normally having the first one default, and always checked if<br>
no values are present. The second is to always have an empty value as the<br>
first item in a select list.<br>
The following follows these policies.</p>
<form method="post" id="the-form" action="">
<p><label for="fname">First Name:</label>
<input type="text" name="fname" id="fname" value="Bill"></p>
<p><label for="fname">Last Name:</label>
<input type="text" name="lname" id="lname" value="CodeMonkey"></p>
<p><strong>Some Option:</strong>
<input type="radio" name="some_option" id="some_option_default" value="0">
<label for="some_option_default">Default</label>
<input type="radio" name="some_option" id="some_option_1" value="1" checked>
<label for="some_option_1">First</label>
<input type="radio" name="some_option" id="some_option_2" value="2">
<label for="some_option_2">Second</label>
</p>
<p><label for="select-me">Select Value:</label>
<select name="select-me" id="selecte-me">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
</p>
<p style="white-space:nowrap">
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
<!-- note it only displays if JS is enabled -->
<span id="clear-frm"></span>
</p>
</form>
</body>
</html>
Doesn't include all elements but gives you enough to go on - for example, if element.type==checkbox, set checked=false.
Using various case/if statements, I used PhP to re-populate the form fields after a form submit.
I reverted the reset button to an ordinary reset button, with no JS attached.
And I added a third button for clearing the form, which simply re-loaded the page with no post data as a "clear all".
Not quite as elegant as I would wish, as the third button reverts the roster to the defaults, but it works nicely enough.