Jump to content

How to design template...

cgm225

By cgm225
in Application Design

 Share

Recommended Posts

cgm225 Advanced Member

cgm225

Posted
Posted

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!

 

Link to comment
https://forums.phpfreaks.com/topic/168276-how-to-design-template/
Share on other sites
roopurt18 Advanced Member

roopurt18

Posted
Posted

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 Advanced Member

cgm225

Posted
  • Author
Posted

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 Advanced Member

roopurt18

Posted
Posted 

<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 Advanced Member

cgm225

Posted
  • Author
Posted

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 Advanced Member

roopurt18

Posted
Posted

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.