Forum Moderators: open

Message Too Old, No Replies

select specific option with JS

Call by name rather than array reference

         

Readie

3:14 am on Jan 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have a page that has a PhP loop to produce a roster in table format, with a form above it to act as a filter. The roster contents are produced from a MySQL database.

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="">

rocknbil

4:18 am on Jan 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, you're really better off doing something like this, in PHP:

$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>';

Readie

4:47 pm on Jan 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes,I did think of something like that, however my issue is then that the reset button will not work properly and reset the select to no value.

... Sometimes I regret having ideas :(

Thanks anyway Rock :)

Fotiman

6:43 pm on Jan 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The function of reset is not to set the select to 'no value', but rather to set the form back to what it was on page load, in which case it SHOULD be acting correctly (but not doing what it seems you would like, which is to reset to a blank form). Perhaps instead of a reset button you should just create a plain button with some JavaScript that will set all the values to blank?

Readie

7:07 pm on Jan 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes, though rather than a plain button, have "onclick="return res();" on the reset button itself and have return false; in the reset function. Thanks guys :)

Regards,
Readie

rocknbil

1:16 am on Jan 11, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yeah the reset is not what most people think it is. :-) However, it's not that difficult, I just coded up something that will always work - but in the interest of maintaining a reset's function, I propose a third button.

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 &quot;policy&quot;<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.

Readie

1:14 am on Jan 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I very much appreciate the answers I got here, however eventually I decided on a bit of a mix of ideas.

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.