Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hidden value changed by javascript on submit reverting before postback

Status
Not open for further replies.

dtaylorODIM

Technical User
Mar 24, 2009
6
CA
Hello everyone,

I'm working on a page which displays a table of information from our database. This table can be sorted by clicking on the header on the column by which you want to sort.

A request has come in to make it possible to sort by 2 columns at once and that has given me the opportunity to update it to use POST variables instead of GET variables that give the user too much opportunity to mess around.

I've set this up by having the header links call javascript which updates the form to the correct sort field and then submit.

This was working fine until I copied the same code down to where the headers repeat themselves then it seemed to stop working and undoing the changes did not solve things. For some reason it seems to still work with Firefox but the office uses IE.

Here is the header row (the PHP code just determines if an image should be loaded to show how it is currently sorted):
Code:
<tr bgcolor=#234567>
  <td NOWRAP>
    <A HREF='javascript: sort("eco_number")' class=hilighted>ECO No.</A>
    <?php 
      if ($sort1 == 'eco_number' || $sort2 == 'eco_number') {
        $order = $sort1 == 'eco_number' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td NOWRAP>
    <A HREF='javascript: sort("job_number")' class=hilighted>Job No.</A>
    <?php
      if ($sort1 == 'job_number' || $sort2 == 'job_number') {
        $order = $sort1 == 'job_number' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td NOWRAP>
    <A HREF='javascript: sort("product_line")' class=hilighted>Product Line</A>
    <?php
      if ($sort1 == 'product_line' || $sort2 == 'product_line') {
        $order = $sort1 == 'product_line' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td>
    <A HREF='javascript: sort("product_version")' class=hilighted>Version</A>
    <?php
      if ($sort1 == 'product_version' || $sort2 == 'product_version') {
        $order = $sort1 == 'product_version' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td>
    <A HREF='javascript: sort("eco_desc")' class=hilighted>Description</A>
    <?php
      if ($sort1 == 'eco_desc' || $sort2 == 'eco_desc') {
        $order = $sort1 == 'eco_desc' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td>
    <A HREF='javascript: sort("create_date")' class=hilighted>Created</A>
    <?php
      if ($sort1 == 'create_date' || $sort2 == 'create_date') {
        $order = $sort1 == 'create_date' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td width=29><DIV align=center>
    <A HREF='javascript: sort("originator")' class=hilighted>By</A>
    <?php
      if ($sort1 == 'originator' || $sort2 == 'originator') {
        $order = $sort1 == 'originator' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </DIV></td>
  <td>
    <A HREF='javascript: sort("effect_date")' class=hilighted>Effective</A>
    <?php
      if ($sort1 == 'effect_date' || $sort2 == 'effect_date') {
        $order = $sort1 == 'effect_date' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td NOWRAP>
    <A HREF='javascript: sort("importance")' class=hilighted>Imp!</A>
    <?php
      if ($sort1 == 'importance' || $sort2 == 'importance') {
        $order = $sort1 == 'importance' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td NOWRAP>
    <A HREF='javascript: sort("inhouse_part_change")' class=hilighted>IPC</A>
    <?php
      if ($sort1 == 'inhouse_part_change' || $sort2 == 'inhouse_part_change') {
        $order = $sort1 == 'inhouse_part_change' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td NOWRAP>
    <A HREF='javascript: sort("research_work")' class=hilighted>R&D</A>
    <?php
      if ($sort1 == 'research_work' || $sort2 == 'research_work') {
        $order = $sort1 == 'research_work' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <td width=50>
    <A HREF='javascript: sort("eco_status")' class=hilighted>Status</A>
    <?php
      if ($sort1 == 'eco_status' || $sort2 == 'eco_status') {
        $order = $sort1 == 'eco_status' ? $order1 : $order2;
        echo '<img src=images\\'.($order == 'DESC' ? 'down' : 'up').'.gif />';
      }
    ?>
  </td>
  <TD></TD>
</tr>

Here is the javascript function each link calls:
Code:
<script language=javascript>
  function sort(sort_by) {
   /* this function is used to determine what column(s) to sort by and, for each column,
      whether to sort ascending or descending.
  */
    
    //get current sort method
    var sort1 = document.getElementById('sort1');
    var order1 = document.getElementById('order1');
    var sort2 = document.getElementById('sort2');
    var order2 = document.getElementById('order2');
    
    //test if we are already sorting by one of these
    if (sort1.value == sort_by) {
      //if the primary sort matches then change the order
      if (order1.value == 'DESC') {
        order1.value = 'ASC';
      } else {
        order1.value = 'DESC';
      }
    } else if (sort2.value == sort_by) {
      //if the secondary sort matches then switch priorities
      temp_sort = sort1.value;
      temp_order = order1.value;
      
      sort1.value = sort2.value;
      order1.value = order2.value;
      
      sort2.value = temp_sort;
      order2.value = temp_order;
    } else {
      //otherwise make the primary sort method secondary and make the new sort primary
      sort2.value = sort1.value;
      order2.value = order1.value;
      
      sort1.value = sort_by;
      order1.value = 'DESC';
    }
    
    //submit the sort form
    document.frmSort.submit();
  }
</script>

And the html form which is at the bottom of the page after the table (again, the PHP just lets me put in the current sort info):
Code:
<FORM name=frmSort action=list_ecos.php method=POST>
  <?php
    echo "<INPUT type=hidden name=search_string value='$search_string' />
  <INPUT type=hidden name=sort1 id=sort1 value='$sort1' />
  <INPUT type=hidden name=order1 id=order1 value='$order1' />
  <INPUT type=hidden name=sort2 id=sort2 value='$sort2' />
  <INPUT type=hidden name=order2 id=order2 value='$order2' />
  <INPUT type=hidden name=limit value='$limit' />";
  ?>
</FORM>

I've tried putting some alert lines for debugging and they show that the gathered values at the begining are correct and then just before the .submit() is called the new values reflect what it should be.

Then when the page loads it still shows the default sorting. I tried throwing in PHP debugging at the begining of the page:

Code:
<?php
  foreach ($_POST as $key => $value) {
    echo "$key => $value<BR />";
  }
?>

And it confirms that the information is sent but it's sent with the default values before javascript ran.

So, can anyone think of a reason that the information would revert before the post information is sent?

Thanks,

David I. Taylor
Network Administrator
 
I just thought I'd add this since I thought of it.

The output is split into multiple pages and the links to each page are set up the same way but they work.

Code:
<script language=javascript>
  function submitPage(page) {
  /*  this function is used to submit the form information for changing pages.
      Because so much information need to be sent it is better to put all page buttons in
      one form and then use javascript to change the value of the page input before submitting.
  */
    var pageInput = document.getElementById('page');  //get access to the hidden input
    pageInput.value = page; //change it's value
    frmPage.submit(); //submit the form
  }
</script>

and the form this works with:

Code:
    <FORM name=frmPage action=list_ecos.php method=POST>
      <INPUT type=hidden name=page value=0 />
      <?php
        echo "<INPUT type=hidden name=limit value=$limit />";
        //only forward information that is needed
        if ($search_string) {
          echo "<INPUT type=hidden name=search_string value=\"$search_string\" />";
        } else {
          echo "<INPUT type=hidden name=sort1 value='$sort1' />
          <INPUT type=hidden name=order1 value='$order1' />
          <INPUT type=hidden name=sort2 value='$sort2' />
          <INPUT type=hidden name=order2 value='$order2' />";
        }
        
        if ($page != 0) { // Don't show back link if current page is first page.
          $back_page = $page;
          echo "<a href='javascript: submitPage($back_page)'>«back</a> ";
        }
        
        for ($i=1; $i <= $pages; $i++) // loop through each page and give link to it.
        {
          //now using page numbers instead of begining record
          if ($i - 1 == $page) {
            echo "[<b>$i</b>] ";	// If current page don't give link, just text.
          } else {
            echo "<a href='javascript: submitPage($i)'>$i</a> ";
          }
          
          if ($i % 25 == 0)
            echo "<BR />";
        }

        if ($page + 1 < $pages && $pages != 1) { // If last page don't give next link.
          $next_page = $page + 2;
          echo "<a href='javascript: submitPage($next_page)'>next»</a>";
        }
      ?>
    </FORM>

In case that helps at all.
 
Having looked through some of the other posts here I'll give you guys the client side code after the php has run it's course.

Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>.: INTRANET - ECO Listing</title>

<script language=javascript>
  function submitPage(page) {
  /*  this function is used to submit the form information for changing pages.
      Because so much information need to be sent it is better to put all page buttons in
      one form and then use javascript to change the value of the page input before submitting.
  */
    var pageInput = document.getElementById('page');  //get access to the hidden input
    pageInput.value = page; //change it's value
    frmPage.submit(); //submit the form
  }
  
  function sort(sort_by) {
   /* this function is used to determine what column(s) to sort by and, for each column,
      whether to sort ascending or descending.
  */
    alert("sort_by is " + sort_by);
    //get current sort method
    var sort1 = document.getElementById('sort1');
    var order1 = document.getElementById('order1');
    var sort2 = document.getElementById('sort2');
    var order2 = document.getElementById('order2');
    
    alert("BEFORE CHANGES:\n\nsort1 is " + sort1.value + "\norder1 is " + order1.value + "\nsort2 is " + sort2.value + "\norder2 is " + order2.value);
    
    //test if we are already sorting by one of these
    if (sort1.value == sort_by) {
      //if the primary sort matches then change the order
      if (order1.value == 'DESC') {
        order1.value = 'ASC';
      } else {
        order1.value = 'DESC';
      }
    } else if (sort2.value == sort_by) {
      //if the secondary sort matches then switch priorities
      temp_sort = sort1.value;
      temp_order = order1.value;
      
      sort1.value = sort2.value;
      order1.value = order2.value;
      
      sort2.value = temp_sort;
      order2.value = temp_order;
    } else {
      //otherwise make the primary sort method secondary and make the new sort primary
      sort2.value = sort1.value;
      order2.value = order1.value;
      
      sort1.value = sort_by;
      order1.value = 'DESC';
    }
    
    alert("AFTER CHANGES:\n\nsort1 is " + sort1.value + "\norder1 is " + order1.value + "\nsort2 is " + sort2.value + "\norder2 is " + order2.value);
    
    //submit the sort form
    frmSort.submit();
  }
</script>
</head>
<body bgcolor=#012345 topmargin=10 marginheight=10>

DEBUG INFO:<BR />
  search_string => <BR />
    sort1 => eco_number<BR />
    order1 => DESC<BR />
    sort2 => <BR />
    order2 => DESC<BR />
    limit => 25<BR />

<table cellspacing=0 cellpadding=3 border=0 width=950>
<tr bgcolor=#234567>
  <td NOWRAP>
    <A HREF='javascript: sort("eco_number")' class=hilighted>ECO No.</A>
    <img src=images\down.gif />  </td>
  <td NOWRAP>
    <A HREF='javascript: sort("job_number")' class=hilighted>Job No.</A>
      </td>
  <td NOWRAP>
    <A HREF='javascript: sort("product_line")' class=hilighted>Product Line</A>
      </td>
  <td>
    <A HREF='javascript: sort("product_version")' class=hilighted>Version</A>
      </td>
  <td>
    <A HREF='javascript: sort("eco_desc")' class=hilighted>Description</A>
      </td>
  <td>
    <A HREF='javascript: sort("create_date")' class=hilighted>Created</A>
      </td>
  <td width=29><DIV align=center>
    <A HREF='javascript: sort("originator")' class=hilighted>By</A>
      </DIV></td>
  <td>
    <A HREF='javascript: sort("effect_date")' class=hilighted>Effective</A>
      </td>
  <td NOWRAP>
    <A HREF='javascript: sort("importance")' class=hilighted>Imp!</A>
      </td>
  <td NOWRAP>
    <A HREF='javascript: sort("inhouse_part_change")' class=hilighted>IPC</A>
      </td>
  <td NOWRAP>
    <A HREF='javascript: sort("research_work")' class=hilighted>R&D</A>
      </td>
  <td width=50>
    <A HREF='javascript: sort("eco_status")' class=hilighted>Status</A>
      </td>
  <TD></TD>
</tr>
.
.Data displayed here
.
<TR>
  <TD colspan=7>
    <FORM name=frmPage action=list_ecos.php method=POST>
      <INPUT type=hidden name=page value=0 />
      <INPUT type=hidden name=limit value=25 /><INPUT type=hidden name=sort1 value='eco_number' />
          <INPUT type=hidden name=order1 value='DESC' />
          <INPUT type=hidden name=sort2 value='' />
          <INPUT type=hidden name=order2 value='DESC' />[<b>1</b>] <a href='javascript: submitPage(2)'>2</a> <a href='javascript: submitPage(3)'>3</a> <a href='javascript: submitPage(4)'>4</a> <a href='javascript: submitPage(5)'>5</a> <a href='javascript: submitPage(6)'>6</a> <a href='javascript: submitPage(7)'>7</a> <a href='javascript: submitPage(8)'>8</a> <a href='javascript: submitPage(9)'>9</a> <a href='javascript: submitPage(10)'>10</a> <a href='javascript: submitPage(11)'>11</a> <a href='javascript: submitPage(12)'>12</a> <a href='javascript: submitPage(13)'>13</a> <a href='javascript: submitPage(14)'>14</a> <a href='javascript: submitPage(15)'>15</a> <a href='javascript: submitPage(16)'>16</a> <a href='javascript: submitPage(17)'>17</a> <a href='javascript: submitPage(18)'>18</a> <a href='javascript: submitPage(19)'>19</a> <a href='javascript: submitPage(2)'>next»</a>    </FORM>
  </TD>
  <TD colspan=6>
    <DIV align=right>
      <FORM name=frmLimit action=list_ecos.php method=POST>
      Results per Page:
        <SELECT name=limit>
          <OPTION value=10>10</OPTION>
          <OPTION value=25 SELECTED>25</OPTION>
          <OPTION value=50>50</OPTION>
          <OPTION value=100>100</OPTION>
        </SELECT>
        <INPUT type=hidden name=sort1 value='eco_number' />
            <INPUT type=hidden name=order1 value='DESC' />
            <INPUT type=hidden name=sort2 value='' />
            <INPUT type=hidden name=order2 value='DESC' />        <INPUT type=submit value=Go />
      </FORM>
      <A HREF="#top" class=smallbutton>back to top</A>
    </DIV>
  </TD>
</TR>
</table>
<FORM name=frmSort action=list_ecos.php method=POST>
  <INPUT type=hidden name=search_string value='' />
  <INPUT type=hidden name=sort1 id=sort1 value='eco_number' />
  <INPUT type=hidden name=order1 id=order1 value='DESC' />
  <INPUT type=hidden name=sort2 id=sort2 value='' />
  <INPUT type=hidden name=order2 id=order2 value='DESC' />
  <INPUT type=hidden name=limit value='25' /></FORM>

</body>
</html>

The DEBUG INFO: section is from after clicking on the Job No. link. The debug alerts from the script are as follows, and they remain the same every time the link is clicked:

sort_by is job_number

BEFORE CHANGES:

sort1 is eco_number
order1 is DESC
sort2 is
order2 is DESC

AFTER CHANGES:

sort1 is job_number
order1 is DESC
sort2 is eco_number
order 2 is DESC

I've tried using a link inside the form without any luck. I even tried changing one of the links to lower case tags in case that made a difference with no luck.

Code:
<a href='javascript: sort("job_number")'>Job No.</a>

instead of

<A HREF='javascript: sort("job_number")'>Job No.</A>

Any help at all would be appreciated.

David I. Taylor
Network Administrator
ODIM Brooke Ocean
 
I found the problem.

Apparently IE will use the name of an element for it's ID which was causing me problems.

I decided I would just try to remove the old inputs and replace them with proper values. In trying to figure out how to do this I decided to call
Code:
alert(sort1.parentNode.name);
so I could figure out what object to remove it from (I was having troubles even with something that simple).

It turns out that it was altering the sort1 hidden input from frmPage instead of frmSort. Even setting this incorrect field to have it's own id IE still picked this one instead of the one with sort1 set as it's id.

Anyway, I sorted it out by changing my script as follows:
Code:
function sort(sort_by) {
 /* this function is used to determine what column(s) to sort by and, for each column,
    whether to sort ascending or descending.
*/
  
  //get current sort method
[COLOR=red]  var sort1 = document.frmSort.sort1;
  var order1 = document.frmSort.order1;
  var sort2 = document.frmSort.sort2;
  var order2 = document.frmSort.order2;[/color]
  
  //test if we are already sorting by one of these
  if (sort1.value == sort_by) {
    //if the primary sort matches then change the order
    if (order1.value == 'DESC') {
      order1.value = 'ASC';
    } else {
      order1.value = 'DESC';
    }
  } else if (sort2.value == sort_by) {
    //if the secondary sort matches then switch priorities
    temp_sort = sort1.value;
    temp_order = order1.value;
    
    sort1.value = sort2.value;
    order1.value = order2.value;
    
    sort2.value = temp_sort;
    order2.value = temp_order;
  } else {
    //otherwise make the primary sort method secondary and make the new sort primary
    sort2.value = sort1.value;
    order2.value = order1.value;
    
    sort1.value = sort_by;
    order1.value = 'DESC';
  }
  
  //submit the sort form
  frmSort.submit();
}

I hope my blundering will help someone else in the future.

Cheers,

David I. Taylor
Network Administrator
ODIM Brooke Ocean
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top