default selected item and field value

Sarah West · Nov 3, 2003

Hi,

I have the following problem;

This is my form, i would like to default the select box to USA, and default
the text field to a name such as 'Sarah' and the hidden field to another
number like '876543', when the user clicks on the check box, otherwise the
fields should be blank, the value of the select box dosnt matter much, only
that it defaults to USA, when the user checks it. Can anyone help? i have
tried a google with no luck, anything would be appreciated.
--
<form name="form1">
<input type="checkbox" name="checkbox" value="checkbox">

<select name="prefix">
<option value="off" selected>Select country
<option value="61">Australia
<option value="1">USA
<option value="58">Venezuela
</select>

<input type="text" name="name">
<input type="hidden" name="number">
</form>

Lee · Nov 3, 2003

Sarah West said:

Hi,

I have the following problem;

This is my form, i would like to default the select box to USA, and default
the text field to a name such as 'Sarah' and the hidden field to another
number like '876543', when the user clicks on the check box, otherwise the
fields should be blank, the value of the select box dosnt matter much, only
that it defaults to USA, when the user checks it. Can anyone help? i have
tried a google with no luck, anything would be appreciated.
--
<form name="form1">
<input type="checkbox" name="checkbox" value="checkbox">

<select name="prefix">
<option value="off" selected>Select country
<option value="61">Australia
<option value="1">USA
<option value="58">Venezuela
</select>

<input type="text" name="name">
<input type="hidden" name="number">
</form>
--

<html>
<head>
<script type="text/javascript">
var defaultValue={ prefix:2, name:"Sarah", number:876543 };
function setDefaults(box){
if(box.checked){
box.form.prefix.selectedIndex=defaultValue.prefix;
box.form.name.value=defaultValue.name;
box.form.number.value=defaultValue.number;
}else{ // clear the values if unchecked
box.form.prefix.selectedIndex=0;
box.form.name.value="";
box.form.number.value="";
}
}
</script>
<body>
<form name="form1">

<input type="checkbox"
name="checkbox"
value="checkbox"
onclick="setDefaults(this)">

<select name="prefix">
<option value="off" selected>Select country</option>
<option value="61">Australia</option>
<option value="1">USA</option>
<option value="58">Venezuela</option>
</select>

<input type="text" name="name">
<input type="hidden" name="number">

</form>
</body>
</html>

Sarah West · Nov 4, 2003

Thank you Lee, that works great.

I'm curious as to how it works?

box.form.name.value=defaultValue.name

The name of my form is 'form1', and the name of my checkbox is called
'checkbox', how can you refer to it in such generic terms eg
'box.form.<element>.<value>'?

Richard Cornford · Nov 4, 2003

Sarah West said:
I'm curious as to how it works?
The name of my form is 'form1', and the name of my checkbox
is called 'checkbox', how can you refer to it in such generic
terms eg 'box.form.<element>.<value>'?

box is a reference to a form element (the checkbox, the - this - object
within the onclick event handling method) and all form elements have a
property with the name "form" that is a reference to the form that
contains them.

So the onclick function passes the - setDefaults - function a reference
to the checkbox as - this -, the function receives that reference as
ts - box - parameter and can then refer to the containing form as -
box.form -, and can use that reference to the form exactly as it may use
any other reference to a form such as - document.forms['form1'] - .

Incidentally, "name" is not a good name for a form element as the form
object already has a property with the name "name" which holds the
string value provided in the HTML NAME attribute for the form ("form1").
Creating an element with the name "name" will result in the expected
string "name" property of the form being replaced with the reference to
the element. That is not a problem in this case as none of your code is
interested in the (original string) "name" property of the form, but
giving form elements NAME (or ID) attributes that correspond with
existing form element named properties is a habit that will eventually
come back and kick you. JavaScript is case sensitive and form property
names are entirely initial lower case so something as simple as always
making form element NAME attributes have initial capitals would be
sufficient to avoid any naming conflicts within the form.

Richard.

Set value after clicking in field	11	May 9, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
How to add dropdown selected data to table using jquery	2	Jul 2, 2022
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Checking dynamically populated data using ajax with user entered value	5	Apr 11, 2020
I dont get this. Please help me!!	2	Jan 24, 2023
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023
How to fetch database row and display in Qlabels with QcomboBox selected value in PyQt5	8	Jul 10, 2021

default selected item and field value

Sarah West

Lee

Sarah West

Richard Cornford

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads