How to design template...

cgm225 · July 31, 2009

My friend is currently using a word file with a bunch of blanks spots in it as a rough template for creating customized reports... yeah, pretty primitive. Within the file he has something like this:

"This is an examination of a ______ (child/adolescent/adult) ______ (male/female) of ______ (Caucasian/African American/Asian American/other (if other, state what race)) race."

Next to each of the blank spots, you can see there is a parenthetical with the potential options. Now, my friend has asked me if I can help him turn this into a more efficient online template with dropdown menus. Overall, I do not think this will be too hard, but I am not sure what to do with the "other" options. He has several blanks where, if he needs to select "other," he wants to be able to "free-text" in the content. How should I go about coding that? Do any of you have a better idea on how to make this word file an efficient template? Are there any already existing scripts/apps out there that address this type of project?

Ok, thanks in advance!

TheFilmGod · July 31, 2009

You'll need to use some creative javascript... jquery is great for stuff like this.

roopurt18 · July 31, 2009

Let's say you had the following markup:

<form id="frmExam" action="/exam.php" method="post">
    <p>
        This is an examination of a(n)
        <select id="selTarget" name="selTarget">
            <option value="child">child</option>
            <option value="adolescent">adolescent</option>
            <option value="adult">adult</option>
        </select>
        <select id="selGender" name="selGender">
            <option value="male">male</option>
            <option value="female">female</option>
        </select>
        of
        <select class="has_other" id="selRace" name="selRace">
            <option value="Caucasion">Caucasion</option>
            <option value="African American">African American</option>
            <option value="Asian American">Asian American</option>
            <option value="other">other</option>
        </select>
        <!-- assume class hidden means css: display: none; -->
        <input class="other_specifier" type="text" class="hidden" id="txtRace" name="txtRace" value="" size="10" />
        descent.
    </p>
<form>

With Dojo I would do something like:

// This is JavaScript
/**
* Event handler for elements with class="has_other"
*
* @param Event
*/
function event_HasOther_onChange( e ) {
  // e.target should be the SELECT element
  // We need the associated input
  var n = e.target.nextSibling;
  while( n && !dojo.hasClass( n, "other_specifier" ) ) {
    n = n.nextSibling;
  }
  // n should be the INPUT element following the SELECT element
  if( e.target.options[e.target.selectedIndex].value == "other" ) {
    dojo.removeClass( n, "hidden" );
  }else{
    dojo.addClass( n, "hidden" );
  }
}

dojo.addOnLoad( function() {
    // Attach event handlers
    dojo.query( ".has_other" ).forEach( function( n, i, all ) {
        dojo.connect( n, "change", "event_HasOther_onChange" );
    } );
} );

cgm225 · August 1, 2009

Thank you both so much for your replies. I have the following code, based on your example, but it does not seem to be working for me. Any ideas on what I am doing wrong? I think it is a CSS issue, but I am not sure.


<html>
<head>

<script>

// This is JavaScript
/**
* Event handler for elements with class="has_other"
*
* @param Event
*/
function event_HasOther_onChange( e ) {
  // e.target should be the SELECT element
  // We need the associated input
  var n = e.target.nextSibling;
  while( n && !dojo.hasClass( n, "other_specifier" ) ) {
    n = n.nextSibling;
  }
  // n should be the INPUT element following the SELECT element
  if( e.target.options[e.target.selectedIndex].value == "other" ) {
    dojo.removeClass( n, "hidden" );
  }else{
    dojo.addClass( n, "hidden" );
  }
}

dojo.addOnLoad( function() {
    // Attach event handlers
    dojo.query( ".has_other" ).forEach( function( n, i, all ) {
        dojo.connect( n, "change", "event_HasOther_onChange" );
    } );
} );

</script>

<style type="text/css">

input.other_specifier {
  display:none;
}
</style>

</head>

<body>

<form id="frmExam" action="/exam.php" method="post">
    <p>
        This is an examination of a(n)
        <select id="selTarget" name="selTarget">
            <option value="child">child</option>
            <option value="adolescent">adolescent</option>
            <option value="adult">adult</option>
        </select>
        <select id="selGender" name="selGender">
            <option value="male">male</option>
            <option value="female">female</option>
        </select>
        of
        <select class="has_other" id="selRace" name="selRace">
            <option value="Caucasion">Caucasion</option>
            <option value="African American">African American</option>
            <option value="Asian American">Asian American</option>
            <option value="other">other</option>
        </select>
        <!-- assume class hidden means css: display: none; -->
        <input class="other_specifier" type="text" class="hidden" id="txtRace" name="txtRace" value="" size="10" />
        descent.
    </p>
<form>

</body>

</html>

roopurt18 · August 2, 2009

<style type="text/css">

/*input.other_specifier {*/
.hidden {
  display:none;
}
</style>

<!-- assume class hidden means css: display: none; -->
<!-- I had the class attribute listed twice, it should be -->
        <input class="hidden other_specifier" type="text" id="txtRace" name="txtRace" value="" size="10" />

And you have to add Dojo to your project if you want to use it.

http://www.dojotoolkit.org/

cgm225 · August 2, 2009

Ok, I got it working. Thanks!!

I have the following::


<html>
<head>
<script type="text/javascript" src="dojo.js"></script>
<script>

// This is JavaScript
/**
* Event handler for elements with class="has_other"
*
* @param Event
*/
function event_HasOther_onChange( e ) {
  // e.target should be the SELECT element
  // We need the associated input
  var n = e.target.nextSibling;
  while( n && !dojo.hasClass( n, "other_specifier" ) ) {
    n = n.nextSibling;
  }
  // n should be the INPUT element following the SELECT element
  if( e.target.options[e.target.selectedIndex].value == "other" ) {
    dojo.removeClass( n, "hidden" );
  }else{
    dojo.addClass( n, "hidden" );
  }
}

dojo.addOnLoad( function() {
    // Attach event handlers
    dojo.query( ".has_other" ).forEach( function( n, i, all ) {
        dojo.connect( n, "change", "event_HasOther_onChange" );
    } );
} );

</script>

<style type="text/css">

/*input.other_specifier {*/
.hidden {
  display:none;
}
</style>

</head>

<body>

<form id="frmExam" action="/exam.php" method="post">
    <p>
        This is an examination of a(n)
        <select id="selTarget" name="selTarget">
            <option value="child">child</option>
            <option value="adolescent">adolescent</option>
            <option value="adult">adult</option>
        </select>
        <select id="selGender" name="selGender">
            <option value="male">male</option>
            <option value="female">female</option>
        </select>
        of
        <select class="has_other" id="selRace" name="selRace">
            <option value="Caucasion">Caucasion</option>
            <option value="African American">African American</option>
            <option value="Asian American">Asian American</option>
            <option value="other">other</option>
        </select>
        <!-- assume class hidden means css: display: none; -->
        <!-- I had the class attribute listed twice, it should be -->
        <input class="hidden other_specifier" type="text" id="txtRace" name="txtRace" value="" size="10" />
        descent.
    </p>
<form>

</body>

</html>

Now, what if I have multiple drop down menus with "other." Can I easily recycle the code so I can make input fields appear multiple times on the same page?

roopurt18 · August 2, 2009

Create a new SELECT tag.

Give it a class="has_other"

Add an option value="other" to it

Add an input after the new select.

Give the input class="hidden other_specifier"

Refresh the page and it should just work. As long as the input comes in the DOM after the select and you assign the proper classes it'll just work.

Sign In

How to design template...

Recommended Posts

cgm225

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

roopurt18

Link to comment

Share on other sites

cgm225

Link to comment

Share on other sites

roopurt18

Link to comment

Share on other sites

cgm225

Link to comment

Share on other sites

roopurt18

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information