How to access form data nested inside divs (TypeScript)

Question

In a following code I want to access user data written in a form each time user presses an enter key after typing some text data inside an input field in chat-form. Do you have any idea how can I access the following text-data using TypeScript? I have already tried with jQuery but none of the tested code seems to work. I am new to web-dev but very eager to learn new things.

<div id="chat-container">

  <div id="search-container">
    <input type="text" placeholder="search" />
  </div>
  <div id="conversation-list">

  </div>
  <div id="new-message-container">
    <a href="#" id="test">+</a>
  </div>
  <div id="chat-title">

  </div>
  <div id="chat-message-title">

  </div>
  <div id="chat-form">
    <input id="chat-form" type="text" placeholder="Type a message!" />
  </div>
  
</div>

Abdelmonaem Shahat · Accepted Answer · 2020-03-23 00:45:54Z

2

first, you should use a semantic HTML by using form tag instead of div so u can use enter key to handle the submit action. second, it is not an appropriate way to duplicate an id for two different elements because id is a unique identifier for the element. finally here is a simple form and it might be helpful. HTML:

<form id="my-form">
  <input type="text" id="my-input" />
  <button type="submit" id="submit-btn">send</button>
</form>

JS:

const formEl = document.getElementById("my-form") as HTMLFormElement;
const inputEl = formEl.querySelector("my-input") as HTMLInputElement;
const submitBtnEl = formEl.querySelector("submit-btn") as HTMLButtonElement;
formEl.addEventListener("submit", e => {
    e.preventDefault();
    // do what you want
});
inputEl.addEventListener("change", (e:Event|any) => {
    console.log(e.target.value)
    // do what you want
})

answered Mar 23, 2020 at 0:45

Abdelmonaem Shahat

5422 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

S.Rucinski Over a year ago

Thank you for you answer. Now I unfortunately get the following error in browser console "TypeError: null is not an object (evaluating 'formEl.querySelector')"

Abdelmonaem Shahat Over a year ago

ok, you can replace formEl with document like this inputEl = document.getElementById("my-input"); and the same with submitBtn

S.Rucinski Over a year ago

It worked perfectly. The only thing that I had to change was the placement of the script. Script had to load right after Form elements. Otherwise elements were not seen. Thank you so much!

qiAlex · Accepted Answer · 2020-03-22 23:43:50Z

1

Before the answer: you have duplicated id="chat-form"

<div id="chat-form">
  <input id="chat-form"type="text" placeholder="Type a message!"/>
</div>

Example

// select element
const elInput: HTMLInputElement = document.querySelector(`#chat-form-input`)

// add onkeypress listener
document.onkeypress = function (e: any) {

    // use e.keyCode
    if (e.key === 'Enter') {
      // code for enter
      console.log(elInput)
      console.log(elInput.value)
    }
}

<body>
  <div id="chat-container">
    <div id="search-container">
        <input type="text" placeholder="search"/>
    </div>
    <div id="conversation-list">

    </div>
    <div id="new-message-container">
      <a href="#" id="test">+</a>
    </div>
    <div id="chat-title">

    </div>
    <div id="chat-message-title">

    </div>
    <div id="chat-form-container">
      <input id="chat-form-input" type="text" placeholder="Type a message!"/>
    </div>
  </div>
</body>

edited Mar 22, 2020 at 23:43

answered Mar 22, 2020 at 21:43

qiAlex

4,3562 gold badges22 silver badges35 bronze badges

1 Comment

S.Rucinski Over a year ago

After running your code I got an error Property 'value' does not exist on type 'Element'.ts(2339)

Blake · Accepted Answer · 2020-03-23 00:12:59Z

0

You should try using a combination of JQuery. Using this, you should put an id on the input element like so:

<input type="text" id="inputField" placeholder="search"/>

Then query the input field with JQuery. Best practice would suggest to store it in a local variable as well.

let inputFieldText = $("#inputField");

Then test for the value in the text field object as returned from JQuery.

if(inputFieldText.val()){
     console.log(inputFieldText.val())
}

For reference, there is also a way to do so with document.getElementById("inputField"). Just link this function to a button that runs on pressing it (such as a "submit" button). Hope this helps!

answered Mar 23, 2020 at 0:12

Blake

401 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to access form data nested inside divs (TypeScript)

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related