Why document.getElementById for hidden input works in IE but not Chrome?

Question

i have a problem with this part of js code not working in Chrome but working in IE.

this is my javascript code :

function submitformWithPage(xpage)
{

  document.getElementById('itempage').value = xpage;
 alert(xpage);
  document.searchForm.submit();

}

and this is my html code

<form name="searchForm" action="search.php" method="get">

<input  type="text" name="search" value="<?php if(isset($_GET['search'])) { echo $_GET['search']; } ?>"/>
<input type="hidden" name="parameter" value="test" />
<input id="item" type="hidden" name="itempage" value="1" />
<input type="hidden" name="pageBigForward" value="10" />
<input type="hidden" name="pageSmallForward" value="1" />

<button style="" onclick="javascript: submitform()">Search</button>

</form>

I submitted the form by using this code and it works in IE but not in Chorme.

<button style="" onclick="javascript: submitformWithPage(3);">3</button>

I am lost on how to solve this problem.

Can anyone help me ?

Thanks in advance.

Solution 1

Your input has the name of itempage, not the id.

<input id="item" type="hidden" name="itempage" value="1" id="itempage"/>

Using names-as-ids is only supported in IE5-7!

Solution 2

Function getElementById is searching by attribute "id", not "name".

So replace itempage with item and you are good to go.

Solution 3

Use id instead of name:

document.getElementById('item').value = xpage;

Solution 4

You have set the name but not the ID of your hidden element to "itempage"

Solution 5

It works in IE because IE considers the "name" attribute as well as the "id" attribute for "getElementById()". It's a pretty stupid behavior, really, but it benefits your code because you don't have that string as an "id" value.

View more solutions