Using the <input> tag, Two <input type="text"> tags on the same page. Options

[Rayj00]

I admit I am not a seasoned website developer, so have mercy on me!

So, I have two <input type="text"> on the same page.

Here is the first one:

CODE

<input type="text" id="broadcast-id" value="room-xyz" autocorrect=off autocapitalize=off size=20>
<button id="open-or-join">Open or Join Broadcast</button>

And here is the second one:

CODE

<div>
              <h2>Messages</h2>
              <ul></ul>
      </div>
  <form action="">
    <input class="msgs" type="text" id= 'msgs' />
  <button>Send</button>
  </form>

So the first one works fine. But the second one grabs the text from the first one instead of what is typed in it's own text box.

I am using some sample code to add a messaging option in the page from https://www.ably.io/concepts/socketio

Any ideas why the second input is grabbing the first input text?

Thanks, appreciate your response.

Ray

[CharlesEF]

I don't think you've posted enough code for anyone to help. You say the 1st input works but looking at the code, it does nothing. There must be an event listener defined somewhere. The 2nd input is inside a form so the input will only submit its data when the form is submitted but you have no submit button defined.

Maybe someone else can see things I don't.

[Rayj00]

I don't think you've posted enough code for anyone to help. You say the 1st input works but looking at the code, it does nothing. There must be an event listener defined somewhere. The 2nd input is inside a form so the input will only submit its data when the form is submitted but you have no submit button defined.

Maybe someone else can see things I don't.

Well, when I click the button on the first one, it works as designed. No problem.

It's the second one. When I click the "Send" button, it actually sends whatever is in the first input text box!
So I guess just ignore the first input as it works fine.

Why does the second input get the text from the first input rather than it's own text?