How do i retrieve data from a input element with javascript?-CodePudding

I am trying to get data from a input element/textarea and it for some reason isn't getting it, and new errors keep popping up, i've tried using on click, i've tried adding an eventlistener, i've tried retriving the elements in a different way but nothing seems to be working.

HTML:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/login.css">
    <title>Document</title>
</head>

<body>

    <div >
        <div ><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="currentColor"  viewBox="0 0 16 16">
            <path  fill-rule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5z"/>
          </svg></div>
        <div >Sign In To PrivDono</div>
        <div >Please confirm your phone number. No dashes.</div>
    </div>


    <div >
    <form onsubmit="return false" id="phoneForm">
        <input type="tel" id="phoneInput" name="phone" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required>
        <button >NEXT</button>
    </form>
</div>
<script src="/js/validation.js" defer></script>
</body>

</html>

JS:


window.onload = function () {

    const form = document.getElementsByClassName("form-submit")[0];
    console.log(form)

    if (form) {

        form.onclick(event => {
            event.preventDefault();

            
            const number = document.getElementById('phoneInput');

            

            console.log(number, number.value);
        })


    };






};

CodePudding user response：

To retrieve data from an input element with JavaScript, you can use the .value property of the input element. For example, let's say you have an input field with an id of "myInput". You could retrieve the value of this input field like this:

const inputField = document.getElementById('myInput');
const inputValue = inputField.value;

This code would get a reference to the input element with the id of "myInput" and then get the value of the input field by accessing the .value property.

It's important to note that this will only work if the input element is in the HTML document and has already been loaded. If the input element is added dynamically to the page after it has loaded, you will need to use a different method to access it.

I hope this helps! Let me know if you have any other questions.

CodePudding user response：

this way...

just use name attribute

const formPhone = document.forms.phoneForm;

formPhone.onsubmit = evt =>
  {
  evt.preventDefault();
  console.log( formPhone.phone.value );
  }

<form name="phoneForm">
  <input type="tel" name="phone" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required>
  <button >NEXT</button>
</form>