Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 548
  • Last Modified:

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
0
musicmasteria
Asked:
musicmasteria
  • 43
  • 36
  • 3
  • +2
3 Solutions
 
quickcat88Commented:
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
 
musicmasteriaAuthor Commented:
I'm trying to do this all dynamically with JavaScript. Reloading the page sounds like it would be better for a php thing.
0
 
phpmonkeyCommented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
phpmonkeyCommented:
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
 
musicmasteriaAuthor Commented:
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
 
MaxOvrdrv2Commented:
<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
 
phpmonkeyCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
HonorGodCommented:
if you want 100 entries, change line 7 to:

var numSel = 100
0
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
HonorGodCommented:
Ah... Good catch... one moment please
0
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
ooh... looking...
0
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
MaxOvrdrv2Commented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
It does make sense.
The question is now, how to do this.. :\
0
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
<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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
HonorGodCommented:
Way too long to be held in (a cookie).

Sorry for leaving out the "a cookie" part of that sentence.
0
 
musicmasteriaAuthor Commented:
"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
 
HonorGodCommented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
HonorGodCommented:
>> ... 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
 
HonorGodCommented:
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
 
HonorGodCommented:
hm... Sorry, wrong URL format.

http://www.experts-exchange.com/Q_24425534.html#a24447718 should work
0
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
Something's broken now. It doesn't populate the form when you change the number.
0
 
HonorGodCommented:
ok.  Do you have the setCookie() and getCookie()  code?
0
 
musicmasteriaAuthor Commented:
oh no I don't. I assumed they were general javascript functions.
0
 
HonorGodCommented:
hehe... nope.  They are provided above...

See:
http://www.experts-exchange.com/Q_24425534.html?cid=1066#a24458426
0
 
HonorGodCommented:
Hm.  How about this link...  ( I didn't intend to leave the "?cid=" sorry

http://www.experts-exchange.com/Q_24425534.html#a24458426
0
 
HonorGodCommented:
One of these days, I just might get it right... sigh

http://www.experts-exchange.com/Q_24425534.html#a24454093
0
 
musicmasteriaAuthor Commented:
alright well now the form populates correctly but it's not working, the form is still closed after going back. :(
0
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
Oh, I see!  In populate() the id that is passed is MyTable.

So, we want the setCookie() to be:

setCookie( sel.id, SI)
0
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
Ouch, it's broken again
0
 
musicmasteriaAuthor Commented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
Dang...

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

but they are empty... :\
0
 
HonorGodCommented:
Well, we haven't saved the form data anywhere...
0
 
HonorGodCommented:
That's what the discussion about "how much data can we save in cookies" is all about...
0
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
Fair enough. See you later then and thank you for your help thus far.
0
 
HonorGodCommented:
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
 
musicmasteriaAuthor Commented:
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
 
HonorGodCommented:
Thanks for the grade & points

I appreciate your persistence, and continued encouragement.

Good luck & have a great day
0
 
musicmasteriaAuthor Commented:
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 43
  • 36
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now