Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Javascript function to change form fields

Posted on 2012-03-12
9
Medium Priority
?
303 Views
Last Modified: 2012-03-13
Hi - I wonder if anyone can help with what is hopefully a simple javascript request - if such a thing exists!

What I want to do is to examine a pair of fields - lets call them F1 and F2 - both of which are select boxes and both of which can have the values of "Yes" and "No".

If F1 is set to "Yes" then F2 must be set to "No" and vice versa. Now, I could probably do this using the form name and form field names and so on via the onchange event, but it struck me that there must be some way of writing a generic script that would allow you to pass the relevant parameters and cause the setting of the companion field to be the opposite.

So, the script being called doesn't know the form name (or ID) and doesn't know the field names/ids and doesn't know the value pairs - these all being passed at onchange time.

Does anyone know how I pass the fields to the JS function? For example if I have:

<form name="form1">
  <select name="f1" OnChange="change_values(this)">
      <option value="Yes">Yes</option>
      <option value="No">No</option>
  </select>
  <select name="f2" OnChange="change_values(this)">
      <option value="Yes">Yes</option>
      <option value="No">No</option>
  </select>

Open in new window


And the javascript...

 <script type="text/javascript">
  function change_values(form_field)
  {
  if (formfield.form.f1.value == "Yes"){
  formfield.form.f2.value = "No"
  }
else{
  formfield.form.f2.value = "Yes"
  }
  }
  </script>

Open in new window


But I don't want to hard code F1 or F2 or "Yes" or "No" and my JS is pretty basic!

Many thanks
0
Comment
Question by:highlawn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 13

Expert Comment

by:ansudhindra
ID: 37712549
if you don't want to hard code 'F1' and 'F2',  still you can pass references to the javascript function. In this case you need to use some server side coding (languages like ColdFusion, PHP, asp etc)  for dynamic name.

but if it is a static html page then you have to hard code.
0
 

Author Comment

by:highlawn
ID: 37713157
Sorry, I should have said that. I am coding everything using PHP - with which I am very familiar - and I want to generate the requisite javascript call within the PHP.

I would rather expect though, that the javascript function could be written once and included in the <head> of the page and then called via the PHP code as you are creating the <select> statements.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 37713313
I would firstly use radios since that makes more sense when you have mutually exclusive field

Here is an example on how it could be done:

DEMO

window.onload=function() {
    change_values(<?php echo "document.forms[0]".$field1Name.",document.forms[0].".$field2Name; ?>);
}    

function change_values(a,b) {
    b.selectedIndex=!a.selectedIndex;
}    

<form name="form1">
  <select name="<?php echo $field1Name; ?>" onChange="change_values(this,this.form.<?php echo $field2Name; ?>)">
      <option value="Yes">Yes</option>
      <option value="No">No</option>
  </select>
  <select name="<?php echo $field2Name; ?>" onChange="change_values(this,this.form.<?php echo $field1Name; ?>)">

      <option value="Yes">Yes</option>
      <option value="No">No</option>
  </select>
</form>  

Open in new window

0
Vim Reference Guide

Vim is a powerful text editor favored by many sysadmins and developers - here are some commands that you'll want to keep in your back pocket!

 

Author Comment

by:highlawn
ID: 37716117
OK - that looks good. I fully understand the html - so, no issues there.

I think I understand the function - except I am not familiar with the selectedIndex property. Can you expand on what this is and when it can be used? Many Thanks.

Also, why do we need the window.onload piece? What if this form isn't loaded?

Cheers
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37716281
I am using a trick since the selected index (index of the selected value in the drop down) is either 0 (yes) or 1 (no) in your case and !1 is 0 (NOT 1)  and !0 is 1so I negate the othe select on change
The on load is to initialise this situation so if select1 is yes, the script set select2 to no
0
 

Author Comment

by:highlawn
ID: 37716346
OK - many thanks. Just what I was looking for. Perhaps you could indulge me just a touch further.

I'm assuming that "this" refers to the current field on the current form in this particular instance - i.e. the object with focus? If that is the case, then how does "this.form.field2" refer to the other field?

I would have thought that would be the equivalent of writing this.form.field1.form.field2 - if you see what I mean. Or does the "this" refer to a higher object?

Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37716573
this is the select this.form is the select's parent form and this.form.field2 is the sibling field where field2 is the actual field name but this.form are generic abstract object identifiers hence the php only tells the field name
0
 

Author Comment

by:highlawn
ID: 37716605
OK - I think I get that. Many thanks for your help. I'll award the points.
0
 

Author Closing Comment

by:highlawn
ID: 37716611
Neat and simple and what I was after
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This tutorial will discuss fancy secure registration forms, with AJAX technology support. In this article I assume you already know HTML and some JS. I will write the code using WhizBase Server Pages, so you need to know some basics in WBSP (you mig…
It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question