Disclaimer: I’m a backend programmer and I would like to minimize javascript code in my webpages.
I’m considering using the login form given here as example. In this example we have this
<form class="ui large form">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="email" placeholder="E-mail address">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password">
</div>
</div>
<div class="ui fluid large teal submit button">Login</div>
</div>
<div class="ui error message"></div>
</form>
The login button is just a div which does nothing. There is no action argument in the form tag and there is no submit type input tag.
How do I get the page to send the input field values back to the backend server ?
Note that there is some javascript code visible in the source page that checks the validity of the fields. But there is no hint on how to get send the email and password to the backend and load the logged in page.
The login button is just a div which does nothing
Make it a <button>.
There is no action argument in the form tag
Add one if you want the data to be submitted to a different URL then that of the current page.
Your form should also be method="POST". Passwords do not belong in URLs (which are often logged in plain text).
How do I get the page to send the input field values back to the backend server ?
Use a <button> element to represent your submit button and not a <div> element. The <div> element is when you need a block element and HTML lacks an element with the semantics to describe your content. That isn't the case here, you want to submit a form and that is what submit buttons are for.
Related
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.
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>
I have an angularjs form that pulls default data from scope. With the default data the form is expected to be validated and hence enable the button for submission but the reverse is the case except data is entered on the input field and this enables the button. here is the snippet
<div ng-controller="FormValidationController as frmValidationController" class="ui basic segment">
<form class="ui form" name="frmValidation" novalidate>
<div ng-class = "{'has-error':frmValidation.option1.$invalid && !frmValidation.option1.$pristine}"
class="required field">
<label>Selection</label>
<input ng-model="option" ng-minlength="3" formcontrol
name="option1" placeholder="Option" type="text"
class="ng-dirty ng-valid ng-touched" required>
<div _ngcontent-c5="" ngxerrors="option1">
<div class="input-error-message" ngxerror="validName" hidden="">
selection should be there
</div>
</div>
<p ng-show = "frmValidation.option1.$invalid && !frmValidation.option1.$pristine"
class = "input-error-message">required</p>
</div>
if the model has data, the button should be enabled on launch but this never happens and I want it to happen
<button ng-click="submit(); frmValidationController.submitForm(frmValidation.$valid)"
ng-disabled ="!frmValidation.$dirty || frmValidation.$invalid"
class="ui primary button" tabindex="0" type="submit">
Proceed
</button>
The problem is here:
ng-disabled ="!frmValidation.$dirty || frmValidation.$invalid"
Specifically:
!frmValidation.$dirty
The form is only dirty if an actually user has interacted with it. Because you're loading default data, the form is filled in correctly but the user has NOT touched or "dirtied" it.
Remove that check and it should work as expected I believe.
I am currently editing a script I had made for me some time back. I no longer have contacts for the original coder due to no longer using Yahoo messenger.
On my contact form it uses the onclick="$('#contact-form').submit()" function.
I am trying to get the contact form the submit but when I complete the form and click "Apply" it will not submit, My guess is down to the Javascript validating some of the fields that I have changed or deleted. Is there a way I can get round this? I have removed the onclick function however it will not submit when I try to complete the form.
Here is my form heading:
<div id="contact-form" class="box1 form css3" xmlns:pageScript="urn:pageScript">
<a name="loanform"></a>
<form action="thankyou.php" method="post" id="contact-form">
<fieldset class="loan">
<legend><span>1 - Your Details</span></legend>
<ol class="group" data-role="listview">
<li class="clearfix" id="ValItem">
<label for="Val" id="ValCheck">Amount</label>
And for the bottom of the form as the form has a fair few fields...
<fieldset class="submit" style="height:0;overflow:hidden">
<ol class="group" data-role="none">
<li></li>
</ol>
</fieldset>
<div id="warning-box">
<p>By pressing the APPLY button below you agree to our Terms and Conditions.</p>
</div>
<div class="full-width clearfix">
<div id="previousButton" class="prev-button"><img class="full-width prev-desktop" src="back-button.png" border="0"/><img class="full-width prev-mobile" src="back-button.png" border="0"/></div>
<div id="nextButton" class="next-button"><img class="full-width next-desktop" src="next-button.png" border="0"/><img class="full-width next-mobile" src="next-button.png" border="0"/></div>
<div id="SendEnquiry" name="SendEnquiry" onclick="$('#contact-form').submit()" class="apply-button"><img class="full-width apply-desktop" src="apply-button.png" border="0"/><img class="full-width apply-mobile" src="apply-button.png" border="0"/></div>
</div>
</form>
<button id="popButton" style="display:none">x</button>
</div>
I do not get any error messaged displayed, When you click the Apply button it does not seem to do anything. I have no objection as to how the form can be submit, I am really just looking for a way round it to make sure clients are able to submit there request.
As you said "I have no objection as to how the form can be submit, I am really just looking for a way round it to make sure clients are able to submit there request.", You can also sumbit as below.
Just write this line above </form> tag.
<input type="submit" value="SUBMIT"/>
This line will add new button in your page. You can replace it with your old button's css.
This way is very simple and you do not need to include jquery in your html page.
Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.