I attempted to shift my focus back to the input box, but for some reason, it doesn't want to cooperate

Question

I attempted to shift my focus back to the input box, but for some reason, it doesn't want to cooperate

I'm having trouble getting the focus to return to the input box in my form after an invalid entry triggers an alert box. I've written what should be the correct code, but for some reason, it's not working as expected.

Here's the code snippet I've been using:

HTML:

<form name="myform" onsubmit="validate()"> 
            Amount   <input name="num" id="principal"gt;<br/>  </form>

JS:

function validate(){  
  var num = document.myform.num.value;  
  if (isNaN(num) || num == 0 || num < 0 || num == null) {  
    alert("Please enter a valid entry")
    document.getElementsById("principal").focus(); }
  else {  
    return true;  
    }  
  }

I appreciate any help in identifying where I may have gone wrong. Thank you!

javascript

Answer 1

Answer №1

Have you noticed any error messages in your console? The correct method is "getElementById," not "getElementsById."

Additionally, it's important to add functionality to prevent the default submit behavior. Below is a modified and functional code snippet:

document.getElementById('submitbutton').addEventListener('click',function(event){
  event.preventDefault();
  validate();
});

function validate(){

  var num = document.myform.num.value;  
  if (isNaN(num) || num == 0 || num < 0 || num == null) {  
    alert("Please enter a valid entry")
    document.getElementById("principal").focus(); }
  else {  
    return true;  
    }  
  }

<form name="myform" onsubmit="validate()"> 
  Amount   <input name="num" id="principal"><br/>  
  <button id="submitbutton">Submit</button>
 </form>

Answer 2

Have you noticed any error messages in your console? The correct method is "getElementById," not "getElementsById."

Additionally, it's important to add functionality to prevent the default submit behavior. Below is a modified and functional code snippet:

document.getElementById('submitbutton').addEventListener('click',function(event){
  event.preventDefault();
  validate();
});

function validate(){

  var num = document.myform.num.value;  
  if (isNaN(num) || num == 0 || num < 0 || num == null) {  
    alert("Please enter a valid entry")
    document.getElementById("principal").focus(); }
  else {  
    return true;  
    }  
  }

<form name="myform" onsubmit="validate()"> 
  Amount   <input name="num" id="principal"><br/>  
  <button id="submitbutton">Submit</button>
 </form>

I attempted to shift my focus back to the input box, but for some reason, it doesn't want to cooperate

Answer №1

Similar questions

JqueryUI Autocomplete functions flawlessly on JSFiddle but fails to work on the actual website

Point the direction to nextjs and react native expo web

What is the reason for using a wrapper with fs.readFile when a callback is included as an argument?

Choose the minimum price from the JSON response of the API

I'm looking to include an icon in my TreeItem component in Material UI 4. How

Switch the checked status of an input dynamically using jQuery function

Transfer information from an HTML document to a Vue application that has been registered

Is it possible to attach a mouse click event to styled text?

Sorting a list with anchor tags alphabetically using Javascript/JQuery

formBuilder does not exist as a function

Is it possible to use a pass-through or helper function to invoke Asynchronous Generators in Node.js?

How to use React hooks to flip an array

Ways to obtain the chosen option from a drop-down menu using jQuery

iOS device encounters failure with Ajax CORS request and redirect

The visualization rendered by ChartJS is not displaying correctly when data is fetched using an AJAX call

Locate all inputs containing a special attribute name, wherein a portion of the name corresponds to a JavaScript variable

I continuously receive the error message "StripeInvalidRequestError: Insufficient funds in Stripe account" despite the fact that there are adequate funds available

Call getElementById upon the successful completion of an AJAX request

Creating an array of strings using data from a separate array of objects in JavaScript/TypeScript

Receiving array data in a Javascript function and storing it within a variable