Show message in HTML textarea by id - javascript

I'm making a chat application in a pop up mode in the corner of the website. I'm using SignalR for the chat in ASP.NET, C#. The problem is, that not showing the message in the textarea. Here is my code for my HTML file:
<div class="chat-popup" id="myForm">
<form action="/Wilcome" class="form-container">
<h1>Chat</h1>
<label><b>Message</b></label>
<textarea id="messagesList" readonly></textarea>
<textarea placeholder="Type message.." id="messageInput"></textarea>
<button type="button" class="btn" id="sendButton">Send</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
The id="messagesList is not showing. This is in my chat.js file, where showing the sent messages. When I tried to use in a simple <ul id="messagesList"></ul> thats worked but in a lots of messages its going to the infinity up and cant scroll down, so its better to make in textarea (i found only this one for it, if you can tell any one like this textarea, please share)

You can actually apply a scrollbar to more elements than the textarea.
You can have a div, give it a height in CSS and set its overflow-y to scroll
<div id="messagesList"></div>
#messagesList{
height:300px;
overflow-y:scroll
}

Related

Aria-live and showing/hiding a form

I have an Angular 14 app where I display some content. There is a button to put this into "edit mode" wherein I hide the content and show a form. When the user edits the form and clicks "done", the form is hidden and the updated content shows.
This works fine, but I am trying to make this accessible. I added an aria-live to the part with the form and when it is shown the entire form is read out loud using VoiceOver on Mac, but you don't know it's a form. You can tab to the fields and edit the form, though, and then click Done and the form goes away.
However, how do I let unsighted users know that (1) a form has appeared and then (2) the form have disappeared and the regular content has re-appeared?
I have made a stripped down Stackblitz to illustrate.
It's basically this HTML:
<div class="container">
<div class="row">
<div class="col">
<div *ngIf="!showForm" aria-live="polite">
<h1>
Hello {{ myForm.controls.fname.value }}
{{ myForm.controls.lname.value }}
</h1>
<button class="btn btn-secondary" type="button" (click)="onEditForm()">
Edit Greeting
</button>
</div>
<form [formGroup]="myForm" *ngIf="showForm" aria-live="polite">
<h3 class="sr-only">Edit Greeting Form</h3>
<div class="form-group mb-4">
<label for="fname">First Name</label>
<input
type="text"
id="fname"
formControlName="fname"
class="form-control"
/>
</div>
<div class="form-group mb-4">
<label for="lname">Last Name</label>
<input
type="text"
id="lname"
formControlName="lname"
class="form-control"
/>
</div>
<button type="button" class="btn btn-primary" (click)="onDoneForm()">
DONE
</button>
</form>
</div>
</div>
</div>
ARIA live regions aren't well suited for elements containing a lot of text or other things. The screen reader will read them all at once, and, for long things, it's rarely the best thing to do because the user can't interrupt or pause the read, or if he/she does it, the rest is kind of lost.
A much better thing to do for forms is to put the focus on the first input field. The first label will be read as well as the field type, and so the user will know that he/she has to enter some information, and then will press tab to go to the next field, and so on.
Additionally to that, you can use ARIA live, but not on the form or content shown itself. The best use of ARIA live is for displaying short strings saying "The form is shown", "Content is loading", "Your request has been submitted", "There are 12 search results", etc.

How do I make Enter affect a specific submit button when I have more than one?

I have a question about having two submit buttons on a single form (the two buttons are below). I currently have two buttons, one to submit the login data and attempt to validate the login by running a database query, and the other to bring the user to a page to generate a random string and set it as their new password.
I want to be able to make it so that when I hit enter, the second button (the login process button) is triggered, where it is currently the initial button that is done. I have tried turning the first button from an input to a normal button tag, but the issue still persists. Brief snippet of the buttons below, if the full form would be helpful I can edit it in.
I tried some solutions I found online such as this, but I couldn't get it working - maybe I'm just a bit stupid!
Any and all help is fully appreciated. Thanks in advance.
<div class="column">
<div class="field">
<p class="control">
<!-- if clicked, brings user to reset password-->
<input type='submit' class="button is-danger" id='loginRequest' value="Forgot Password" formaction="resetpassword.php">
</p>
</div>
</div>
<div class="column">
<div class="field">
<p class="control">
<!-- if clicked, posts info and attempts to validate login through database-->
<input type='submit' class="button is-primary" id='loginRequest' value="Login" name="requestlogin">
</p>
</div>
</div>

jQuery mobile popup not displaying when linked to from header

I am trying to create a webpage using jQuery mobile, part of my website includes a login feature and I am trying to show the login form in a popup on the page. The button linking to the popup is to be in the header of the page.
My problem is that the popup does not display when I click on the login button :/
I tried to remove the ui-selectmenu-hidden class from the div but that resulted in the popup being displayed without jQuery styles as soon as the page loads.
I know the code I have works without the page or header data-roles as I tested the exact code on another document without those divs.
Here is the code that's giving me the problem:
<div data-role="page">
<div data-role="header">
<h1>Hello World!</h1>
Open Popup
</div>
</div>
<div data-role="popup" id="popupLogin" data-theme="b" class="ui-popup-container ui-selectmenu-hidden popups" data-overlay-theme="a">
<form id="loginForm">
<input type="text" placeholder="Username..." />
<input type="text" placeholder="Password..." />
<input type="button" value="Login" data-theme="b" />
<p>New to The Social Network?</p>
<input type="button" value="Register here" />
</form>
</div>
Any help here would be appreciated. It's likely I've made a silly mistake somewhere, but for the life of me I cannot find it.
If the popup will only be accessed from this one page. Move the popup div inside the data-role="page" div at the same level as the header/content/footer.
If you want to access the login form from several pages, keep the markup as is, but add script on document ready to initialize the widget and enhance the content:
$(function(){
$( "#popupLogin" ).enhanceWithin().popup();
});
DEMO

Redirecting after form submission in Javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/
The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.

Javascript/ Facebox getElementById not returning anything

I am opening up a small modal dialog using facebox with a form and then trying to access the value inside a text field on that form with javascript. This is the HTML code -
<div id="dialog-form95" style="display:none">
<div class="block">
<form action="" method="post" name="form95">
<h3>Setting URL</h3>
<p></p>
<p><label>URL : </label></p><input type="text" class="text" id="du95" name="url"/>
<p><input type="submit" class="submit small" value="save" onclick="updateUrl(95,109); return false;"/></p>
</form>
</div>
</div>
This is the javascript onclick -
function updateUrl(bid, cid){
alert(document.getElementById('du'+bid).value);
}
I even tried hardcoding "du95". Whenever i update anything in the textbox and submit, it shows a blank alert dialog. Nothing shows up in the js console as well.
That's because it has no value. Try and see what happens:
<input type="text" class="text" id="du95" name="url" value="testing" />
For some reason you have display: none in you container div.
After removing that it seems to work fine in jsfiddle: http://jsfiddle.net/8bSdK/

Categories

Resources