Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Using the <input> tag

Posted by: Rayj00 Jun 1 2020, 12:46 PM


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

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




Posted by: CharlesEF Jun 1 2020, 03:57 PM

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.

Posted by: Rayj00 Jun 1 2020, 05:30 PM

QUOTE(CharlesEF @ Jun 1 2020, 04:57 PM) *

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?

Posted by: Christian J Jun 1 2020, 06:03 PM

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

Posted by: Rayj00 Jun 1 2020, 07:38 PM

QUOTE(Christian J @ Jun 1 2020, 07:03 PM) *

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);


Posted by: Christian J Jun 2 2020, 12:11 PM

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

QUOTE(Rayj00 @ Jun 2 2020, 02:38 AM) *

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:

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

(the https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector looks for CSS selectors, like HTML elements, CLASS or ID values; but "msg" is none of that).

Posted by: CharlesEF Jun 2 2020, 12:51 PM

Christian J, The 1st post showed the input with the class 'msgs', which is not 'msg'. The OP changed the HTML when he posted the 2nd example.

Posted by: Christian J Jun 2 2020, 02:01 PM

QUOTE(CharlesEF @ Jun 2 2020, 07:51 PM) *

Christian J, The 1st post showed the input with the class 'msgs', which is not 'msg'.

Actually there's one INPUT with the ID "broadcast-id", and another with both CLASS and ID value "msgs". But the OP also needs to use the proper syntax for the CLASS or ID in the querySelector.

QUOTE
The OP changed the HTML when he posted the 2nd example.

True, both the CLASS and ID are missing there.


Posted by: Rayj00 Jun 3 2020, 12:46 PM

QUOTE(CharlesEF @ Jun 2 2020, 01:51 PM) *

Christian J, The 1st post showed the input with the class 'msgs', which is not 'msg'. The OP changed the HTML when he posted the 2nd example.


Like I said, I am very green when it comes to html. If you can, please advise how I use the <input type=text> along with the subsequent document.querySelector.

I will continue to research and experiment in the meantime.

Appreciate it,

Ray


Posted by: Christian J Jun 3 2020, 02:50 PM

You could use two copies of the javascript, that each gets its data from different forms and textfields. To do so, use different IDs for the FORM and INPUT elements and target those IDs in querySelector, like

CODE
<form id="form1" method="post" action="">

with

CODE
...querySelector('#form1');

etc.

But I don't know if the server-side script can handle submissions from multiple forms (or if you want it to do that).

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)