Geek asks and answers

Preform HTML Form Not Submitted to Chrome

My code works in all major browsers except Google Chrome, where it acts strangely. I am using Google Chrome 11.0.696.68. These facts apply to Chrome:

  • If I give values ​​to all input fields, I can fill out the form without any problems.
  • If I leave the "day" field empty and click the submit button, the form will not be sent, but for some reason the focus goes into the day field.
  • If I focus on any field other than “day,” for example, “different,” and press “Enter,” the form will not be submitted and the focus will be on the field of the day.
  • If I give focus to an empty field of the day and press the enter key, the form will be sent.
  • If I comment out the line prefillTextfield( 'candidate_dateOfBirth_day', 'Day' );, everything will work fine. The strange thing is that there is still a similar field that does not cause any problems: a year.

Is this a bug in Google Chrome or is it in my code?

    <html>
      <head>
        <title>Submit fails in Google Chrome</title>
        <script type="text/javascript" src="hidden/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
          /**
            * Prefill a textfield
            */
            function prefillTextfield( id, defaultText )
            {
              var element = $( '#' + id );
              var color = 'rgb(153, 153, 153)';

              // Define focus event
              element.focus(
                function()
                {
                  if( element.css( 'color' ) == color )
                  {
                    element.val( '' );
                    element.css( { 'color': '#000' } );
                  }
                }
              );

              // Define blur event
              element.blur(
                function()
                {
                  if( element.val().length == 0 )
                  {
                    element.val( defaultText );
                    element.css( { 'color': color } );
                  }
                }
              );

              // Simulate onblur event.
              element.trigger( 'blur' );
            }

            $( document ).ready( 
              function() 
              {
                prefillTextfield( 'candidate_dateOfBirth_day', 'Day' );
                prefillTextfield( 'candidate_dateOfBirth_year', 'Year' );
              }
            );
        </script>
      </head>

      <body>
        <form onsubmit="javascript: alert( 'Submitted!' ); return false;">
          <div class="formField">
            <label name="dateOfBirth-label">Date of birth</label>
            <input type="text" class="textField" id="candidate_dateOfBirth_day" name="candidate_dateOfBirth_day" maxlength="2" style="width: 60px;" />
            <select id="candidate_dateOfBirth_month" name="candidate_dateOfBirth_month" style="width: 90px; color: #999;">
              <option value="" style="color: #999;">Month</option>
              <option value="01" style="color: #000;">January</option>
              <option value="02" style="color: #000;">February</option>
              <option value="03" style="color: #000;">March</option>
              <option value="04" style="color: #000;">April</option>
              <option value="05" style="color: #000;">May</option>
              <option value="06" style="color: #000;">June</option>
              <option value="07" style="color: #000;">July</option>
              <option value="08" style="color: #000;">August</option>
              <option value="09" style="color: #000;">September</option>
              <option value="10" style="color: #000;">October</option>
              <option value="11" style="color: #000;">November</option>
              <option value="12" style="color: #000;">December</option>
            </select>
            <input type="text" class="textField" id="candidate_dateOfBirth_year" name="candidate_dateOfBirth_year" maxlength="4" style="width: 60px;" />
          </div>
          <div class="formField">
            <label name="dateOfBirth-label">Other input field</label>
            <input type="text" class="textField" id="other" name="other" style="width: 60px;" />
          </div>
          <div class="formField">
            <label name="dateOfBirth-label">&nbsp;</label>
            <input type="submit" class="textField" value="Submit" />
          </div>
        </form>
      </body>
    </html>

Thanks in advance!

JSFiddle - here

+3
source share
2 answers

This behavior is caused by the word "Day", which is 3 tokens, while you allow only 2.

If you replace maxlength=2with maxlength=3, everything will be all right.

Usually in Chrome you get your own message, but since you yourself determine the event focus, this message has been suppressed.

Please see what happens if you do not define focus: http://jsfiddle.net/MyewW/2/

, maxlength=3: http://jsfiddle.net/MyewW/3/

+3

. "myform" "mysubmit" submit. prefillTextfield .

$('#mysubmit').click(function(e)
{
  e.preventDefault();
  $('#theform').submit();
});

,

0

More articles:


All Articles