<?php /*/ test_FormFieldGenie.js written by and Copyright © 2010, 2012, 2015 Joe Golembieski, SoftMoon WebWare
See http://softmoon-webware.com/FormFieldGenie-js_instructions.htm
See http://softmoon-webware.com/code/
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/> /*/
// tab spacing=2 editor width=120 auto-word-wrap=no character-encoding= UTF-8
?>
Test popNewField.js
type='text/javascript' src='JS_toolbucket/SoftMoon-WebWare/FormFieldGenie.js'
type='text/javascript'
// With this demo, we create one instance and pass options to match the application.
// You can also create individual instances each with their own options by passing in the options to the constructor
// like this: Genie1=new FormFieldGenie({ ...options...}); Genie2=new FormFieldGenie({ ...other options... });
// You can also pass in options to the constructor AND the method, with the method options taking precidence.
// By creating individual instances with different options, you clean up your HTML by simplifying the event handler
// code; however, it may be easier to see and comprehend what is going on by including the options object in the
// event handler code that calls the FormFieldGenie methods, as I did with this demo.
// This demo does not show off the Genie's ability to insert or delete. HTML forms that need that ability must use
// onclick event handlers that have the same options object as the onblur handler attached to the form element itself,
// the difference being that the options object for the insert/delete must have one additional property, "doso" that
// flags to do the inserting or deleting. In this situation, it makes sence to create an individual instance, passing
// the main body of the options object to the constructor, then simply pass an aditional option to the method
// like this: Genie=new FormFieldGenie({ ...options... });
// and: <div><input type='text' onblur='Genie.popNewField(this.parentNode)' /><span onclick='Genie.popNewField(this.parentNode, {
doso:"insert"})'>insert above</span></div>
var Genie=new SoftMoon.WebWare.FormFieldGenie;
fieldset { border: 1px solid #FFFFFF; display: inline-block; margin: .618em 2em .382em 0; }
div { background-color: #000020; border: 1px solid #FF0000; }
table { border: 1px solid #FFFFFF; margin-bottom: 1.618em; }
caption { font-weight: bold; }
table fieldset { margin: 0; }
#family td { width: 50%; border: 1px solid #0000FF; }
#pets td { width: 25%; }
.list label, #family label { display: block; }
.books { position: relative; padding-bottom: 4em; }
.below { position: relative; display: inline-block; width: 13em; }
.below input, .below textarea { position: absolute; top: 1.618em; left: 0 }
style='color: #00FF00; background-color: #000000;'
<?php if (isset($_POST['submit'])) echo "<h1>Var Dump</h1>\n<pre>",var_dump($_POST),"</pre>\n"; ?>
Additional fields appear automatically.
Previously filled fields disappear when cleared. Try using the TAB key to navigate.
This demo does not record your answers or “do” anything.
When submitted, this form simply spits back your answers formatted as the server receives them.
Feel free to make up anything you like, or use the personal info of the guy in the cubicle next to you
to try out the features of this JavaScript Class: FormFieldGenie.js
action="test_FormFieldGenie-js.php" method='post'
Enter all the names you use
You may enter up to 10 names, one per box:
name='yourName[title][]'
Mr.
Ms.
Mrs.
Miss
selected='selected'The Honorable
the deplorable
first type='text' name='yourName[first][]' onkeydown='Genie.catchTab(event)' onfocus='Genie.tabbedOut=false'
onblur='Genie.popNewField(this.parentNode.parentNode, {maxTotal: 10, checkForEmpty: "all"})'
last type='text' name='yourName[last][]' onkeydown='Genie.catchTab(event)' onfocus='Genie.tabbedOut=false'
onblur='Genie.popNewField(this.parentNode.parentNode, {maxTotal: 10, checkForEmpty: "all"})'
Enter the nicknames that others call you. Select the appropriate attributes of each nickname.
Don't be shy and show your maturity: include all those you don't like.
style='display: inline-block;'favorable?
type='radio' name='Nickname[0][isliked]' value='yes' checked='ckecked' yes
type='radio' name='Nickname[0][isliked]' value='no' no
nickname type='text' name='Nickname[0][called]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode.parentNode)' onfocus='Genie.tabbedOut=false'
type='checkbox' name='Nickname[0][lifestage][]' value='childhood' from childhood
type='checkbox' name='Nickname[0][lifestage][]' value='college' from college
type='checkbox' name='Nickname[0][lifestage][]' value='adult' from adulthood
id='family'Enter your family tree
your kidsyour grandkids from each kid
<!-- note how the indxTier option below yields no affect on kids[], but does for grandkids[0][] -->
kid name type='text' name='kids[]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode.parentNode.parentNode, {indxTier: 1})'
onfocus='Genie.tabbedOut=false'
grandkid name type='text' name='grandkids[0][]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode)' onfocus='Genie.tabbedOut=false'
id='pets'Enter your pets’ names
CatsDogsBirdsFish
favorite? type='radio' name='catNames[favorite]' value="[0]"
type='text' name='catNames[]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode)' onfocus='Genie.tabbedOut=false'
favorite? type='radio' name='dogNames[favorite]' value="[0]"
type='text' name='dogNames[]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode)' onfocus='Genie.tabbedOut=false'
favorite? type='radio' name='birdNames[favorite]' value="[0]"
type='text' name='birdNames[]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode)' onfocus='Genie.tabbedOut=false'
favorite? type='radio' name='fishNames[favorite]' value="[0]"
type='text' name='fishNames[]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode)' onfocus='Genie.tabbedOut=false'
class='list'Enter your favorite types of Music
(one per box)
type='checkbox' name='music[1]' value='Jazz' Jazz
type='checkbox' name='music[2]' value='Rock' Rock
type='checkbox' name='music[3]' value='Blues' Blues
type='checkbox' name='music[4]' value='Vocals' Vocals
type='checkbox' name='music[5]' value='Country' Country
<!-- here we leave room for music[6] to music[19] for future expansion of defaults -->
<!-- and we start again at [20] to reduce the need for our scripts to be updated in the future -->
type='text' name='music[20]' style='display: block' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this)' onfocus='Genie.tabbedOut=false'
class='list'Enter your favorite bands, most favorite first
type='text' name='favoriteBands[first]' style='display: block' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this, {updateName: SoftMoon.WebWare.FormFieldGenie.updateNameByList})' onfocus='Genie.tabbedOut=false'
Enter your favorite movies
style='display: inline'Title
type='text' name='favoriteMovies[i][title]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode.parentNode, {updateName: SoftMoon.WebWare.FormFieldGenie.updateNameByList, cbParams: Soft
Moon.WebWare.FormFieldGenie.RomanOrder})'
onfocus='Genie.tabbedOut=false'
Enter the actor's names
type='text' name='favoriteMovies[i][actors][]' style='display: block' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this)' onfocus='Genie.tabbedOut=false'
// <![CDATA[
PopBookOptions={
maxTotal: 7,
checkForEmpty: "some",
checkField: 1, //remember this is a ZERO based count
updateName: SoftMoon.WebWare.FormFieldGenie.updateNameByList,
cbParams: {order: SoftMoon.WebWare.FormFieldGenie.RomanOrder.order, pcre: new RegExp(/_([a-z]+)/)} }
/*close CDATA ]]>*/
Enter your favorite books
class='books'
class='below'Author
type='text' name='favoriteBooks_i_[author]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode.parentNode, PopBookOptions)'
onfocus='Genie.tabbedOut=false'
class='below'Title
name='favoriteBooks_i_[title]' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode.parentNode, PopBookOptions)'
onfocus='Genie.tabbedOut=false'
class='below'give a short summery
name='favoriteBooks_i_[summery]' style='display: block'
Enter your favorite cars and tell us about your feelings on them. One car per text-box.
optional Year type='text' name='year1618_314159_9' size='4' maxlength='4'
type='text' name='cars1618_314159_9' onkeydown='Genie.catchTab(event)'
onblur='Genie.popNewField(this.parentNode, {checkForEmpty: "one", checkField: 1, focusField: 1})' onfocus='Genie.tabbedOut=false'
name='thoughts1618_314159_9'
Click type='submit' name='submit' value='submit this form' to see the resulting data format.