How to scroll to a <div> error message and then place cursor in field?

Discussion in 'JavaScript' started by wpprod, Jul 28, 2014.

0
  1. #1
    Below is test code for a form. If the user does not input anything in a required field, an error message appears, and the cursor should fall into the field in error. Why isn't the cursor doing this?

    


<html>

<head>

<script>
//  Clear text field when radio button is clicked

$(window).load(function(){
$(function() {
    $('input:radio[name=sourceCode]').click(function() {
        if($(this).attr('id') == 'sourceCodeInc') {
            $('#sourceCodeIncPrice').show();
        } else {
            $('#sourceCodeIncPrice').hide();
            $('#sourceCodeIncPrice').val('');
               }
    });
});

//  onload, scroll to top of page, focus in sysname field
$.fn.focusWithoutScrolling = function(){
  var x = window.scrollX, y = window.scrollY;
  this.focus();
  window.scrollTo(x, y);
};

$('#sysname').focusWithoutScrolling();


});



</script>

<link href="../shared/site-style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.inlineErrrorMsg {
    color:red;
    margin: 0px 0px;
    padding-left: 25px;
    background-position: 0px left;
    background: transparent url(../images/downarrow.png) no-repeat center left;}



</style>

</head>
<body>

<script Language="JavaScript" Type="text/javascript">
<!--

function ShowErrMessage(div, message) {
    div.innerHTML = message;
    div.style.display = 'block';
    div.scrollIntoView();
}

function CheckSystemName(){
     var divID = document.getElementById("nameError");
     if (NewProductForm.SystemName.value == "")
     {
     ShowErrMessage(divID, 'Please enter the Name of your product:');
//   document.NewProductForm.SystemName.focus();
     document.getElementByID("sysname").focus();
     document.getElementByID("sysname").select();


// var fieldRef=document.NewProductForm.SystemName;
//setTimeout(fieldRef+".select();"+fieldRef+".focus( )",10);
    return (false);
    }
    else
    { divID.style.display = "none";  }

  if (NewProductForm.SystemName.value.length < 2)
  {
    ShowErrMessage(divID, 'Please enter at least 2 characters for the product:');
   theForm.SystemName.focus();
    flag=1;
    }
    else { divID.style.display = "none"; }
}

function Business_FunctionRequired(){
      var divID =  document.getElementById("Business_FunctionError")
  if (NewProductForm.Business_Function.selectedIndex < 0)
  {
        ShowErrMessage(divID, 'Please select at least one Function:');
    theForm.Business_Function.focus();
    flag=1;
    }
    else
    { divID.style.display = "none"; }
    }

function productDescRequired(){
     var divID = document.getElementById("productDescError");
     if (NewProductForm.productDesc.value == "")
     {
    divID.innerHTML = "Please enter the Description of your product:";
    divID.style.display = "block";
     divID.scrollIntoView();
    theForm.productDesc.focus();
    flag=1;
    }
    else { divID.style.display = "none"; }
    }


//--></script><FORM METHOD="POST" action="newproduct-add.asp" name="NewProductForm" onsubmit="return ValidateInLine(this)" language="JavaScript">


<div class="inlineErrrorMsg" id="nameError" style="display: none;"></div>
<p align="left" style="margin-left: 20">
<b>
<a name="ProductName"></a>*Name of product:&nbsp; </b>

&nbsp;
<INPUT onkeypress="return check(event)"name="SystemName" id="sysname" size="64" maxlength="255" onblur="CheckSystemName()"></P>

<div class="inlineErrrorMsg" id="Business_FunctionError" style="display: none;"></div>
<P>
<b>*Function:</b>&nbsp;&nbsp;&nbsp; (To select more than one, hold down Ctrl
key and click.)
<BLOCKQUOTE>
<P>
&nbsp;<select size="8" name="Business_Function" multiple onblur="Business_FunctionRequired()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>

<option>Other</option>

</select>
<div class="inlineErrrorMsg" id="productDescError" style="display: none;"></div>
<P><b>*Description of Product</b>:</b></P>
<BLOCKQUOTE>
<P>
<TEXTAREA NAME="productDesc" ROWS=5 COLS=35 onkeypress="return check(event)" onblur="productDescRequired()"></TEXTAREA>
<BR>
</P>
</BLOCKQUOTE>
<P style="text-align: center; margin-left: -80px;">
<BR>

<INPUT onkeypress="return check(event)"TYPE=submit VALUE="Next" name="Next">&nbsp;
<INPUT onkeypress="return check(event)"type="reset" value="Cancel" name="Cancel" onClick="cancel()"><p>&nbsp;</p>

</b>



</FORM>
<script>
function resetForm()
{
document.getElementById("NewProductForm").reset();
}
</script>




</body>

</html>
    Code (markup):

     
    wpprod, Jul 28, 2014 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    You need to wrap all of the code in the document ready short code:
    
$(function() {
// code here
});
    Code (markup):
    
$(function() {

  $('input:radio[name=sourceCode]').click(function() {
      if($(this).attr('id') == 'sourceCodeInc') {
          $('#sourceCodeIncPrice').show();
      } else {
          $('#sourceCodeIncPrice').hide();
          $('#sourceCodeIncPrice').val('');
             }
  });

  //  onload, scroll to top of page, focus in sysname field
  $.fn.focusWithoutScrolling = function(){
    var x = window.scrollX, y = window.scrollY;
    this.focus();
    window.scrollTo(x, y);
  };
   
  $('#sysname').focusWithoutScrolling();

});
    Code (markup):
     
    HuggyStudios, Jul 29, 2014 IP
  3. wpprod

    wpprod Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Sorry for not being clear. I included the (window.load) JQuery script because I thought it possible it may be conflicting with the longhand form validation Javascript. There is a lot of commented out script, and other examples in the form fields that I have been trying, but none seem to work.
     
    wpprod, Jul 29, 2014 IP