Using the <input> tag, Two <input type="text"> tags on the same page. |
Using the <input> tag, Two <input type="text"> tags on the same page. |
Rayj00 |
Jun 1 2020, 12:46 PM
Post
#1
|
Group: Members Posts: 6 Joined: 1-June 20 Member No.: 27,369 |
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 |
Jun 1 2020, 03:57 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 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. |
Rayj00 |
Jun 1 2020, 05:30 PM
Post
#3
|
Group: Members Posts: 6 Joined: 1-June 20 Member No.: 27,369 |
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? |
Christian J |
Jun 1 2020, 06:03 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,679 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).
|
Rayj00 |
Jun 1 2020, 07:38 PM
Post
#5
|
Group: Members Posts: 6 Joined: 1-June 20 Member No.: 27,369 |
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 |
Jun 2 2020, 12:11 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
I'm not familiar with websockets, but I noticed this:
const form = document.querySelector("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 |
CharlesEF |
Jun 2 2020, 12:51 PM
Post
#7
|
Programming Fanatic Group: Members Posts: 1,981 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 |
Christian J |
Jun 2 2020, 02:01 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
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. |
Rayj00 |
Jun 3 2020, 12:46 PM
Post
#9
|
Group: Members Posts: 6 Joined: 1-June 20 Member No.: 27,369 |
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 |
Christian J |
Jun 3 2020, 02:50 PM
Post
#10
|
. Group: WDG Moderators Posts: 9,679 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). |
Lo-Fi Version | Time is now: 3rd June 2024 - 04:20 PM |