Page 1 of 1

javascript form question

Posted: Wed Jul 29, 2009 10:35 pm
by itp
I have an html page with a few VCR-style directional arrows that tells this server what data to show next.
I am using individual form for each image.

Code: Select all

 
 <table>
<tr>
<td>
<!--------------------- FIRST PAGE -------------------->
<form name="form1" id="searchForm1" action="" method="get"> 
<input type='hidden' NAME="direction1" value="start">
<a href="#" onclick="javascript&#058; document.getElementById('searchForm1').submit(); return false;">
    <img border="0" img="img" src="/start.gif" alt="" />
</a>
</form>
</td>
 
<td>
<!--------------------- PREVIOUS PAGE -------------------->
<form name="form2" id="searchForm2" action="" method="get"> 
<input type='hidden' NAME="direction2" value="previous">
<input type='hidden' NAME="position" value="/%value1%/">
<a href="#" onclick="javascript&#058; document.getElementById('searchForm2').submit(); return false;">
    <img border="0" img="img" src="/previous.gif" alt="" /> 
</a>
</form>
</td>
 
<td>
<!--------------------- NEXT PAGE -------------------->
<form name="form3" id="searchForm3" action="" method="get"> 
<input type='hidden' NAME="direction3" value="next">
<input type='hidden' NAME="position" value="/%value2%/">
<a href="#" onclick="javascript&#058; document.getElementById('searchForm3').submit(); return false;">
    <img border="0" img="img" src="/next.gif" alt="" />
</a>
</form>
</td>
 
<td>
<!--------------------- LAST PAGE -------------------->
<form name="form4" id="searchForm4" action="" method="get"> 
<input type='hidden' NAME="direction4" value="end">
<a href="#" onclick="javascript&#058; document.getElementById('searchForm4').submit(); return false;">
    <img border="0" img="img" src="/end.gif" alt="" />
</a>
</form>
</td>
</tr>
</table>
 
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 selction 4 times - one per form -- which technically acceptableis, but 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.

Code: Select all

    
Entries per page <SELECT name=selectName> 
    <OPTION value=10 selected>10</OPTION> 
    <OPTION value=25>25</OPTION> 
    <OPTION value=50>50</OPTION> 
    <OPTION value=100>100</OPTION>
</SELECT>  
 
thanks for your good ideas!

Re: javascript form question

Posted: Fri Jul 31, 2009 8:24 am
by itp
I resolved using javascript getElementById and setAttribute methids. Interested
in how others may handle it...

Code: Select all

 
<table id='Top'<tr><td>
 
<td>
<form name="form1" id="searchForm1" action="" method="get"> 
<input type='hidden'  name='i.action1' value="/%o.action1%/"/>
<input type='hidden'  name='i.token' value="/%o.token%/"/>
<input type='hidden'  name='i.posNext' value="/%o.posNext%/">
<input type='hidden'  name="i.action2" value="start"> 
<input type='hidden'  name="i.entries" id="EntriesPerPageHidden1"  value=""> 
<a href="#" onclick="javascript&#058; 
      objEntriesPerPage = (document.getElementById('entries'));
      objEntriesPerPageHidden = (document.getElementById('EntriesPerPageHidden1'));                   
      objEntriesPerPageHidden.setAttribute('value', objEntriesPerPage.value); 
      document.getElementById('searchForm1').submit();  
      return false;"> 
   <img src="start.gif" alt="" /> 
</a> 
</form>  
</td>
 
<AS400>TEST13_ArrowPrevious 
<td>
<form name="form2" id='searchForm2' action='' method='get'> 
<input type='hidden'  name='i.action1' value="/%o.action1%/'/>
<input type='hidden'  name='i.token' value='/%o.token%/'/>
<input type='hidden'  name='i.posPrev' value='/%o.posPrev%/'>
<input type='hidden'  name="i.action2" value='previous'> 
<input type='hidden'  name="i.entries" id='EntriesPerPageHidden2'  value=""> 
<a href="#" onclick="javascript&#058; 
      objEntriesPerPage = (document.getElementById('entries'));
      objEntriesPerPageHidden = (document.getElementById('EntriesPerPageHidden2'));
      objEntriesPerPageHidden.setAttribute('value', objEntriesPerPage.value); 
      document.getElementById('searchForm2').submit();  
      return false;"> 
   <img src="previous.gif" alt="" /> 
</a> 
</form>  
</td>
 
<AS400>TEST13_ArrowNext
<td>
<form name="form3" id="searchForm3" action="" method="get"> 
<input type='hidden'  name='i.action1' value="/%o.action1%/"/>
<input type='hidden'  name='i.token' value="/%o.token%/"/>
<input type='hidden'  name='i.posNext' value="/%o.posNext%/">
<input type='hidden'  name="i.action2" value="next"> 
<input type='hidden'  name="i.entries" id="EntriesPerPageHidden3"  value=""> 
<a href="#" onclick="javascript&#058; 
      objEntriesPerPage = (document.getElementById('entries'));
      objEntriesPerPageHidden = (document.getElementById('EntriesPerPageHidden3'));
      objEntriesPerPageHidden.setAttribute('value', objEntriesPerPage.value);     
      document.getElementById('searchForm3').submit();  
      return false;"> 
   <img src="next.gif" alt="" /> 
</a> 
</form>  
</td>
 
<td>
<form name="form4" id="searchForm4" action="" method="get"> 
<input type='hidden'  name='i.action1' value="/%o.action1%/"/>
<input type='hidden'  name="i.action2" value="end"> 
<input type='hidden'  name='i.token' value="/%o.token%/"/>
<input type='hidden'  name='i.posNext' value="/%o.posNext%/">
<input type='hidden'  name="i.entries" id="EntriesPerPageHidden4"  value=""> 
<a href="#" onclick="javascript&#058; 
      objEntriesPerPage = (document.getElementById('entries'));
      objEntriesPerPageHidden = (document.getElementById('EntriesPerPageHidden4'));
      objEntriesPerPageHidden.setAttribute('value', objEntriesPerPage.value); 
      document.getElementById('searchForm4').submit();  
      return false;"> 
   <img src="end.gif" alt="" /> 
</a> 
</form>  
</td>
 
 
</div>  
</tr> 
<table>
 
Entries per page <select id='entries'>
  <option value="10" /%o.select10%/ >10</option>
  <option value="25" /%o.select25%/ >25</option>
  <option value="50" /%o.select50%/ >50</option>
  <option value="100" /%o.select100%/ >100</option>
</select>
</center>
 

Re: javascript form question

Posted: Fri Jul 31, 2009 12:04 pm
by pickle
setAttribute() isn't fully supported by all versions of IE. In fact, I think IE8 might be the only one that supports it.