(Get Attention Ticker for your web site)

Using JavaScript To Change Form Fields On-The-Fly

By Will Bontrager

Sometimes a hidden (or other) form field needs to have its value changed depending on which, if any, radio button is checked or something is typed into a certain form field, or if other fields are checked or selected.

We'll use a form created for Master Form V4 as our example.

Let's suppose email template emailone.txt will be used when generating the email after the form is submitted. Let's further suppose one or two additional email templates will be used, depending on which radio button is checked and whether or not a text field contains information.

As an aside, the form tag must have a name, like name="myform" for example. The name will be used by the JavaScript when the submit button is clicked.

Here is our example form, complete with JavaScript to add the email template information:

<script type="text/javascript" language="JavaScript"><!--
function CheckFields() {

// Radio button checked/unchecked values are in an array because there is more than one form field with the same name.

// Add an email template information if a radio button is checked.
if(document.myform.setone[0].checked == true) { document.myform.emailtemplate.value += ',emailrA.txt'; }
else if(document.myform.setone[1].checked == true) { document.myform.emailtemplate.value += ',emailrB.txt'; }
else if(document.myform.setone[2].checked == true) { document.myform.emailtemplate.value += ',emailrC.txt'; }

// Add an email template if the text field contains information.

if(document.myform.firstname.value.length > 0) { document.myform.emailtemplate.value += ',emailT.txt'; }

}
//--></script>


<form name="myform" action="MasterFormV4.cgi">
<input type="hidden" name="emailtemplate" value="emailone.txt">
<input type="radio" name="setone" value="blue">Blue
<input type="radio" name="setone" value="red">Red
<input type="radio" name="setone" value="yellow">Yellow
<br />
Name: <input type="text" name="firstname" size="33">
<input type="submit" onclick="CheckFields(); return true;" value="Click when ready">
</form>

To test the form and JavaScript:

Change the type="hidden" name="emailtemplate" field to type="text". This will let you see the values the name="emailtemplate" field contains and whether or not the value changes when the submit button is clicked.
Add the onsubmit="return false;" attribute to the form tag. This will prevent the form from submitting to Master Form V4 while you're doing this testing.

The first 2 lines of the form would then look something like this.

If the text field isn't large enough to display all of the name="emailtemplate" value, it can be given a attribute size="100", or other size, so less scrolling is required to view the last bit of the value.

After testing is complete, reverse the above changes.

Your're good to go :)

May 26, 2006

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

Rate this blog post.
No page reload!

WillMaster > Blog > JavaScript

Subscribe to
the Possibilities Ezine

RSS feed links

Blog Article Categories

Using JavaScript To Change Form Fields On-The-Fly

WillMaster > Blog > JavaScript

Subscribe tothe Possibilities Ezine

RSS feed links

Blog Article Categories

Using JavaScript To Change Form Fields On-The-Fly

Subscribe to
the Possibilities Ezine