musicmasteria
asked on
Drop down List of #s determines # of rows of inputs- How?
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
(See the attached picture for a better look at what I am wanting)
Any ideas?
user-anime-form.jpg
ASKER
I'm trying to do this all dynamically with JavaScript. Reloading the page sounds like it would be better for a php thing.
I would do it like this,
Its untested so there might be some bugs.
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>
you can by the way later do an
array_combine($_POST['keys
in php so you get an assosiative array.
1 bug spotted too...
array_combine($_POST['keys
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;
ASKER
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.
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.
<select id="numbers" size="1" OnChange="JavaScript:LoadI
<div id="inputs"></div>
<script type="text/javascript">
function LoadInputs()
{
document.getElementById("i
for(i=1;i<=document.getEle
{
document.getElementById("i
}
return;
}
</script>
<div id="inputs"></div>
<script type="text/javascript">
function LoadInputs()
{
document.getElementById("i
for(i=1;i<=document.getEle
{
document.getElementById("i
}
return;
}
</script>
you can trigger it on the input of the number of amounts like this
<input onChange="addEpisodes(this
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)
<input onChange="addEpisodes(this
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)
ASKER
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
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
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>
if you want 100 entries, change line 7 to:
var numSel = 100
var numSel = 100
ASKER
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!
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!
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>
Ah... Good catch... one moment please
Like this?
Tested in IE, FireFox, & Chrome
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>ASKER
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.
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.
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.
So, if they have selected 5, for example, and change it to 2,
you want a "are you sure?" confirmation?
Looking.
ASKER
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.
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.
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 + '"' )
}
}
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...
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...
ASKER
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.
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.
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)?
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)?
ASKER
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
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
ASKER
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
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>
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...
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...
Sorry, Embedded Object Code => EOC
Something like this perhaps?
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>ASKER
Hmm... probably should just have the name="EOC#"
Get returns something like this:
form-test3.html?anime-name
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)
Get returns something like this:
form-test3.html?anime-name
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)
ooh... looking...
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
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>ASKER
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 :)
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 :)
ASKER
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?
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++;
}
?>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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!
Anyway... glad to have helped in any way.
Cheers!
ASKER
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.
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>
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.
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.
ASKER
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?
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?
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?
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?
ASKER
It does make sense.
The question is now, how to do this.. :\
The question is now, how to do this.. :\
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.
What select dropdown lists are you interested in preservering?
Provide the id attribute for each.
ASKER
<select id='MySel' name='MySel' onchange='populate(this,"M
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.
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.
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?
- 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?
ASKER
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:
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>
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.
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.
Way too long to be held in (a cookie).
Sorry for leaving out the "a cookie" part of that sentence.
Sorry for leaving out the "a cookie" part of that sentence.
ASKER
"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.
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.
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?
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?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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"
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>
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?
<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?
ASKER
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
"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
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
(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.
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.
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.
>> ... 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?
So you played with the validate() function and tested it out?
Did it do what you needed it to do?
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...
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...
hm... Sorry, wrong URL format.
https://www.experts-exchange.com/questions/24425534/Drop-down-List-of-s-determines-of-rows-of-inputs-How.html?anchorAnswerId=24447718#a24447718 should work
https://www.experts-exchange.com/questions/24425534/Drop-down-List-of-s-determines-of-rows-of-inputs-How.html?anchorAnswerId=24447718#a24447718 should work
ASKER
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.
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.
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
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"' )
}
}
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
and lines 56 - 58 retrieves the SI value, and uses it to "restore" the selectedIndex
ASKER
Something's broken now. It doesn't populate the form when you change the number.
ok. Do you have the setCookie() and getCookie() code?
ASKER
oh no I don't. I assumed they were general javascript functions.
hehe... nope. They are provided above...
See:
https://www.experts-exchange.com/questions/24425534/Drop-down-List-of-s-determines-of-rows-of-inputs-How.html?cid=1066&anchorAnswerId=24458426#a24458426
See:
https://www.experts-exchange.com/questions/24425534/Drop-down-List-of-s-determines-of-rows-of-inputs-How.html?cid=1066&anchorAnswerId=24458426#a24458426
Hm. How about this link... ( I didn't intend to leave the "?cid=" sorry
https://www.experts-exchange.com/questions/24425534/Drop-down-List-of-s-determines-of-rows-of-inputs-How.html?anchorAnswerId=24458426#a24458426
https://www.experts-exchange.com/questions/24425534/Drop-down-List-of-s-determines-of-rows-of-inputs-How.html?anchorAnswerId=24458426#a24458426
One of these days, I just might get it right... sigh
https://www.experts-exchange.com/questions/24425534/Drop-down-List-of-s-determines-of-rows-of-inputs-How.html?anchorAnswerId=24454093#a24454093
https://www.experts-exchange.com/questions/24425534/Drop-down-List-of-s-determines-of-rows-of-inputs-How.html?anchorAnswerId=24454093#a24454093
ASKER
alright well now the form populates correctly but it's not working, the form is still closed after going back. :(
ASKER
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.
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.
Oh, I see! In populate() the id that is passed is MyTable.
So, we want the setCookie() to be:
setCookie( sel.id, SI)
So, we want the setCookie() to be:
setCookie( sel.id, SI)
ASKER
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).
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.
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"' )
}
}
ASKER
Ouch, it's broken again
ASKER
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".
While the message is up the box remains as "Pick..." but after you press ok it changes to "3".
ASKER
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 #
So like..
100 default
cookie = 25
load page w/ 100 rows
delete (100-25) rows
set MySel to cookie #
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...
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"' )
}
}
ASKER
Dang...
The forms now remain open after the back button...]
but they are empty... :\
The forms now remain open after the back button...]
but they are empty... :\
Well, we haven't saved the form data anywhere...
That's what the discussion about "how much data can we save in cookies" is all about...
ASKER
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?
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?
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?
How's that for a reason?
ASKER
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.
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.
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.
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.
ASKER
Fair enough. See you later then and thank you for your help thus far.
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
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
ASKER
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. :)
Thanks for the grade & points
I appreciate your persistence, and continued encouragement.
Good luck & have a great day
I appreciate your persistence, and continued encouragement.
Good luck & have a great day
ASKER
It is I who should be saying "Thanks" but you are very welcome :)
and you do the same HonorGod
Thanks for all the help
and you do the same HonorGod
Thanks for all the help
2. Once dropbox onchange event hit, reload the page by proper number of EP textboxes.
3. Repopulate the previous input