Solved

Drop down List of #s determines # of rows of inputs- How?

Posted on 2009-05-20
85
519 Views
Last Modified: 2012-06-22
I would like to create a form in which a drop down list contains a list of #s from 1-100(or a variable number) and when you select a number from that drop down list is updates the end of the form to have X number of rows to enter info into.

(See the attached picture for a better look at what I am wanting)

Any ideas?
user-anime-form.jpg
0
Comment
Question by:musicmasteria
  • 43
  • 36
  • 3
  • +2
85 Comments
 
LVL 2

Expert Comment

by:quickcat88
ID: 24435118
1. Record all input values on the page.
2. Once dropbox onchange event hit, reload the page by proper number of EP textboxes.
3. Repopulate the previous input
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24435191
I'm trying to do this all dynamically with JavaScript. Reloading the page sounds like it would be better for a php thing.
0
 
LVL 4

Expert Comment

by:phpmonkey
ID: 24435227
I would do it like this,
Its untested so there might be some bugs.
<input type="text" id="episodeAmount" name="episodeAmount"/>

<div id="formContainer">

 <div id="startCollection">

  <input type="text" name="episodes[keys][]"/>

  <input type="text" name="episodes[values][]"/>

 </div>

</div>

<script type="text/javascript">
 

 function addEdpisodes(amount){

  

  for(var i=0;i<amount;i++)addCollection();
 

 }// end function
 

 function addCollection(){
 

  var collection = document.getElementById('startCollection').cloneNode(true);

  var container = document.getElementById('formContainer');
 

  collection.removeAttribute("id");

  collection.getElementsByTagName('input')[0].value = "";

  collection.getElementsByTagName('input')[1].value = "";

  container.addChild(collection);
 

 }// end function

</script>

Open in new window

0
 
LVL 4

Expert Comment

by:phpmonkey
ID: 24435302
you can by the way later do an
    array_combine($_POST['keys'],$_POST['values']);
in php so you get an assosiative array.

1 bug spotted too...


// Bad

collection.getElementsByTagName('input')[0].value = "";

//Good

collection.getElementsByTagName('input')[0].value = document.getElementById('formContainer').children.length;

Open in new window

0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24435325
First, thank you both for replying so quickly.

phpmonkey, your script is a little weird.. it just creates 3 input text boxes.
I see you defined the functions but i don't see them being used anywhere.
0
 
LVL 10

Expert Comment

by:MaxOvrdrv2
ID: 24435366
<select id="numbers" size="1" OnChange="JavaScript:LoadInputs();"><option value="1">... ... .. ... .. </select>
<div id="inputs"></div>

<script type="text/javascript">
function LoadInputs()
{
   document.getElementById("inputs").innerHTML="";
   for(i=1;i<=document.getElementById("numbers").value;i++)
   {
       document.getElementById("inputs").innerHTML+="<input type='text' id='text"+i+"' value=''><br>";
  }
return;
}
</script>
0
 
LVL 4

Expert Comment

by:phpmonkey
ID: 24435381
you can trigger it on the input of the number of amounts like this
<input onChange="addEpisodes(this.value);"/>

rememer to do amount--; in the addEpisodes function once becouse there is one default set of fields there on start. (that comes with the beeing fast)
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24435453
phpmonkey can you post a completed fixed script for me, i think i'm lost from all the changes you've made

MaxOvrdrv2, I think your script is almost what I am looking for as well but with yours it doesn't have a default of 1 and it only has 1 input box per row, i would need 2



Something I forgot to mention was that if it is possible I would like the episode number box to have the number in it already and read-only/grayed out
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24435510
How about something like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Q_24425534.html </title>

<script type='text/javascript'>

  var empty  = null

  var numSel = 10
 

  function AddRow() {

    var table = document.getElementById( 'MyTable' )

    var last  = null

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      last = empty.cloneNode( true )

      tbody.appendChild( last )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    return last

  }
 

  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      var val = sel.options[ SI ].value

      for ( var i = 0; i < val; i++ ) {

        var row = AddRow()

        var td  = row.children[ 0 ]

        if ( td.nodeName == 'TD' ) {

          td.firstChild.value = ( i + 1 )

        } else {

          alert( 'Unexpected nodeName.  Expected = "TD"  Actual = "' + td.nodeName + '"' )

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }
 

  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i ] = new Option( i + 1, i + 1 )

      }

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

</script>

</head>

<body>

  <select id='MySel' onchange='populate(this,"MyTable")'></select><br>

  <table id='MyTable'>

    <thead>

      <tr>

        <td align='center'>Ep #</td>

        <td>Embedded Object Code</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><input type='text' size='4' align='center' readonly></td>

        <td><input type='text'></td>

      </tr>

    </tbody>

  </table>

</body>

</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24435516
if you want 100 entries, change line 7 to:

var numSel = 100
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24435597
Very nice HonorGod but your script has a bug in it.

If you select say a 8 it will make 8 rows (yay) but if you change it to 2, it will only add 2 more rows to the end, leaving all the first ones :\

What I'd like it to do is delete all the last rows till it gets to the number selected and if possible detect if it is going to have to delete some content and ask them to confirm it.


And another BIG Thank You to all of you who
We are almost there. I can feel it!
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24435606
Of course, firefix has to be different... :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Q_24425534.html </title>

<script type='text/javascript'>

  var empty  = null

  var numSel = 100
 

  function AddRow() {

    var table = document.getElementById( 'MyTable' )

    var last  = null

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      last = empty.cloneNode( true )

      tbody.appendChild( last )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    return last

  }
 

  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      var val = sel.options[ SI ].value

      for ( var i = 0; i < val; i++ ) {

        var row = AddRow()

        if ( 'childNodes' in row ) {

          var td  = row.childNodes[ 1 ]

        } else {

          var td  = row.children[ 0 ]

        }

        if ( td.nodeName == 'TD' ) {

          td.firstChild.value = ( i + 1 )

        } else {

          alert( 'Unexpected nodeName.  Expected = "TD"  Actual = "' + td.nodeName + '"' )

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }
 

  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

</script>

</head>

<body>

  <select id='MySel' onchange='populate(this,"MyTable")'>

    <option>Pick...</option>

  </select><br>

  <table id='MyTable'>

    <thead>

      <tr>

        <td align='center'>Ep #</td>

        <td>Embedded Object Code</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><input type='text' size='4' align='center' readonly></td>

        <td><input type='text'></td>

      </tr>

    </tbody>

  </table>

</body>

</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24435615
Ah... Good catch... one moment please
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24435654
Like this?

Tested in IE, FireFox, & Chrome
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Q_24425534.html </title>

<script type='text/javascript'>

  var empty  = null

  var numSel = 100
 

  function AddRow() {

    var table = document.getElementById( 'MyTable' )

    var last  = null

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      last = empty.cloneNode( true )

      tbody.appendChild( last )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    return last

  }
 

  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      var val = sel.options[ SI ].value

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      while ( tbody.rows.length > 0  ) {

        tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

      }

      for ( var i = 0; i < val; i++ ) {

        var row = AddRow()

        if ( 'children' in row ) {

          var td  = row.children[ 0 ]

        } else {

          var td  = row.childNodes[ 1 ]

        }

        if ( td.nodeName == 'TD' ) {

          td.firstChild.value = ( i + 1 )

        } else {

          alert( 'Unexpected nodeName.  Expected = "TD"  Actual = "' + td.nodeName + '"' )

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }
 

  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

</script>

</head>

<body>

  <select id='MySel' onchange='populate(this,"MyTable")'>

    <option>Pick...</option>

  </select><br>

  <table id='MyTable'>

    <thead>

      <tr>

        <td align='center'>Ep #</td>

        <td>Embedded Object Code</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><input type='text' size='4' align='center' readonly></td>

        <td><input type='text'></td>

      </tr>

    </tbody>

  </table>

</body>

</html>

Open in new window

0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24435698
The bug is fixed yay!

Any chance on that confirm message and/or leaving the already entered content there if you change the number of inputs?
I mentioned it in my last comment.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24435776
oh, sorry, I missed that.

So, if they have selected 5, for example, and change it to 2,
you want a "are you sure?" confirmation?

Looking.
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24435796
Am I also interested in how that will post when submitted. I see none of the inputs have id's so php would have an interesting time reading the results from that.

As you saw in the picture I want to have a preview button that would open a popup box with all the post info organized like we would receive it so that they have a chance to see if any of the embed codes they submitted are broken.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24435800
Like this?
  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      var val = sel.options[ SI ].value

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      if ( tbody.rows.length > 0 ) {

        if ( !confirm( 'Are you sure?' ) ) {

          return

        }

      }

      while ( tbody.rows.length > 0  ) {

        tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

      }

      for ( var i = 0; i < val; i++ ) {

        var row = AddRow()

        if ( 'children' in row ) {

          var td  = row.children[ 0 ]

        } else {

          var td  = row.childNodes[ 1 ]

        }

        if ( td.nodeName == 'TD' ) {

          td.firstChild.value = ( i + 1 )

        } else {

          alert( 'Unexpected nodeName.  Expected = "TD"  Actual = "' + td.nodeName + '"' )

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24435824
If you want id values for the columns, what prefix do you want for each?

Do you want/need an id for the Ep #?  Or just the "Embedded Object Code"?

I presume that you want the id attribute on the input field...
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24435951
I'm sorry, I'm new to php and html forms and I'm not sure what I need in terms of id's.

As for the confirm thing, it looks alright. So I'm guessing the isn't a way to have it remember the old values...
I'm just worried that someone is going to fill it all out then realize they put 1 more ep then they should and when they go back and try to remove it they loose everything they entered.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24436142
Well, you could remember the values, but with the possibility of 100 value (or 200 if you need to keep the EP#'s), that might not fit in a cookie (since they are limited to 4K).

So, you would have to do something like save it to a server DB... :-(

Do you have any working code that uses id attributes?

Could we pick something (e.g., EOC### == EOC001 .. EOC100)?
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24436349
How much do you think 4k could hold anyway?

No I don't have a working code already with ids. EOC### looks fine.

Lets see, I'm going to type out my thoughts....
We could have the # of eps POST to a $_POST['MySel']
$epnumber = $_POST['MySel'];
Then a while loop for each number 1-###
each with a $_POST['EOC###'] in it to find the embed code (the ep numbers wouldn't need id's)
$count1 = 1;
while ( $count1 <= $epnumber) {
$code_{$count1} = $_POST['EOC{$epnumber}']
}

.... it's a rough code
you probably know a better way
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24436991
I've gone through and made the form how I want it but I discovered something. Without a name="_____" on the inputs, nothing gets submit through GET (that I can see anyway). Id's are ignored as well it looks like.

Have you made any progress on the id (now 'name' i guess) thing HonorGod?

I have attached the code that I have so far
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Q_24425534.html </title>

<script type='text/javascript'>

  var empty  = null

  var numSel = 100

 

  function AddRow() {

    var table = document.getElementById( 'MyTable' )

    var last  = null

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      last = empty.cloneNode( true )

      tbody.appendChild( last )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    return last

  }

 

  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      var val = sel.options[ SI ].value

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      if ( tbody.rows.length > 0 ) {

        if ( !confirm( 'Are you sure you want to do this? Changing the # of Episodes will clear all rows! No going back 
 

after this!' ) ) {

          return

        }

      }

      while ( tbody.rows.length > 0  ) {

        tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

      }

      for ( var i = 0; i < val; i++ ) {

        var row = AddRow()

        if ( 'children' in row ) {

          var td  = row.children[ 0 ]

        } else {

          var td  = row.childNodes[ 1 ]

        }

        if ( td.nodeName == 'TD' ) {

          td.firstChild.value = ( i + 1 )

        } else {

          alert( 'Unexpected nodeName.  Expected = "TD"  Actual = "' + td.nodeName + '"' )

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }

 

  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

</script>

</head>

<body>

<h2>User Submit Anime Form</h2>

<p>Please fill out the following information about the Anime you wish to send us.</p>

<form action="form-test3.html" method="post">

  Anime Series Name: <input type="text" size="23" id="anime-name" name="anime-name"><br/>

  Please check one: <input type="checkbox" id="subbed" name="subbed"> Subbed <input type="checkbox" id="Dubbed" 
 

name="Dubbed"> Dubbed<br/>

  # of Episodes: <select id='MySel' name='MySel' onchange='populate(this,"MyTable")'>

    <option>Pick...</option>

  </select><br/>

  Special Notes:<br/>

  <textarea rows="3" cols="35" id="special-notes" name="special-notes"></textarea><br/>

  Who should we thank?: <input type="text" size="20" id="submitter" name="submitter"><br/>

  <br/>

  Once you are done filling in all the info above you can start adding episode info below.</br>

  <table id='MyTable'>

    <thead>

      <tr>

        <td align='center'>Ep #</td>

        <td>|  Embed/Object Code</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><input type='text' size='4' align='center' readonly></td>

        <td><input type='text'></td>

      </tr>

    </tbody>

  </table>

  <br/>

  Please fill out the entire form before submitting it. If you can't find all the<br/>

  episodes to submit to us, please provide at least 75% of the total episodes in the<br/>

  series before you submit the form, Thank you.<br/>

  <br/>

  Once you are ready you can either:<br/>

  <input type="submit" value="Preview Your Submission" onclick="return false;"> OR <input type="submit" value="SUBMIT FORM 
 

TO BLAZINANIME">

</form>

</body>

</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24437031
I had to get something to eat, and feed the kids.   So, no.  :-)

We can do name, or id attributes, whatever you want.

We could have all of the ECO input fields share the same name (e.g., "ECO"),
and each input field have a unique id attribute (e.g., "ECO###").

Let me take a look at doing that...
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24437047
Sorry, Embedded Object Code => EOC

Something like this perhaps?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Q_24425534.html </title>

<script type='text/javascript'>

  var empty  = null

  var numSel = 100
 

  function AddRow() {

    var table = document.getElementById( 'MyTable' )

    var last  = null

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      last = empty.cloneNode( true )

      tbody.appendChild( last )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    return last

  }
 

  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      var val = sel.options[ SI ].value

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      if ( tbody.rows.length > 0 ) {

        if ( !confirm( 'Are you sure?' ) ) {

          return

        }

      }

      while ( tbody.rows.length > 0  ) {

        tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

      }

      for ( var i = 0; i < val; i++ ) {

        var row = AddRow()

        row.id = row.id + ( 1000 + i ).toString().substr( 1 )

        if ( 'children' in row ) {

          var td  = row.children[ 0 ]

        } else {

          var td  = row.childNodes[ 1 ]

        }

        if ( td.nodeName == 'TD' ) {

          td.firstChild.value = ( i + 1 )

        } else {

          alert( 'Unexpected nodeName.  Expected = "TD"  Actual = "' + td.nodeName + '"' )

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }
 

  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

</script>

</head>

<body>

  <select id='MySel' onchange='populate(this,"MyTable")'>

    <option>Pick...</option>

  </select><br>

  <table id='MyTable'>

    <thead>

      <tr>

        <td align='center'>Ep #</td>

        <td>Embedded Object Code</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><input type='text' size='4' align='center' readonly></td>

        <td><input type='text' name='EOC' id='EOC'></td>

      </tr>

    </tbody>

  </table>

</body>

</html>

Open in new window

0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24437143
Hmm... probably should just have the name="EOC#"

Get returns something like this:
form-test3.html?anime-name=asdd&subbed=on&MySel=5&special-notes=asdf&submitter=dsfa&EOC=1&EOC=2&EOC=3&EOC=4&EOC=5

I assume POST would send the same values but not through the url of course.
As you can see, it does seperate each EOC but a PHP script reading the POST/GET would only be able to get the first EOC (or would it be the last... idk)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24437253
ooh... looking...
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24437509
Yup.  I made a boo boo.  Please forgive me.

While fixing it, I also took are of "keeping" the EOC values if you change the number of rows...

Check it out, and let me know
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Q_24425534.html </title>

<script type='text/javascript'>

  var empty  = null

  var numSel = 100
 

  function AddRow() {

    var table = document.getElementById( 'MyTable' )

    var last  = null

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      last = empty.cloneNode( true )

      tbody.appendChild( last )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    return last

  }
 

  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      var val = sel.options[ SI ].value

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      if ( val < tbody.rows.length ) {

        if ( !confirm( 'Are you sure?' ) ) {

          return

        }

      }

      while ( val < tbody.rows.length ) {

        tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

      }

      for ( var i = tbody.rows.length; i < val; i++ ) {

        var row = AddRow()

        var inp = []

        var kids = ( 'children' in row ) ? row.children : row.childNodes

        for ( var j = 0; j < kids.length; j++ ) {

          if ( kids[ j ].nodeName == 'TD' ) {

            var eoc = inp[ inp.length ] = kids[ j ].firstChild

            if ( eoc.nodeName == 'INPUT' ) {

              if ( eoc.id == 'EOC' ) {

                eoc.id += ( 1001 + i ).toString().substr( 1 )

              } else {

                eoc.value = ( i + 1 )

              }

            } else {

              alert( 'Unexpected nodeName.  Expected = "INPUT"  Actual = "' + eoc.nodeName + '"' )

            }

          }

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }
 

  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

</script>

</head>

<body>

  <select id='MySel' onchange='populate(this,"MyTable")'>

    <option>Pick...</option>

  </select><br>

  <table id='MyTable'>

    <thead>

      <tr>

        <td align='center'>Ep #</td>

        <td>Embedded Object Code</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><input type='text' size='4' align='center' readonly></td>

        <td><input type='text' name='EOC' id='EOC'></td>

      </tr>

    </tbody>

  </table>

</body>

</html>

Open in new window

0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24437574
Very nice on making it keep the old values. I knew you could do it!

However, you have it set to change the id to id="EOC001" id="EOC002"... etc. but it should be name="EOC001" or both really. The GET/POST still gets EOC=1&EOC=2$EOC=3

By the way, I'm not sure how to use a number like '001' in a while loop and have it count up '002','003',etc.

If I did something like:
$EOC{$count1};       //while $count='003' and yes this is a bad example of usage I know

$count1++;    //would this maintain the format '004' or would it go to '4' (in this case)

Thanks again for your help this far HonorGod. It means a lot to me :)
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24438162
I made a simple php script to accept the data for previewing.

As I expected, the '001' vs '1' makes the count break

Any ideas?
<?php

if ($_POST['anime-form'] != 'blazinanime'){

die('Sorry, No Form Info Submitted...');

}
 

$anime_name = $_POST['anime-name'];

$sub_dub = $_POST['sub-dub'];

$numberofeps = $_POST['MySel'];

$special_notes = $_POST['special-notes'];

$submitter_name = $_POST['submitter-name'];

$submitter_email = $_POST['submitter-email'];
 

$countep = 001;

while ($countep <= $numberofeps){

$ep{$countep} = $_POST['EOC{$countep}'];

$countep++;

}

echo $countep.'  <br/>';

echo '<br/>';
 

echo 'Anime Name: '.$anime_name.'<br/>';

echo 'Type: '.$sub_dub.'<br/>';

echo '# of Eps: '.$numberofeps.'<br/>';

echo 'Notes from submitter: '.$special_notes.'<br/>';

echo 'Submitted by: '.$submitter_name.'<br/>';

echo 'Their Email: '.$submitter_email.'<br/>';

echo '<br/>';

$echocount = 001;

while ($echocount <= $numberofeps){

echo 'Episode #: '.$echocount.'<br/>';

echo 'Code:<br/>'.$ep{$echocount}.'<br/>';

echo '<br/>';

$echocount++;

}

?>

Open in new window

0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24439847
Is this better?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Q_24425534.html </title>

<script type='text/javascript'>

  var empty  = null

  var numSel = 100
 

  function AddRow() {

    var table = document.getElementById( 'MyTable' )

    var last  = null

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      last = empty.cloneNode( true )

      tbody.appendChild( last )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    return last

  }
 

  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      var val = sel.options[ SI ].value

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      if ( val < tbody.rows.length ) {

        if ( !confirm( 'Are you sure?' ) ) {

          return

        }

      }

      while ( val < tbody.rows.length ) {

        tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

      }

      for ( var i = tbody.rows.length; i < val; i++ ) {

        var row = AddRow()

        var inp = []

        var kids = ( 'children' in row ) ? row.children : row.childNodes

        for ( var j = 0; j < kids.length; j++ ) {

          if ( kids[ j ].nodeName == 'TD' ) {

            var eoc = inp[ inp.length ] = kids[ j ].firstChild

            if ( eoc.nodeName == 'INPUT' ) {

              if ( eoc.id == 'EOC' ) {

                eoc.name = eoc.id += ( i + 1 )

              } else {

                eoc.value = ( i + 1 )

              }

            } else {

              alert( 'Unexpected nodeName.  Expected = "INPUT"  Actual = "' + eoc.nodeName + '"' )

            }

          }

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }
 

  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

</script>

</head>

<body>

  <select id='MySel' onchange='populate(this,"MyTable")'>

    <option>Pick...</option>

  </select><br>

  <table id='MyTable'>

    <thead>

      <tr>

        <td align='center'>Ep #</td>

        <td>Embedded Object Code</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><input type='text' size='4' align='center' readonly></td>

        <td><input type='text' name='EOC' id='EOC'></td>

      </tr>

    </tbody>

  </table>

</body>

</html>

Open in new window

0
 
LVL 10

Expert Comment

by:MaxOvrdrv2
ID: 24440122
a lot of people work at night apparently! hehe! anyway, glad you found an answer... mine would've worked just fine too... and adding/removing input boxes is super simple, layout as well, and post would've been easy to get via Request.Form()...

Anyway... glad to have helped in any way.

Cheers!
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24447718
Looks good HonorGod,
Only thing I notice is that when you go back in the browser to make a change all the other fields say filled but the drop down box returns to "Pick..." and all the episode field get cleared.
Other than that, It's exactly what I need.

Any chance I could get more help on the actual processing of the data that is set and the previewing of it as well? The preview would open a pop-up window with my current script (bellow) in it. The submit would have to have a way of sending the form with the same format as the preview but to an email.

I would also like help on making the form check if everything is filled out before it allows it to be submitted.

Do you feel up to it? Does anyone?

My current preview script:
The script reads the vars and writes everything out in an easy to see format.
<html>

<head>

<title>Anime Submission Preview</title>

<style type="text/css">

body{

background-color: grey;

color: white;

text-align: center;

}

#wrapper{

margin-left: 20%;

margin-right: 20%;

}

#anime-details{

border: 1px dotted #FFD700;

height: auto;

width: auto;

margin-bottom: 3px;

}

#submissions{

border: 1px dotted #7FFF00;

height: auto;

width: auto;

padding: 2px;

}

.video{

border: 1px dotted #7FFF00;

height: auto;

width: auto;

padding: 2px;

}

</style>

</head>

<body>

<div id="wrapper">

<h2>Anime Submission Form - Preview of Results</h2>

<br/>

<div id="anime-details">

<?php

if ($_POST['anime-form'] != 'blazinanime'){

die('Sorry, No Form Info Submitted...</div></div></body></html>');

}
 

$anime_name = $_POST['anime-name'];

$sub_dub = $_POST['sub-dub'];

$numberofeps = $_POST['MySel'];

$special_notes = $_POST['special-notes'];

$submitter_name = $_POST['submitter-name'];

$submitter_email = $_POST['submitter-email'];
 

$countep = 1;

while ($countep <= $numberofeps){

$ep{$countep} = $_POST['EOC'.$countep];

$countep++;

}
 

echo 'Anime Name: '.$anime_name.'<br/>';

echo 'Type: '.$sub_dub.'<br/>';

echo '# of Eps: '.$numberofeps.'<br/>';

echo 'Notes from submitter: '.$special_notes.'<br/>';

echo 'Submitted by: '.$submitter_name.'<br/>';

echo 'Their Email: '.$submitter_email.'<br/>';

echo '</div>';

echo '<div id="submissions">';

$echocount = 1;

while ($echocount <= $numberofeps){

$ep{$echocount} = stripcslashes($ep{$echocount}); 

echo '<div class="video">';

echo 'Episode #: '.$echocount.'<br/>';

echo 'Video Code:<br/>'.$ep{$echocount}.'<br/>';

echo '<input type="text" size="25" value="'.htmlspecialchars($ep{$echocount},ENT_QUOTES).'" onClick="highlight(this)"; readonly><br/>';

echo '</div>';

$echocount++;

}

?>

</div>

</div>

<script language="JavaScript"> 

function highlight(field) {

       field.focus();

       field.select();

}</script>

</body>

</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24449602
Since this deals with PHP, you will probably get a better answer, and faster by opening a new question in that zone.  I have not used PHP, so would be unable to answer those questions.  Sorry.

Can you explain, in more detail, what you mean when you say:

>> Only thing I notice is that when you go back in the browser to make a change all the other fields say filled but the drop down box returns to "Pick..." and all the episode field get cleared.

I presume that you meant "stay filled" instead of "say filled".  Other then that, I don't understand.
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24451704
I guess I probably should make a new question but I only have 40 points to do so :\

And sure I'll try and explain it better.

Yes I meant "stay filled".
So when you submit the form currently it goes to the preview.php page. Now if you see any quick errors you want to fix you press the browser's back button and most browsers remember what you had in the  input fields so they are all filled like you never submitted the form.

The problem is, I guess it can't remember what it set for the drop down box so it defaults back to "Pick..."
That closes all the boxes, erasing everything that the browser would have remembered.

Does that make more sense?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24452460
Ah...

Q: How do I "remember" the selected option for a select list should the back
     button be used to return to this page?

A: You could have a "session" cookie (i.e., one that expires when you close the browser), that remember any/all select options.
     During the submit process, or form validation, you could create a cookie to hold the selections.
     When the page is loaded, check for the existence of the cookie, and use it to select the drop-down list options.

Does this make sense?
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24452585
It does make sense.
The question is now, how to do this.. :\
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24452766
Ah.  So you need the code to set and get cookie values...

What select dropdown lists are you interested in preservering?

Provide the id attribute for each.
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24453178
<select id='MySel' name='MySel' onchange='populate(this,"MyTable")'>

First things first, will your script work with cookies? As the list is populated by Javascript, the <table id='MyTable'>....</table> is empty every time you reload the page.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24453348
The way to make it work is to have some kind of "load cookies" routine executed when the page loads (or gets reloaded).  This routine:

- Checks for the existence of a unique cookie created by this page
- If one is present, retrieve it's value, and use the value to set the selected entries in the <select> drop down lists.

- Before the page gets left, normally in a validate, or submit processing routine, - - Create the uniquely named cookie, and have its value save the current <select> element values

So, to answer your questions:

Q: Will this work with the existing script?
A: Yes

Q: Would the table get populated as well?
A: Only if you have that information saved int he cookie as well.
    However, remember that cookies are not allowed to be "too big".
    How much information are we talking about there?
    What's the "worst case" scenario?  100 EOC input fields.
    How much information can/should be stored in each EOC input field?
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24453420
Well it would seem like if you could get the script to populate the table with the same number of fields, the browser would remember the values like all the rest of them. I just believe that it's deleting all the content in the fields because the script resets the number of filed to 0 ("Pick...") every time the page loads instead of remembering the number that was selected.

The average embed code looks like this:
<embed src="http://www.veoh.com/veohplayer.swf?permalinkId=v18490293ppcQGXGs&id=18541582&player=videodetailsembedded" allowFullScreen="true" width="410" height="341" bgcolor="#FFFFFF" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
 
 

But can get as long as this: (or a little more)
 

<object width="410" height="341" id="veohFlashPlayer" name="veohFlashPlayer"><param name="movie" value="http://www.veoh.com/static/swf/webplayer/WebPlayer.swf?version=AFrontend.5.4.2.11.1012&permalinkId=v18113418K3aJrDfg&player=videodetailsembedded&videoAutoPlay=0&id=18541582"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.veoh.com/static/swf/webplayer/WebPlayer.swf?version=AFrontend.5.4.2.11.1012&permalinkId=v18113418K3aJrDfg&player=videodetailsembedded&videoAutoPlay=0&id=18541582" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="410" height="341" id="veohFlashPlayerEmbed" name="veohFlashPlayerEmbed"></embed></object>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24453557
The long one is 761 characters... * 100 entries = 76,100 characters...
Way too long to be held in.  Even if we were to be really smart about it, and extract the essential information, we would need to get it < 40 characters for each of the 100 fields.

Not very encouraging.

The select lists wouldn't be a problem, but the EOC data looks to be a real challenge.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 41

Expert Comment

by:HonorGod
ID: 24453567
Way too long to be held in (a cookie).

Sorry for leaving out the "a cookie" part of that sentence.
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24453671
"Way too long to be held in (a cookie)."
I assumed that but thanks for clarifying.

I think we should try just to have it remember the select list first and see if that fixes the problem of holding all the EOC's in a huge cookie (which obviously wont work)

Then if it turns out we have to use a cookie for all the EOC's, would it be possible to use more than one cookie or possibly store the session to a text file on the server with a session id on the form that could be called to retrieve the old form info.


Oh and we are forgetting the JavaScript form validation thing. I mentioned in a while back but I would still like JavaScript to make sure the entire form is filled out before it lets the form be submitted.


Thanks for hanging in here so long HonorGod. If I had more points I would add them to the question for you.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24453735
ok, let's look at 1 thing at a time.

Q: You only have 1 select value to be "remembered", and it is a single, not a multiple-select.  Is this correct?


ToDo:
- validate that all information if provided.

Q: I presume that you have a "Submit" button.  What does the input for this button look like?
0
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 500 total points
ID: 24454093
Cookie related functions.

To create a "session" cookie (i.e., one that expires when the browser is closed) :

  var sel = document.getElementById( 'MySel' )
  setCookie( sel.id, sel.selectedIndex )

To retrieve a cookie value is as easy as:

  var result = getCookie( 'MySel' )

Remember though that the returned cookie value will be a string, so we may want to use something like this, instead:

  var result = getCookie( 'MySel' )

Unfortunately, the value returned, will be a string (which could be empty), so in order to get a numeric value, or 0 if the string is empty, we need to do something like this:

  var index = ( result == '' ) ? 0 : parseInt( result )

And given this index value, we can use it to "select" the specified item simply by:

  sel.selectedIndex = index

Does this make sense?
function setCookie( name, value, expires, path, theDomain, secure ) {

  //--------------------------------------

  // Note: expires should be a date object

  //--------------------------------------

  var theCookie = name + '=' + escape( value ) +

  ( ( expires   ) ? '; expires=' + expires.toGMTString() : '' ) +

  ( ( path      ) ? '; path='    + path      : '' ) +

  ( ( theDomain ) ? '; domain='  + theDomain : '' ) +

  ( ( secure    ) ? '; secure'               : '' )

  document.cookie = theCookie;

}
 

function getCookie( name ) {

  var search = name + '='

  var cookie = document.cookie

  var result = ''

  if ( cookie.length > 0 ) {           // Do any cookies exist?

    var offset = cookie.indexOf( search )

    if ( offset > -1 ) {               // Does 'this' cookie exist?

      offset += search.length          // offset = where values starts

      var end = cookie.indexOf( ';', offset )

                                       // end = where value ends

      if (end == -1) end = cookie.length

      result = unescape( cookie.substring( offset, end ) )

    }

  }

  return result

}
 

function delCookie( name, path, domain ) {

  if ( getCookie( name ) ) {           // Does this cookie exist?

    document.cookie = name + '=' +

      ( ( path   ) ? ';path='   + path   : '' ) +

      ( ( domain ) ? ';domain=' + domain : '' ) +

      ';expires=Thu, 01-Jan-70 00:00:01 GMT';

  }

}

Open in new window

0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24454202
Q: You only have 1 select value to be "remembered", and it is a single, not a multiple-select.  Is this correct?
A: Yes, just the one you created with the script

Q: I presume that you have a "Submit" button.  What does the input for this button look like?
A: I'm a little confused what you are asking for here. Here is my current version of the form with the two submit buttons "Preview Your Submission" and "SUBMIT FORM TO BLAZINANIME"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Q_24425534.html </title>

<script type='text/javascript'>

  var empty  = null

  var numSel = 100

 

  function AddRow() {

    var table = document.getElementById( 'MyTable' )

    var last  = null

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      last = empty.cloneNode( true )

      tbody.appendChild( last )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    return last

  }

 

  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      var val = sel.options[ SI ].value

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      if ( val < tbody.rows.length ) {

        if ( !confirm( 'Are you sure?' ) ) {

          return

        }

      }

      while ( val < tbody.rows.length ) {

        tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

      }

      for ( var i = tbody.rows.length; i < val; i++ ) {

        var row = AddRow()

        var inp = []

        var kids = ( 'children' in row ) ? row.children : row.childNodes

        for ( var j = 0; j < kids.length; j++ ) {

          if ( kids[ j ].nodeName == 'TD' ) {

            var eoc = inp[ inp.length ] = kids[ j ].firstChild

            if ( eoc.nodeName == 'INPUT' ) {

              if ( eoc.id == 'EOC' ) {

                eoc.name = eoc.id += ( i + 1 )

              } else {

                eoc.value = ( i + 1 )

              }

            } else {

              alert( 'Unexpected nodeName.  Expected = "INPUT"  Actual = "' + eoc.nodeName + '"' )

            }

          }

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }

 

  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

</script>

</head>

<body>

<h2>User Submit Anime Form</h2>

<p>Please fill out the following information about the Anime you wish to send us.</p>

<form action="http://blazinanime.com/testing/php/form-preview.php" method="post">

  <input type="text" name="anime-form" value="blazinanime" style="display:none;">

  Anime Series Name: <input type="text" size="23" id="anime-name" name="anime-name"><br/>

  Please check one: <input type="radio" id="subbed" name="sub-dub" value="subbed"> Subbed <input type="radio" id="dubbed" name="sub-dub" value="dubbed"> Dubbed<br/>

  # of Episodes: <select id='MySel' name='MySel' onchange='populate(this,"MyTable")'>

    <option>Pick...</option>

  </select><br/>

  Special Notes:<br/>

  <textarea rows="3" cols="35" id="special-notes" name="special-notes"></textarea><br/>

  Who should we thank?: <input type="text" size="20" id="submitter-name" name="submitter-name"><br/>

  Your Email Address: <input type="text" size="20" id="submitter-email" name="submitter-email"><br/>

  <br/>

  Once you are done filling in all the info above you can start adding episode info below.</br>

  <table id='MyTable'>

    <thead>

      <tr>

        <td align='center'>Ep #</td>

        <td>|  Embed/Object Code</td>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><input type='text' size='4' align='center' readonly></td>

        <td><input type='text' name='EOC' id='EOC'></td>

      </tr>

    </tbody>

  </table>

  <br/>

  Please fill out the entire form before submitting it. If you can't find all the<br/>

  episodes to submit to us, please provide at least 75% of the total episodes<br/>

  in the series before you submit the form, Thank you.<br/>

  <br/>

  Once you are ready you can either:<br/>

  <input type="submit" value="Preview Your Submission" onclick="return false;"> OR <input type="submit" value="SUBMIT FORM TO BLAZINANIME">

</form>

</body>

</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24454267
This is the tag for which I was looking:

<input type="submit" value="SUBMIT FORM TO BLAZINANIME">

That indicates that you have a simple "Submit" button that has the specified text.

What we need to do is to add an "onclick" very similar to the "Preview" button.

But!  We want to change both the Preview, and the Submit button "onclick" events to call a "form evaluation" routine that checks/verifies that all of the form values have "valid" information.  If they don't, the validation routine returns false, if they do, the validation routine returns true.  The true indication that the "submit" process may proceed, and the "form" action (i.e., action="http://blazinanime.com/testing/php/form-preview.php") can be executed.

So, in order to have the validate routine work, we need to know what values need to be checked, and what are valid, and invalid values for each.

Does that make sense?
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24454425
Oh now I get what you are asking

"So, in order to have the validate routine work, we need to know what values need to be checked, and what are valid, and invalid values for each."

anime-name > 1 or more chars in box (textbox)
sub-dub > 1 selected (radio)
MySel > 1 or more (on this one I'd like to have a prompt come up asking if you are sure the series has less than 10, but allow it if they confirm yes)
special-notes > optional, can be empty
submitter-name > Again Another prompt, are you sure you don't want credit for the submission
submitter-email > Prompt and check if it is in email format

Then all the EOC's should have 1 or more chars in them

0
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 500 total points
ID: 24455073
Something like this perhaps:


Then, we can have the Preview button be:

<input type="submit" value="Preview Your Submission" onclick="validate(); return false;">

and the submit button be:

<input type="submit" value="SUBMIT FORM TO BLAZINANIME" onclick='return validate()'>
<script type="text/javascript">

function field( id ) {

  var ele = document.getElementById( id )

  if ( !ele ) {

    alert( 'Specified element not found.  id="' + id + '"' )

  }

  return ele

}
 

function trim( str ) {

  return str.replace( /^\s\s*/, '' ).replace( /\s\s*$/, '' )

}
 

function validate() {

  // anime-name: 1 or more characters

  var id = 'anime-name';  var what = field( id )

  if ( !what || !trim( what.value ).length ) {

    alert( 'Required field: ' + id + ' ' +( ( what ) ? 'empty' : 'not found.' ) )

    return false

  }
 

  // sub-dub: 1 radio button must be selected

  id = 'sub-dub';  what = field( id )

  if ( what ) {

    if ( what.type == 'radio' ) {

      var radio = document.getElementsByName( id )

      for ( var i = 0; i < radio.length; i++ ) {

        if ( radio[ i ].checked )

          break

      }

      if ( i == radio.length ) {

        alert( 'Required field: ' + id + ' no value selected.' )

        return false

      }

    } else {

      alert( 'Required field: ' + id + ' wrong type: ' + what.type )

      return false

    }

  } else {

    alert( 'Required field: ' + id + ' not found.' )

    return false

  }
 

  // MySel: value must be selected.  Confirm if too few

  id = 'MySel';  what = field( id )

  var SI = -1

  if ( what ) {

    if ( what.nodeName == 'SELECT' ) {

      SI = what.selectedIndex

      if ( SI > 0 ) {

        if ( SI < 10 ) {

          if ( !confirm( 'Did you really want to use only ' + SI + ' values?' ) ) {

            return false

          }

        }

      } else {

        alert( 'Required field: ' + id + ' no selection made.' )

        return false

      }

    } else {

      alert( 'Required field: ' + id + ' unexpected type: ' + what.nodeName )

      return false

    }

  } else {

    alert( 'Required field: ' + id + ' not found.' )

    return false

  }

  

  // submitter-name: check for empty

  id = 'submitter-name';  what = field( id )

  if ( what ) {

    if ( !trim( what.value ).length ) {

      if ( !confirm( "Are you sure you don't want credit?" ) ) {

        return false

      }

    }

  } else {

    alert( 'Required field: ' + id + ' not found.' )

    return false

  }

  

  // submitter-e-mail: check for valid...

  id = 'submitter-e-mail';  what = field( id )

  if ( what ) {

    var email = trim( what.value )

    // RE from: http://xyfer.blogspot.com/2005/01/javascript-regexp-email-validator.html

    var RE = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i

    if ( !RE.test( email ) ) {

      alert( 'Invalid e-mail address: ' + email )

      return false

    }

  } else {

    alert( 'Required field: ' + id + ' not found.' )

    return false

  }

  

  // EOC: check for non-empty

  for ( var i = 0; i < SI; i++ ) {

    id = 'EOC' + ( i + 1 )

    what = field( id )

    if ( what ) {

      if ( trim( what.value ).length == 0 ) {

        alert( 'Empty field: ' + id )

        return false

      }

    } else {

      return false

    }

  }

  return true

}

Open in new window

0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24455254
K there were a couple bugs with id names but I fixed them.
(sub-dub was a name, not an id before)
(submitter-e-mail should have been submitter-email)

Alright so we got form validation down.

That leaves:
1. Remembering the MySel value + EOC's as well?
2. Javascript to open a popup with the preview in it
3. Submitting the form to an email (in the format of the PHP preview)

Then the more advanced step: (save these for later)
4. Saving sessions in .text files on the server to save what you have so far and come back to it with a session key.

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24455855
Well, I can help you with some, but I don't know about all...  This has already consumed a non-trivial amount of time...

1A is easy (saving the MySel selectedIndex).
1B, as we discussed before can't be done using cookies, so you might have to have some server side database in which the values could be saved.

What kind of "Preview pop-up" are you talking about?  Simply another window with all the the values displayed in a read-only fashion or something?

  But I know nothing about PHP, and the only way that I could think of to "submit the form as an e-mail" would be to send it to a server side application that had access to some kind of message server that supports e-mail.

Those, I have not done.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24455868
>> ... there were a couple bugs with id names but I fixed them.

  So you played with the validate() function and tested it out?
Did it do what you needed it to do?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24455892
I reread this question, and fount http://#a24447718 that talks about the preview window.  Unfortunately, I don't know how to open a preview window such as that.  I know how to open a pop-up, but I wonder if all of the EOC values would need to be specified on the URL (yuck!).

You were showing a worst case EOC value of 176 characters, so we would need to use a special technique for opening the popup and passing all of this data...
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24455901
hm... Sorry, wrong URL format.

http://www.experts-exchange.com/Q_24425534.html#a24447718 should work
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24456981
The preview window would be a pop-up window of preview.php with all the form data POSTed to it.

Side note: I finally earned enough points to be a qualified expert so I'll raise this question to 500 points and I'd be happy to open another question for you to get a few more points as I agree "This has already consumed a non-trivial amount of time..." And I thank you for it.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24458426
At what point do we want to "save" the MySel value?

Probably when it is changed, don't you think?

And where do we retrieve it?  In the onload function
  function populate( sel, id ) {

    var table = document.getElementById( id )

    if ( table ) {

      var SI = sel.selectedIndex

      setCookie( id, SI )

      var val = sel.options[ SI ].value

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      if ( val < tbody.rows.length ) {

        if ( !confirm( 'Are you sure?' ) ) {

          return

        }

      }

      while ( val < tbody.rows.length ) {

        tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

      }

      for ( var i = tbody.rows.length; i < val; i++ ) {

        var row = AddRow()

        var inp = []

        var kids = ( 'children' in row ) ? row.children : row.childNodes

        for ( var j = 0; j < kids.length; j++ ) {

          if ( kids[ j ].nodeName == 'TD' ) {

            var eoc = inp[ inp.length ] = kids[ j ].firstChild

            if ( eoc.nodeName == 'INPUT' ) {

              if ( eoc.id == 'EOC' ) {

                eoc.name = eoc.id += ( i + 1 )

              } else {

                eoc.value = ( i + 1 )

              }

            } else {

              alert( 'Unexpected nodeName.  Expected = "INPUT"  Actual = "' + eoc.nodeName + '"' )

            }

          }

        }

      }

    } else {

      alert( 'Required element not found: "' + id + '"' )

    }

  }
 

// ...
 

  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

      var SI = getCookie( 'MySel' )

      SI = ( SI == '' ) ? 0 : parseInt( SI )

      sel.selectedIndex = SI

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24458432
Notice how line 5 (in populate) saves the SI (selectedIndex)

and lines 56 - 58 retrieves the SI value, and uses it to "restore" the selectedIndex
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24458459
Something's broken now. It doesn't populate the form when you change the number.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24458497
ok.  Do you have the setCookie() and getCookie()  code?
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24458515
oh no I don't. I assumed they were general javascript functions.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24458537
hehe... nope.  They are provided above...

See:
http://www.experts-exchange.com/Q_24425534.html?cid=1066#a24458426
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24458848
Hm.  How about this link...  ( I didn't intend to leave the "?cid=" sorry

http://www.experts-exchange.com/Q_24425534.html#a24458426
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24458854
One of these days, I just might get it right... sigh

http://www.experts-exchange.com/Q_24425534.html#a24454093
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24459795
alright well now the form populates correctly but it's not working, the form is still closed after going back. :(
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24459816
Taking a look at the cookie shows that it's name is "MyTable", shouldn't it be "MySel"?
The content of the cookie is "2" (I did select 2 in the "MySel" box so at least it sets it to the right number.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24459962
Oh, I see!  In populate() the id that is passed is MyTable.

So, we want the setCookie() to be:

setCookie( sel.id, SI)
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24460114
Alright, so now the number is remembered but the script isn't being run or something so the fields are still closed (even though the MySel dropdown has the # in it).
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24460123
What script isn't being run?

Let's add something to the onload to see what is happening...

This will cause an alert when the page is loaded to show us the result of the getCookie() call, as well as the result of its processing.


  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

      var SI = getCookie( 'MySel' )

      SI = ( SI == '' ) ? 0 : parseInt( SI )

      alert( 'cookie: "' + getCookie( 'MySel' ) + '" => ' + SI )

      sel.selectedIndex = SI

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

Open in new window

0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24460126
Ouch, it's broken again
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24460134
Oh wait never mind. That break was my fault... so now it pops up with the message 'cookie: "3" => 3'
While the message is up the box remains as "Pick..." but after you press ok it changes to "3".
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24460148
Maybe we could go about this a different way... Could you have to form default have the max number of rows in the beginning then remove the last ones till it gets to the value of the cookie.

So like..
100 default
cookie = 25
load page w/ 100 rows
delete (100-25) rows
set MySel to cookie #
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24460167
The reason that the select is at "Pick" while the alert() box is up is because the next statement (i.e., the one that changes the selectedIndex) doesn't get executed until after the alert() complete (i.e., you click OK).

All we have to do is add:

populate( sel ,"MyTable" )

right after the

sel.selectedIndex = SI

in the onload function...
  window.onload = function() {

    var table = document.getElementById( 'MyTable' )

    var sel   = document.getElementById( 'MySel' )

    if ( table ) {

      var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ]

      empty = tbody.rows[ tbody.rows.length - 1 ].cloneNode( true )

      tbody.removeChild( tbody.rows[ tbody.rows.length - 1 ] )

    } else {

      alert( 'Required element not found: "MyTable"' )

    }

    if ( sel ) {

      for ( var i = 0; i < numSel; i++ ) {

        sel.options[ i + 1 ] = new Option( i + 1, i + 1 )

      }

      var SI = getCookie( 'MySel' )

      SI = ( SI == '' ) ? 0 : parseInt( SI )

      sel.selectedIndex = SI

      populate( sel ,"MyTable")

    } else {

      alert( 'Required element not found: "MySel"' )

    }

  }

Open in new window

0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24460204
Dang...

The forms now remain open after the back button...]

but they are empty... :\
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24460253
Well, we haven't saved the form data anywhere...
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24460255
That's what the discussion about "how much data can we save in cookies" is all about...
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24460261
Yes I know :\

I just see that my browser has remembered all the other fields (series name, # of eps, special notes, etc.) but not any of the EOC's.

So I'm just wondering, if it can remember all the others why not these too?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24460325
Well, probably because they don't exist when the page is instantiated.  They don't exist until after the onload function is executed, and the fields are created dynamically.

How's that for a reason?
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24460348
Ya I was trying to find a way around that but I guess there isn't unless you have any ideas. The fact that they are dynamic would also prevent us from loading content into them from php as well, easily anyway.

So I guess at this point if we can't get past this little road block then we should move onto:
2. Javascript to open a popup with the preview in it

I've seen a couple examples of onsubmit being used to open a popup and post the data to that url while keeping the original page intact, however, they use it attached to the form itself, rather than the individual submit buttons as we would need it.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24460363
I can show you how to open a popup, that's not hard.

The hard part is populating it with the data from the parent.

But, that is going to have to wait.  I have to go to bed.  It's been a very long day.
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24460367
Fair enough. See you later then and thank you for your help thus far.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24461338
Here's a simple example.

Opening the PopupTest.html page will display a single button, which when clicked, will open a trivial popup (i.e., popup.html)
PopupTest.html.txt
popup.html.txt
0
 
LVL 3

Author Closing Comment

by:musicmasteria
ID: 31583662
Thanks for all your hard work! I'd still like to figure out the preview popup thing but you earned these points long ago and I thought I should give them to you now. :)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24486743
Thanks for the grade & points

I appreciate your persistence, and continued encouragement.

Good luck & have a great day
0
 
LVL 3

Author Comment

by:musicmasteria
ID: 24486851
It is I who should be saying "Thanks" but you are very welcome :)
and you do the same HonorGod

Thanks for all the help
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now