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

[Christian J]

The HTML code sample alone won't do anything. Probably there is also some javascript that adds functionality (but apparently in an incorrect way).

[Rayj00]

The HTML code sample alone won't do anything. Probably there is also some javascript that adds functionality (but apparently in an incorrect way).

here is all the code that I am having a problem with:

CODE

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

And java script:

CODE

const form = document.querySelector("form");
const input = document.querySelector("msg");
messageList = document.querySelector("ul");

// handle sending message to server & input reset
        function sendMessage(e) {
                // handle sending message to server & input reset
                e.preventDefault();
                // send input value to server as type 'message'
                socket.emit("message", input.value);
                console.log("message = ", input.value);
                // reset input value
                input.value = "";
        }

                // add listener to form submission
                form.addEventListener("submit", sendMessage);

// add message to our page
        function addMessageToHTML(message) {
                // create a new li element
                const li = document.createElement("li");
                // add message to the elements text
                li.innerText = message;
                // add to list of messages
                messageList.append(li);
        }

        // watch for socket to emit a 'message'
        socket.on("message", addMessageToHTML);

        // display message when a user connects
        function alertUserConnected() {
        addMessageToHTML("User connected");
        }

And server code:

CODE

socket.on("message", function(msg) {
                socket.broadcast.emit("message", msg);
console.log("message = ", msg);

[Christian J]

I'm not familiar with websockets, but I noticed this:

const form = document.querySelector("form");

The above should match all forms on the page, which means all of them will indeed use the defined textfield's value. You may have to use separate scripts, that each only targets its own HTML form.
Correction: querySelector only returns the first match. So if the page contains more than one form, I think the script should submit only the first form.

Also the following part seems incorrect, so the none of the forms should work:

const input = document.querySelector("msg");

(the querySelector() method looks for CSS selectors, like HTML elements, CLASS or ID values; but "msg" is none of that).

This post has been edited by Christian J: Jun 2 2020, 02:03 PM