Submit function within form - javascript

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.

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>

How to submit form data to backend?

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.

Handling iOS virtual keyboard “previous”, “next”, “Go/Enter” buttons

I am developing a mobile application with jquery mobile, php ,phonegap and cordova
I have a requirement that in the virtual keyboard of all form elements like Text boxes should have next and previous buttons and for the last text box the Done/Go/Enter option should be shown.
How can I handle those buttons programatically without adding plugins.
Here is my form
<form id="loginForm" name="form1">
<div class="row mainpart paddingleftandright clsfieldPadding">
<div class="col-lg-12">
<div class="input-group1" id="email_div">
<input type="email" id="login_form_email"
placeholder="EMAIL ADDRESS" value="" data-clear-btn="true"
data-mini="true" tabindex='1' class="clsPyType clsBodyTxt" autocapitalize="off" onBlur="getPasswordProtectionStatus(this.value);checkLoginEmail(this.value);">
<span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id1">!</span></span>
</div>
</div>
</div>
<div id="login_form_email_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright clsfieldPadding2">
<div class="col-lg-12">
<div class="input-group1" id="password_div">
<input type="password" id="login_form_password"
placeholder="PASSWORD" value="" data-clear-btn="true"
autocomplete="off" data-mini="true" tabindex='2' class="clsPyType clsBodyTxt" onBlur="checkLoginPassword(this.value);">
<span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id2">!</span></span>
</div>
</div>
</div>
<div id="login_form_password_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright">
<div class="col-lg-12 remember-me">
<select name="slider" data-role="slider" id="rememberMe">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div class="col-sm-5 clsPyTypeUprBold Clsremember">Remember Login</div>
</div>
</div>
<div class="row mainpart paddingleftandright">
<div class="col-lg-12">
<!-- <a data-role="button" data-transition="flip"
data-direction="reverse" class="clsBtnHead2 clsBtnRed" id="login_form_submit" onClick="login_form_submit();"><div class="clsBtnTop">LOGIN</div></a> -->
<input type="submit" tabindex='3' id="login_form_submit" class="clsBtnHead2 clsBtnRed" onfocus=" $(this).trigger('click');" value="LOGIN"/>
</div>
</div>
If any one have better ideas please share
All of the fields within a form will have the prev / next buttons which act like tabs do on a real keyboard. The done/Go/enter buttons... well they will naturally occur if there is data to submit. I think this just boils down to semantics and building your form correctly.
In the screen shot, the first field is focused, the next button is available (chevron pointing to the right) and the form is able to be submitted via the GO button. It can be submitted as for all the device knows this form is complete, your validation will decide whether or not the data is complete. What I am getting at here is that you won't be able to hide the return/Go button at will. However you can omit it using a numerical keypad.
The 'done' message occurs above the virtual keyboard and does not submit (unless you submit on blur, as using it blurs whatever field you were focusing on), and looks like a text link.
The 'Enter' & 'Go' buttons will submit the form. So if the last field in your form is numerical (big finger buttons) then you won;t be able to use it for submission unless you submit the form on blur of that field.
Here is a working example: http://codepen.io/morganfeeney/pen/ojdRMQ
I built that to test virtual keyboards on handheld devices. Go and check it out on your iPhone ;)
FYI: the example code you supplied does not have a closing </form> tag.

html form trying to http get when a button is pressed

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.

Categories

Resources