I have a login form. No doubt it accepts username / password. And I have 2 buttons, submit button and a cancel button.
What I want to do is when user clicks on submit button, login request starts processing. User can see the login screen for 8-10 seconds. When he clicks on cancel button that should allow him to cancel form submission (cancel login).
Please let me know how to do this. I know there can be a js function but I haven't encountered any. Thanks a lot in advance!
Have you tried :
function cancel () {
document.execCommand('Stop')
}
<input type = "button" name="cancel" value = "cancel" onclick = "cancel()" />
When user sends the login request, the request and authentication must be handled by some server side script like php. So, put a link on the cancel button to another server side script. This script should try to logout the user. If he has already logged in, he will log out so the cancel works. In other case, if he hasn't than nothing happens, the script ends doing nothing.
here is simple example with this you can create your own
html code
<form name="f1" action="test.jsp" method="get">
username:<input type="text" name="username">
password:<input type="password" name='password'>
<input id="sub" type="submit" name="subm" value="subm">
<input id="reset" type="button" name="reset" value="reset">
</form>
and jquery code
$(document).ready(function()
{
$('#sub').click(function(){
$('form [name="f1"]').submit();
});
$('#reset').click(function(){
$('input[name="username"]').val('');
$('input[name="password"]').val('');
});
});
this is just a reference and you can modify and create accordingly with your requirements
My suggestion:
"cancel" button is hidden at first.
When "login" button is clicked, send a login request, hide or disable "login" button, and show "canccel" button. then setup a default handler for normal login procedures:
$.post('login', params, function(){handler.loginCallback()});
When "cancel" button is clicked, replace the handler with another procedure:
handler.loginCallback = function() { ... }
If login failed, do nothing; If login succeeded, send another logout request.
Related
I want to ask about "multiple form actions with one submit button"
The form actions will be 2 places, Zoho CRM and Google form.
I have tested but the lead didn't save and can't go to thank you page.
I'm not sure if change to this script is correct or not:
function SubmitForm()
{
if(document.forms['leadform'].onsubmit())
{
showResultDiv();
document.forms['leadform'].action='https://crm.zoho.com/crm/WebToLeadForm';
document.forms['leadform'].submit();
document.forms['leadform'].action='https://docs.google.com/forms/d/e/1FAIpQLScQzsovLE8zusA88V7VTKQ5ACVYkbg0PWQmTsPd1NKGum8Tsw/formResponse';
document.forms['leadform'].submit();
}
return true;
}
The type of button is submit:
<input class="button" type="submit" value=">> Submit" onclick="javascript: return SubmitForm()">
I think the SubmitForm() will never be executed. the form has been submitted,and go to another page.
EDIT:
I guess that you are a freshman for web development. this page can help you know about <form> and <input type='submit'>
<button id="Submit" onclick= "write_task_content()"> Submit.</button>
I have this code written on my page for submit button. write_task_content() function is writing the activity of users into the file. I need to redirect to another page which is in another directory when same submit button being clicked.
for example:
Current path C:\xampp\htdocs\CC_real task\3GBCJUK5B10I32J9O2EJNNQ339GPKH.html where Submit is written. where write_task_content() function needs to be executed to save user activity and with the same button redirect to another page in the same window browser C:\xampp\htdocs\IA_real task\3RKALKFQG14FDCEAT1S123EW94A792.
How could I do that?
First create your submit button:
<form action="destination-page.html">
<input type="Submit" value="Submit" />
</form>
Then, in the <script>...</script>, attach an onsubmit event to the form either using javascript or jquery:
Javascript:
var form = document.getElementsByTagName('form')[0];
form.addEventListener('submit',write_task_content,false);
jQuery:
$(document).ready(
$('form').submit(write_task_content);
);
When the submit button is clicked, write_task_content() will execute first and then the browser will request destination-page.html.
After saving the details use
window.location = "http://www.example.com";
This redirects to another location.
I have a form which does a 'post' to java code, on submit.
The requirement is as follows - On submit an alert box should come with 'ok' button where the user will read the info. and then click 'ok'.
This is just a info dialog, and nothing else.
But the alert box should stay there until he clicks 'ok' button.
I have given jquery submit and also tried form submit . The form is getting refreshed and alert box is going out of screen onsuccessful submit , as the entire form is getting posted and refreshes the screen.
You should use the confirmation box, and prevent the default action if it isn't confirmed. See my comments in the code.
$(function() {
$('form').on('submit', function(e) {
if( !window.confirm('Do you want to send this form') ) { /* ask for confirmation */
e.preventDefault(); /* if not confirmed, stop the default action, else send it */
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" />
<input type="submit" value="Send" />
</form>
I have an overlay popup with a form inside. The form has a button and a textbox (imagine something like the FB Like and Comment box). Every interaction with the form triggers a MySQL DB Insert called through a PHP function. The problem is that after having clicked on the button or commented (and pressing enter key on the keyboard), the overlay disappears and the main page is refreshed. I don't want this to happen and I want to keep the focus on the popup. How can I do that?
Here's some code:
<div id="LikeAndComment">
<form name="formLAC" method="post" action="">
<div id="containerLike">
<button type="submit" id="likeit" value="FALSE" onClick="{vote(); keepFocus();}">
<img src="images/implike_BUTTON.jpg" "/>
</button>
</div>
<div id="containerComment">
Commenta: <input type="text" class="input" id="comment" onkeydown="if (event.keyCode == 13) { this.form.submit(); keepfocus(); return false; }"></input>
</div>
</form>
</div>
And here's the code of the keepFocus function:
function keepFocus() {
$('.formLAC').focus();
};
When you submit form as default without prevent form submit and using ajax, The browser will generate a new request and redirct you to the action url that you defined.
What you ask is to submit the form without redirect the page.
The ideal solution is to use ajax.
You can catch the submit-form event and prevent the default action.
then you have to handle it with you own code, In this case the ajax function.
An example how to send form with ajax you can see on this post with nice answer:
link to how make form submit with ajax
I have this form that submits to work.php.
What I want to do is disable the submit button when the form is submitted, then re-enable it after 5 seconds or so, so I don't get multiple posts.
How can I do this?
Also, if I press the enter key in one of the text boxes while the submit button is not clickable then it will redirect me to work.php which don't want to happen.
<form method="post" action="work.php">
<strong>Message:</strong>
<input type="text" id="message" name="message" class="message" />
<input type="submit" id="submit" onClick="this.value='Processing form';this.disabled=true;if(Submitting()){this.form.submit()}else{this.value='Submit';this.disabled=false;}" value="Submit" />
</form>
<form id="your-form">
<input type="submit" id="submit" onclick="doSubmit(this);" value="Submit" />
</form>
<script>
function doSubmit(el) {
var frm = document.getElementById('#your-form');
el.value = 'Processing...';
el.disabled = true;
frm.submit();
setTimeout(function(el) {
el.value = 'Submit';
el.disabled = false;
}, 5000);
}
</script>
This is one way to do it. There are several others.
You don't need to worry about this. If the user spams the form submit in any way (clicking submit or hitting enter), only one complete request is sent to the server - every time the submit is triggered, it resets the POST and starts again.
Do note that using JavaScript to stop this behaviour is pretty bad, considering it's incredibly easy to disable JS and spam away, which is one of the reasons why browsers only allow one POST submission at a time.
If you're using AJAX (which you haven't specified), then you should use #drrcknlsn's answer.
If your using Ajax you use the "Ajax Manager Plugin." It will prevent double requests.
That way you don't have to worry about a person hitting enter or the submit button multiple times. Only one request will go through until it is finished(but by then I would assume a success message and clearing of the form would happen)