Javascript form

Computing.Net > Forums > Web Development > Javascript form

Original Message

Name: mie2com
Date: November 19, 2006 at 09:53:53 Pacific
Subject: Javascript form
OS: WinXP
CPU/Ram: Pentium III
Model/Manufacturer: Sony

Comment:

//Here's form example;
<form>
<table>
<tr>
<td>
Description
</td>
<td>
Country
<input type="checkbox" />
Fixed Selection?
</td>
<td>
Color
<input type="checkbox" />
Fixed Selection?
</td>
</tr>
<tr>
<td>
David
</td>
<td>
<selection>
<option>Country 01</option>
<option>Country 02</option>
</selection>
</td>
<td>
<option>Color X</option>
<option>Color Y</option>
</td>
</tr>
<tr>
<td>
Peter
</td>
<td>
<selection>
<option>Country 01</option>
<option>Country 02</option>
</selection>
</td>
<td>
<option>Color X</option>
<option>Color Y</option>
</td>
</tr>
</table>
</form>
//It should looks like this;
Description Country []Fixed Selection? Color []Fixed Selection?
David [select] [select]
Peter [select] [select]

//How to make it work like this?
Description Country [X]Fixed Selection? Color []Fixed Selection?
David [Country 01] [Color X]
Peter [Country 01] [Color Y]
//ie. if the checkbox is checked, and one description selected, it will apply to all descriptions automatically.
//helps and guides would be appreciated. i'm still new to javascript, its quite difficult, and the only script i successfully wrote myself, by coincidence, is this;
<script type="text/javascript">
function tr(){
document.getElementById('tr').value = 'hello world';
}
</script>
<input type="text" id='tr'>
<input type='button' onclick='tr()' value='hello world'/>
//ie. onclick button will result 'hello world' to appear in input text.

Report Offensive Message For Removal

Response Number 1

Name: mie2com
Date: November 19, 2006 at 15:08:47 Pacific
Subject: Javascript form

Reply: (edit)

// i have no choice at the moment, but to use 'readonly' text input which is pass by selected options.
// is there any way to make this code more simple?
function func(str) {
document.form_name.input_name.value = str;
document.form_name.input_name2.value = str;
document.form_name.input_name3.value = str;
}
function func2(str) {
document.form_name.input_name2.value = str;
}
function func3(str) {
document.form_name.input_name3.value = str;
}

Report Offensive Follow Up For Removal

Response Number 2

Name: mie2com
Date: November 19, 2006 at 16:26:20 Pacific
Subject: Javascript form

Reply: (edit)

// i need help, i write this..
function func(str) {
document.form_name.input_name.value = str;
document.form_name.input_name2.value = str;
document.form_name.input_name3.value = str;
}
// to this..
function func(str) {
var func = new Array()
func[0] = "input_name"
func[1] = "input_name2"
func[2] = "input_name3"
for(var i=0; i<func.length; i++)
document.form_name.func[i].value = str;
}
// but it's not working..
// how to make it simple?

Report Offensive Follow Up For Removal

Response Number 3

Name: Michael J (by mjdamato)
Date: November 19, 2006 at 20:53:01 Pacific
Subject: Javascript form

Reply: (edit)

Your "questions" are confusing to say the least. From what I can understand you have three different selections for country and color. Also you have two checkboxes to indicate wether the country or color should be the same for all three.
So, if a checkbox is selected you want to set the appropriate select list options for #2 and # to be the same as #1.
Try the following code:
<html><head>
<script>
function fixed(type) {
frm = document.formname;
mode = frm[type].checked;
if(mode) {
frm[type+'2'].value = frm[type+'1'].value;
frm[type+'3'].value = frm[type+'1'].value;
}
frm[type+'2'].disabled = mode;
frm[type+'3'].disabled = mode;
}
</script>
</head>
<body>
<form name=formname>
Country
<input type="checkbox" name="country" onclick="fixed('country');" />
Fixed Selection?

Color
<input type="checkbox" name="color" onclick="fixed('color');" />
Fixed Selection?

Country 1
<select name="country1" onchange="fixed('country');">
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>
Color 1
<select name="color1" onchange="fixed('color');>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>

Country 2
<select name="country2" readonly>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>
Color 2
<select name="color2">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>

Country 3
<select name="country3">
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>
Color 3
<select name="color3">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
</form>
</body>
</html>
Michael J

Report Offensive Follow Up For Removal

Response Number 4

Name: mie2com
Date: November 20, 2006 at 04:27:43 Pacific
Subject: Javascript form

Reply: (edit)

Thank you Michael J. Exactly as what I looking for. I was writing different method with a combination of input-text and select/option, which is .. *headache*..
I'll be using this method and sorry for confusing questions. :)

Report Offensive Follow Up For Removal

Response Number 5

Name: mie2com
Date: November 20, 2006 at 05:06:01 Pacific
Subject: Javascript form

Reply: (edit)

i would like to understand how the javascript work, what does it mean [type+1] [type+2]?

Report Offensive Follow Up For Removal


JavaScript help please! JaverScript Form Help! Creating javascript arrays in forms javascript within a form JavaScript Validation - Form Action	Javascript, div, visibility, and IE Javascript DOM Tutorial Javascript - SN u wud be useful Get Method with javascript array Javascript download menu problems

Response Number 6

Name: Michael J (by mjdamato)
Date: November 20, 2006 at 08:48:21 Pacific
Subject: Javascript form

Reply: (edit)

"i would like to understand how the javascript work, what does it mean [type+1] [type+2]?"
I'm using the same function for both colors and countries. So, I pass a 'type' to the function: either country or color.
Then in the script I create a form object:
frm = document.formname;
Now I can reference the form fields as array elements of the form object in this manner:
frm['fieldName']
Now, since I have named all my fields country1, country2, country3, color1, color2, color3 I can use the 'type' variable to dynamically refreence the corrct fields.
So, let's assume type = 'country' and we have this line of code:
frm[type+'2'].value = frm[type+'1'].value;
When you replace type with it's value you get this:
frm[country2].value = frm[country1].value;
Michael J

Report Offensive Follow Up For Removal

Response Number 7

Name: mie2com
Date: November 20, 2006 at 11:17:44 Pacific
Subject: Javascript form

Reply: (edit)

i understand. this means select element must be name by number such as name1, name2, and etc.
if i have large number of select elements, 17 for example, that would be a long list for script. i try to loop the script like this.. but its not working..
<script>
function fixed(type) {
frm = document.formname;
mode = frm[type].checked;
if(mode) {
for (a = 1; a <= 17; a++)
{
frm[type+'a'].value = frm[type+'1'].value;
}
}
for (b = 1; b <= 17; b++)
{
frm[type+'b'].disabled = mode;
}
}
</script>

Report Offensive Follow Up For Removal

Response Number 8

Name: Michael J (by mjdamato)
Date: November 20, 2006 at 14:28:11 Pacific
Subject: Javascript form

Reply: (edit)

"but its not working.."
That's not very descriptive. You should always include any error messages or any activity that is occuring.
I wrote the script to be as "automated" as possible. So, fields must be named in a certain manner for it to work. You can certainly go to a method where the fields are not as scrictly controlled, but that would require more coding.
I cant see your form so I may be stating things that you are already doing.
1) The checkbox fields MUST be named the same as the select fields but w/o the numeric identifier.
2) You MUST include the correct 'type' in the function call
3) Your for loops should start at 2 not 1. Doesn't make sense to set field 1 to itself.
4) Your main problem is where you actually set the values
frm[type+'a'].value = frm[type+'1'].value;
and
frm[type+'b'].disabled = mode;
By including 'a' and 'b' within quotes you are appending the strings 'a' and 'b' to the variable type. You need to write them this way:
frm[type+a].value = frm[type+'1'].value;
and
frm[type+b].disabled = mode;
Michael J

Report Offensive Follow Up For Removal

Response Number 9

Name: mie2com
Date: November 21, 2006 at 08:05:26 Pacific
Subject: Javascript form

Reply: (edit)

I apologise for lack of error descriptions. I re-write for loops without quotes and the script perform well with 'select input' and 'checkbox input'.
It does work with 'text input' , the only thing is, it only change after a mouse click. I'm researching for alternatives to sort this.
I've sent the current form sample to your email.

Report Offensive Follow Up For Removal

Response Number 10

Name: Michael J (by mjdamato)
Date: November 21, 2006 at 10:33:08 Pacific
Subject: Javascript form

Reply: (edit)

Not sure what you mean by "it only change after a mouse click". It works fine for me when I change the value - no mouse click needed since you are using the onchange event. Perhaps it is an issue in the browser you are using. Try using the onblur even for the text fields.
Michael J

Report Offensive Follow Up For Removal

Response Number 11

Name: mie2com
Date: November 21, 2006 at 13:56:12 Pacific
Subject: Javascript form

Reply: (edit)

I've send a further example to your email. It's a combination of text input and button input. The button function as a color picker. Text input is where the value of the color will be entered, via button.
*in sample, button value ='Pick'
When 'fixed' checkbox is checked, text input no.2++ as usual will be disabled. Upon selecting a color via button, it only entered to the first text input. The checkbox must be 're-checked' once again and then all the text input will be the same as text input no.1.
This would be confusing for users.
Other alternative way would be, via the button itself. This mean, when 'fixed' is checked, button for text input no.1 will behave differently using 'if else' statement, i guess. 'If' checkbox is checked, it will send value to all input, 'else' it only send to input no.1 only.
That is the only idea I have right now to sort out. To change the behaviour would start in 'line 128'
document.forms[0].cp_color1
if it changes to;
document.forms[0].cp_color2
it will send to input no.2
However, when i change 'line 128' to;
a<=5
..document.forms[0].cp_color"+a+"...
the form does not loop and not appear.
when i change 'line 128' to;
a=5
..document.forms[0].cp_color"+a+"...
it only send to input no.5
My problem right now is, is it possible to make all text input entered via button 1 only? If its possible, than maybe i could think of 'if else' approach.

Report Offensive Follow Up For Removal

Response Number 12

Name: Michael J (by mjdamato)
Date: November 21, 2006 at 15:58:57 Pacific
Subject: Javascript form

Reply: (edit)

You need to take some time with your code. The fixed function has a small section that is trying to set fields as fixed, but seeing as there is only 1 checkbox, I'm not sure what it's doing.
Also, that function should also enable/disable the buttons for items 2-5. By adding the line in bold below:
=====BEGIN CODE======
function fixed(type) {
frm = document.formname;
mode = frm[type].checked;
if(mode) {
for (a = 2; a <= 5; a++) {
frm[type+a].value = frm[type+'1'].value;
}
// for (b = 2; b <= 5; b++) {
// frm[type+b].checked = frm[type+'1'].checked;
// }
}
for (c = 2; c <= 5; c++)
{
frm[type+c].disabled = mode;
frm['color'+c].disabled = mode;
}
}
=====END CODE======
To fix the problem you described all you need to do is add a call to the fixed function at the end of the pickColor function like this "fixed('cp_color');"
however, with what you are doing now I would have written the function completely different than I had before.
Michael J

Report Offensive Follow Up For Removal

online password generator

Rotating Picutres ???

Use following form to reply to current message:

Name: From My Computing.Net Settings E-Mail: From My Computing.Net Settings Subject: Javascript form

Comments:

  Homepage URL (*): 
Homepage Title (*): 
         Image URL:

start macro when selected

Slimed by Malware!

Mother Board

how i Pass my IETE exams

No boot device found

All Posts Awaiting Replies