javascript form submit question

[lonelyBratwurst]

I have an html page with a few VCR-style directional arrows
<< | < | > | >>
that tells this server what data to show next. I am using an individual form for each directional image.

   2.  <table>
   3. <tr>
   4. <td>
   5. <!--------------------- ERSTE SEITE -------------------->
   6. <form name="form1" id="searchForm1" action="" method="post">
   7. <input type='hidden' NAME="direction1" value="start">
   8. <a href="#" onclick="javascript: document.getElementById('searchForm1').submit(); return false;">
   9.     <img border="0" img="img" src="/start.gif" alt="" />
  10. </a>
  11. </form>
  12. </td>
  13.  
  14. <td>
  15. <!--------------------- PREVIOUS PAGE -------------------->
  16. <form name="form2" id="searchForm2" action="" method="post">
  17. <input type='hidden' NAME="direction2" value="previous">
  18. <input type='hidden' NAME="position" value="/%value1%/">
  19. <a href="#" onclick="javascript: document.getElementById('searchForm2').submit(); return false;">
  20.     <img border="0" img="img" src="/previous.gif" alt="" /> 
  21. </a>
  22. </form>
  23. </td>
  24.  
  25. <td>
  26. <!---------------------     Nächste Seite -------------------->
  27. <form name="form3" id="searchForm3" action="" method="post">
  28. <input type='hidden' NAME="direction3" value="next">
  29. <input type='hidden' NAME="position" value="/%value2%/">
  30. <a href="#" onclick="javascript: document.getElementById('searchForm3').submit(); return false;">
  31.     <img border="0" img="img" src="/next.gif" alt="" />
  32. </a>
  33. </form>
  34. </td>
  35.  
  36. <td>
  37. <!---------------------     Letzte Seite -------------------->
  38. <form name="form4" id="searchForm4" action="" method="post">
  39. <input type='hidden' NAME="direction4" value="end">
  40. <a href="#" onclick="javascript: document.getElementById('searchForm4').submit(); return false;">
  41.     <img border="0" img="img" src="/end.gif" alt="" />
  42. </a>
  43. </form>
  44. </td>
  45. </tr>
  46. </table>
  47. 

Now I would like to add a select box so users can select the numbers of rows per page before they select the direction arrow.
As it is structured now, I would have to add the entries per page selection 4 times - one per form -- which technically acceptable, but is pretty lame looking.

Is there a nice native javascript solution (I don't want to add a JS library) that would be able to pull together the the concept
of "page direction" above with "entries per page" into each get/post request.

   1.    
   2. Entries per page <SELECT name=selectName>
   3.     <OPTION value=10 selected>10</OPTION>
   4.     <OPTION value=25>25</OPTION>
   5.     <OPTION value=50>50</OPTION>
   6.     <OPTION value=100>100</OPTION>
   7. </SELECT>  
   8. 

thanks for your good ideas!

[pramendra]

Re: javascript form submit question

Could you please clarify the problem as it is not very clear to me.




Regards

[littlepd]

Re: javascript form submit question

Why not put them all on the same form? Since you're using JavaScript to process the clicks and no "Submit" actions, I can see no reason why these all cannot be a part of the same form.

[bryce4president]

Re: javascript form submit question

I agree with littlepd. Having multiple forms is not needed. In fact, if you aren't using the "submit" then why use a form at all? It sounds like you are displaying tabular data right? So just create a table and then have some divs in the footer with little images that look like arrows and when its clicked do what you need done.