The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> E-mail form html, Use of option value and input id tags...?
goosenoose
post Aug 16 2010, 05:17 PM
Post #1





Group: Members
Posts: 5
Joined: 16-August 10
Member No.: 12,526
Hello,

I'm robin and I was recently assigned as webmaster for a school organization I'm a part of. I am familiar with rudimentary HTML tags but the following has been giving me a migraine over the day of trying to figure it out.

Some background on the excerpted code... I've pared it down to show what I'm working with (changed e-mails and such). Otherwise, it is as it appears on our website. What I would like to know is if the option value and input id tags could be altered to accept string values (such as SchoolA or SchoolB) so that upon selecting one of the option boxes, it would select any corresponding entries with a SchoolA/B input id.

The function I want is like how one can select posts by meta tags with blogs. Except in this case, that functionality will be applied to help users select people/e-mail groups they want to message through this form.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Blue Wings: Las Cruces Det 505 AFROTC</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta name="author" content="{{ Author }}" />
        <meta name="Keywords" content="{{ Keywords, comma-delimited }}" />
        <meta name="Description" content="{{ Description }}" />
        <meta name="robots" content="all" />
        <meta name="MSSmartTagsPreventParsing" content="true" />
            <link rel="Shortcut Icon" type="image/x-icon" href="favicon.ico" />
        <link rel="stylesheet" type="text/css" href="../default.css" />
        
        <script LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Mike Elkins (m_c_elkins@hotmail.com) -->
<!-- Begin
  function selectivecheck(field, myselection)
    {
      var fieldid;
      var pos;
      var criteria;
      var strng;
      strng = myselection.value;

      for (i=0; i<field.length; i++)
        {
          if (strng=="all")
            {
            field[i].checked = true;
            }
          else
            {
              fieldid = field[i].id;
              pos = strng.substring(0,1);
              criteria = strng.substring(1,2);  //this gets the information we want to evaluate
              var check=fieldid.substring(pos,pos+1);
// document.write( check );
              check=check.substring(0,1);
              if (check==criteria)
                {
                  field[i].checked = true;
                }
              else
                {
                  field[i].checked = false; //you could leave this out if you don't want to

clear the check boxes
                }
            }
        }
    }
//  End -->
    </script>
<style type="text/css">
#email{
margin:0;
width:400px;
float:left;}
#list{
float:right;}
#sub{
clear:left;
}
    </style>        
        
</head>
<body class="bodylayout">
<div id="body">
<div id="header" align="center">
<br />
<img src="../images/useme.png"  />
<br />
</div>
<hr />
<div id="doc-layout">
<div id="indexnav">
<div id="navtop">
<div id="content1">
<!-- Content start here -->

<table cellpadding="15px">
<tr>
<td valign="top">

<!--19 July 2010, C/ Deguzman -->
<font color="red" align='center'>Notice: Fall 2010 contact info and roster currently undergoing

update -C/ Deguzman </font><br>

<!-- Here is where we use NMSU's cadet email file -->

<form method="POST" action="http://www.nmsu.edu/cgi-bin/afrotc/cadet_email.pl"

enctype="multipart/form-data">
<table class="news" width="400px" style="border-style="groove" frame="border" rules="none">
<tr><td>CC: </td><td><input type="text" name="Ccemail" value=" " size="20"></td>
<tr><td>From: (Enter your email address)</td><td><input type="text" name="From"

size="20"></td></tr>
<tr><td>Subject: </td><td><input type="text" name="Subject" size="20"></td></tr>
<tr><td colspan="2">Message: </td></tr>
<tr><td colspan="2"><textarea cols="50" rows="20" name="Comment"></textarea></td></tr>
<tr><td colspan="2">Attachment</td></tr>
<tr><td colspan="2"><input type="file" name="Attach" size="20"></td></tr>
</table>
</td>
<td valign="top">
<p>

<select size="1" name="mycombobox">
  <option value="all">Select All</option>
  <option value="none">Deselect All</option>

  <option>----------</option>
  <option value="NMSU">NMSU</option>
  <option value="UTEP">UTEP</option>


</select>
<br>

<input type="button" value="Select Group" onclick=" selectivecheck(this.form.list,

this.form.mycombobox)">
</p>
<p>



<input id="NMSU" type=checkbox name="list" value=apple@test.com>                        

apple<br>

<input id="UTEP" type=checkbox name="list" value=orange@test.edu>                 

orange<br>

<input id="NMSU,UTEP" type=checkbox name="list" value=apple@test.com>                        

banana<br>

<input id="NMSU,UTEP" type=checkbox name="list" value=orange@test.edu>                 

broccoli<br>

<input id="NMSU" type=checkbox name="list" value=apple@test.com>                        

lettuce<br>

<input id="UTEP" type=checkbox name="list" value=orange@test.edu>                 

pepper<br>

<input type="submit">
    </form>
    </td>
    </tr>
    </table>            


<!-- Content ends before this line -->    
<br /><br />

</div>

</div>
</div>
            
</body>
</html>


This post has been edited by goosenoose: Aug 16 2010, 05:35 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 16 2010, 06:16 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(goosenoose @ Aug 17 2010, 12:17 AM) *

What I would like to know is if the option value and input id tags could be altered to accept string values (such as SchoolA or SchoolB) so that upon selecting one of the option boxes, it would select any corresponding entries with a SchoolA/B input id.


Programmatically, yes. Not with only HTML. So I guess in a HTML email the answer is no. You could, theoretically, use JavaScript, but sensible users turn that off in their email clients and even with those that don't you would run into too much problems. Email clients aren't browsers, and compatibility issues are daunting enough already with browsers.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 17 2010, 05:10 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Aug 17 2010, 01:16 AM) *

Programmatically, yes. Not with only HTML. So I guess in a HTML email the answer is no. You could, theoretically, use JavaScript, but sensible users turn that off in their email clients and even with those that don't you would run into too much problems. Email clients aren't browsers, and compatibility issues are daunting enough already with browsers.

I don't think the OP wants to use it inside emails, but on an email form.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 17 2010, 06:04 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Oh. huh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
goosenoose
post Aug 17 2010, 06:20 AM
Post #5





Group: Members
Posts: 5
Joined: 16-August 10
Member No.: 12,526
QUOTE(Christian J @ Aug 17 2010, 04:10 AM) *

QUOTE(pandy @ Aug 17 2010, 01:16 AM) *

Programmatically, yes. Not with only HTML. So I guess in a HTML email the answer is no. You could, theoretically, use JavaScript, but sensible users turn that off in their email clients and even with those that don't you would run into too much problems. Email clients aren't browsers, and compatibility issues are daunting enough already with browsers.

I don't think the OP wants to use it inside emails, but on an email form.


^Yes. Sorry for the unclear language.

I have been getting a little closer to what I think I need using fieldsets and such.

I still have been having issues coming up with a option value / input id combination that would allow me to configure the selection of the 9 seperate groups I need selectable.

e.g.
CODE
<select id="emailGroups" name="mycombobox" multiple="multiple">
<option value="all">Select All</option>
<option value="none">Deselect All</option>
<option>----------</option>
<option disabled="1">Spectre</option>
<option disabled="11">Sentinel</option>
<option disabled="111">Trinity</option>
<option disabled="1111">Phoenix</option>
<option disabled="11111">POC</option>
<option>----------</option>
<option disabled="6">OPS</option>
<option disabled="7">MSG</option>
<option disabled="8">RRG</option>
<option>----------</option>
<option disabled="9">AAS</option>
<option disabled="10">Blue Knights</option>
</select>
<br>
<input type="button" value="Select Group" onclick="selectivecheck(this.form.list, this.form.mycombobox)">
</p>
<p>


edit: could someone explain how option values / input id selections work?

This post has been edited by goosenoose: Aug 17 2010, 06:41 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 17 2010, 06:46 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
QUOTE(goosenoose @ Aug 17 2010, 12:17 AM) *

What I would like to know is if the option value and input id tags could be altered to accept string values (such as SchoolA or SchoolB) so that upon selecting one of the option boxes, it would select any corresponding entries with a SchoolA/B input id.

No, since you must give elements on a page unique ID values. Also an ID attribute can only contain a single value, and commas are not allowed characters (see also http://www.w3.org/TR/html401/types.html#type-name ). But CLASS attributes may contains several values (separated by spaces), and you can use them on multiple HTML elements. This script looks for CLASS value matches:

CODE
<script type="text/javascript">
function selectivecheck(field, myselection)
{
    for (var i=0; i<field.length; i++)
    {

        if(myselection.value=="all")
        {
            field[i].checked = true;
        }

        else
        {
            if(field[i].className.indexOf(myselection.value)!=-1)
            {
                field[i].checked = true;
            }
            else
            {
                field[i].checked = false;
            }
        }
    }
}
</script>


Sample HTML:

CODE
<input class="NMSU" type=checkbox name="list" value=apple@test.com>

apple<br>

<input class="UTEP" type=checkbox name="list" value=orange@test.edu>

orange<br>

<input class="NMSU UTEP" type=checkbox name="list" value=apple@test.com>

banana<br>

<input class="NMSU UTEP" type=checkbox name="list" value=orange@test.edu>

broccoli<br>

<input class="NMSU" type=checkbox name="list" value=apple@test.com>

lettuce<br>

<input class="UTEP" type=checkbox name="list" value=orange@test.edu>

pepper<br>


A remaining problem is that selecting the "-----------" value unchecks the checkboxes too. Another issues is that users without javascript will see an unusable SELECT menu.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
goosenoose
post Aug 17 2010, 07:01 AM
Post #7





Group: Members
Posts: 5
Joined: 16-August 10
Member No.: 12,526
Hm... I think it would work without my having to go into using javascript (something even more unfamiliar to me--I'm pretty strapped for time at the moment unfortunately).

I've been changing the input id values to things like

CODE
<fieldset>
<legend>Spectre Flight</legend>
<input id=1 type=checkbox name="list" value=1@nmsu.edu>person 1<br>
<input id=11 type=checkbox name="list" value=2@nmsu.edu>person 2<br>
<input id=111 type=checkbox name="list" value=3@miners.utep.edu>person 3<br>
</fieldset>


I've gone off on a tangent with my goals--I think that if I can just find 8 unique input id numbers and option values which can successfully differentiate their selection, I'll have what I need.

(edit: this all has been a little fascinating though... : )

(edit 2: ... hmm... how would i that script though? would i simply append it prior to my form tags and then alter my input classes accordingly?)

This post has been edited by goosenoose: Aug 17 2010, 07:06 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 17 2010, 08:24 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
QUOTE(goosenoose @ Aug 17 2010, 02:01 PM) *

Hm... I think it would work without my having to go into using javascript

To tick checkboxes automatically from a SELECT menu on the same page you must use JS.

Returning to the basic functionality:

QUOTE
The function I want is like how one can select posts by meta tags with blogs. Except in this case, that functionality will be applied to help users select people/e-mail groups they want to message through this form.

You might create such groups without using JS like this, where (o) is a radio button:

CODE

(o) foo, bar, baz

(o) foo, bar

(o) foo, baz

(o) bar, baz

(o) foo

(o) bar

(o) baz

...but of course then the server-side script must sort it all out instead.

CODE
<input id=1

An ID cannot begin with number.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 17 2010, 08:35 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
QUOTE(goosenoose @ Aug 17 2010, 01:20 PM) *

I have been getting a little closer to what I think I need using fieldsets and such.

Fieldsets don't affect form functionality.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
goosenoose
post Aug 17 2010, 08:10 PM
Post #10





Group: Members
Posts: 5
Joined: 16-August 10
Member No.: 12,526
... i figured it out.

option value=01

0 = first location on input id
1 = value of first location

e.g.

input id=10 would be activated by clicking on option value 01..

i'm fine now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
goosenoose
post Aug 17 2010, 08:11 PM
Post #11





Group: Members
Posts: 5
Joined: 16-August 10
Member No.: 12,526
thanks for all your help christian smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 17 2010, 08:46 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(goosenoose @ Aug 18 2010, 03:10 AM) *

... i figured it out.

option value=01

0 = first location on input id
1 = value of first location

e.g.

input id=10 would be activated by clicking on option value 01..

i'm fine now.



Eh? wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 04:08 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC