Firefox multiple text field problems

**jominsons** · Jun 19, 2008 16:08

Hi

I have some php code that creates multiple text fields, populates them with contents from a database then allows the user to amend (if required) and update the database entries.

This works fine in IE however in firefox when the user attempts to select any other field except the first one the cursor jumps to the first text field and, as you can imagine, this is a bit if a pain.

Any insights, info or inspirations would be much appreciated.

Thanks in anticipation and find a copy of the code below.

PHP Code:


<? session_start(); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>RBK Digital - Controlpanel</title>

<link href="rsp.css" rel="stylesheet" type="text/css" />

<link rel="Shortcut Icon" href="favicon.ico"/>

<style type="text/css">

.cplinks {

    padding-top: 20px;

    text-align: center;

}

#spacer {

    background-color:#999999;

    height: 2px;

    width:auto;

}

</style>

</head>

<body id="controlpanel">

<!-- copyright www.RBKDigital.co.uk - created by Mark Hewitt - created February 2008 -->

<?php 

if ($_SESSION['adminlgdn'] == "YES"){

require 'header.php';

require 'header2.php';

require 'navigation.php'; ?>

<div class="contentBox">

  <p><strong>Control Panel - <a href="logout.php">Log Out</a> - <a href="controlpanel.php">Home</a></strong></p>

  <?php

require 'db.php';



$query = "select * from images order by gallery";



$result = mysql_query($query) or die('Error: '.@mysql_error());

while ($row = @mysql_fetch_array($result)) {

echo $row['gallery']." Gallery"."<br/><br/>";

?>

  <img src="http://www.rbkdigital.co.uk/images/<?php echo $row['imagename']; ?>" alt="" width="75"  /> <a href = 'deleteimage.php?id=<?php echo $row['id'];?>&amp;name=<?php echo $row['imagename']; ?>'>Delete Image </a><br/>

  <br/>

  <form  action="edittitles.php" method="post" >

    <label for="edittitle"> Current Title:

    <input id="edittitle" type="text" name="title" value="<?php echo $row['title']; ?>">

    </label>

    <input type="hidden" name="id" value="<?php echo $row['id']; ?>" >

    <input type="submit" value="Update Title" >

  </form>

  <br/>

  <div id="spacer"></div>

  <br/>

  <?php

}

?>

</div>

<?php include 'footer.php';  }

else

{include 'adminaccesscontrol.php';}?>

</body>

</html>

**mikemckinney** · Jun 19, 2008 23:56

Based upon a review of the code listed above, I'm not sure why the cursor jumps to first field but you should be aware that, if you have multiple images, the page will have multiple input fields with the same name value. So if a JavaScript routine attempts to access an input field by name, it is likely to select the first one.

mikem

**jominsons** · Jun 20, 2008 03:32

Hi and thanks for the reply.

The value of the field is created as an array and that bit works fine. It's just the field auto selection in firefox of the first field that's causing the issue.

**C. Ankerstjerne** · Jun 20, 2008 06:00

Could you post the source code of the page that's giving you problems?

**jominsons** · Jun 20, 2008 07:04

Hi.

I included the code in my original post.

**C. Ankerstjerne** · Jun 20, 2008 07:16

That's the PHP code, and not the generated code. Since you're putting in information from a database, it's difficult to know what the resulting code will be.

**jominsons** · Jun 20, 2008 12:56

Hi again.

The db entries are image names (I'm not gonna list them all cos that would take forever) though they are simply text with no speciel entities or characters etc.

**C. Ankerstjerne** · Jun 20, 2008 13:49

One possible problem would be if you have more than one section with the same ID, and with a LABEL pointing to it. Since clicking the LABEL will focus the cursor on the associated form element, that could cause a behaviour similar to the one you are describing.

Still, without the source code, it's impossible to replicate the problem you are describing.

**jominsons** · Jun 20, 2008 15:30

Hi

I think you may be on to the problem with the same LABEL.

I created the following code:

PHP Code:




<?php



$i = '0';

while ($i < 10) {



$test = 'test';





?>



  <form  action="edittitles.php" method="post" >

    <label for="edittitle"> Current Title:

    <input id="edittitle" type="text" name="title" value="<?php echo $test; ?>">

    </label>

   

    <input type="submit" value="Update Title" >

  </form>

  <br/>

 

  <?php

 $i++; 

}

?>

and the problem still presented itself however with the label removed it stopped.

Any suggestions ?

**jominsons** · Jun 20, 2008 15:44

Hi again

I removed the label and replaced with the following:

HTML Code:

<form  action="edittitles.php" method="post" >
    Current Title: <input type="text" name="title" value="<?php echo $row['title']; ?>">
    <input type="hidden" name="id" value="<?php echo $row['id']; ?>" >
    <input type="submit" value="Update Title" >
  </form>

....which now works like a charm. Many thanks for the pointer, much appreciated.

Any technical info on why that messed things up or a beter way of coding would be much appreciated but if you don't have the time I understand.

Once again thanks

**mikemckinney** · Jun 20, 2008 17:50

Of course, the label tag! And I should have seen it!

HTML Code:

<label for="edittitle"> Current Title:
    <input id="edittitle" type="text" name="title" value="<?php echo $row['title']; ?>">
</label>

When multiple images are shown on a page, the HTML listed above will be generated multiple times and only the value parameter will be customized. That means there will be multiple input elements with the ID of edittitle. Also note that the input element is within the label element.

So clicking in the text field is just like clicking the label element. And clicking a label element causes the element identified by the for parameter to obtain the focus. So it's not surprising that Firefox would assign the focus to the first field with the specified id.

The lesson to learn is that it's bad practice to have multiple HTML elements on a page with the same id or name values.

mikem

**C. Ankerstjerne** · Jun 27, 2008 09:01

You can still use an ID, you just have to make it unique. If you have an index in your database, you can append that to the ID name (just remember that an ID can't start with a number).

User Tag List

Thread: Firefox multiple text field problems

Thread Tools

Display

Firefox multiple text field problems

Bookmarks

Bookmarks

Posting Permissions