The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Using the <input> tag, Two <input type="text"> tags on the same page.
Rayj00
post Jun 1 2020, 12:46 PM
Post #1





Group: Members
Posts: 4
Joined: 1-June 20
Member No.: 27,369




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



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jun 1 2020, 03:57 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,735
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Rayj00
post Jun 1 2020, 05:30 PM
Post #3





Group: Members
Posts: 4
Joined: 1-June 20
Member No.: 27,369



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 1 2020, 06:03 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,463
Joined: 10-August 06
Member No.: 7



The HTML code sample alone won't do anything. Probably there is also some javascript that adds functionality (but apparently in an incorrect way).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Rayj00
post Jun 1 2020, 07:38 PM
Post #5





Group: Members
Posts: 4
Joined: 1-June 20
Member No.: 27,369



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 2 2020, 12:11 PM
Post #6


.
********

Group: WDG Moderators
Posts: 8,463
Joined: 10-August 06
Member No.: 7



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 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jun 2 2020, 12:51 PM
Post #7


Programming Fanatic
********

Group: Members
Posts: 1,735
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.

This post has been edited by CharlesEF: Jun 2 2020, 12:53 PM
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 2 2020, 02:01 PM
Post #8


.
********

Group: WDG Moderators
Posts: 8,463
Joined: 10-August 06
Member No.: 7



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Rayj00
post Jun 3 2020, 12:46 PM
Post #9





Group: Members
Posts: 4
Joined: 1-June 20
Member No.: 27,369



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 3 2020, 02:50 PM
Post #10


.
********

Group: WDG Moderators
Posts: 8,463
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 8th July 2020 - 12:34 AM