SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox multiple text field problems

    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>

  2. #2
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Could you post the source code of the page that's giving you problems?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.

    I included the code in my original post.

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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).
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •