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>
Related
I want to submit a data after click "ok" on validate pop up, in my case i can submit data of i'm click ok, but, if i click cancel or press "esc" button, its submiting to.
i dont know why, because this is work on another view.
I'm using Codeigniter Framework btw
This is Code from my problem
<script> $("#btn-selesai").click(function(){
var confirm = window.confirm("Apakah kamu sudah yakin selesai?"); if(confirm)$("#form-soal").submit();}); </script>
This is button for ("btn-selesai")
<Button id="btn-selesai" class="btn btn-primary btn-lg btn-block" >Selesai </Button>
And this is a form method and actions
<form id="form-soal" method="post" action="<?php echo site_url('JawabSoal/jawabanipa'); ?>">
The error is, if i click OK or Done, data is submited to database correctly, but, if i click cancel or press esc, data is submited too. i want if i press esc or click cancel, just close script.
return, however, is needed to pass the return value of confirm to the handler. When Cancel is clicked, false is returned, which then gets passed to the handler and this cancels the default action.
Just add return false; in else condition to stop the form submit.
$("#btn-selesai").click(function(){
if(window.confirm("Apakah kamu sudah yakin selesai?")){
$("#form-soal").submit();
}else{
return false;
}
});
Yo need to prevent default action of the form button.
<script>
$("#btn-selesai").click(function(e){
e.preventdefault() // This will prevent default submit action of the form
var confirm = window.confirm("Apakah kamu sudah yakin selesai?")
if(confirm){
$("#form-soal").submit()
}
})
</script>
I want to submit my form via Ajax. I have done it before but for some reason whenever I click submit it will always submit the form and refresh the page. I made a test function just to console log once submit button is pressed but that doesn't even work.
Once I can get the console log working without page refreshing then I can do the Ajax myself since I know how.
Here is my form (keep in mind Im only going to post one input here just for an example).
function submit_form(e) {
e.preventDefault();
console.log('working');
return false;
};
{!! form_open('myaccount/product_coupon/add',['id' => 'product_coupon_form', 'onsubmit'=> 'submit_form']) !!}
Username <input type="text" name="username" class="form-control">
<input type="submit" class="btn btn-primary" id="submit">
</form>
I have also tried in javascript calling it by $('#submit').click(function()... but that still did nothing
1st: be sure you include jquery
2nd: wrap your code in $(document).ready(function(){ //code here })
3rd: you can use form submit instead of submit button click
$(document).ready(function(){
$('#product_coupon_form').on('submit' , function(e){
submit_form(e);
})
});
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
We are currently building an application using Dojo Mobile and there are several areas where we have input fields and submit buttons. These input fields and submit buttons do are not in a form, and we just use onclick events to "submit" the values in the fields to be utilized in the javascript. Is there a way to make it so that when we press "enter", or, in the case of mobile applications, when the user presses "search" or "go" on their soft keyboard, it will trigger that particular button? We could potentially have multiple submit buttons on the same page.
...
<div>
<input dojoType="dijit.form.TextBox" />
<button dojoType="dijit.form.Button" type="submit">
Filter
</button>
<div>
...
Place your related fields in a form. Register an "onsubmit" event handler and make it the same as your "onclick" handler for the button. When you return from the event handler, you should either return false or you should call event.preventDefault(). This will prevent the form from being submitted (via POST) to the server.
solution in JQuery:
//when you a key on an input
$("input").keyup(function (e) {
//if it is enter
if (e.keyCode == 13) {
//look for the next submit button a trigger a click
$(this).next("button[type='submit']").click();
}
});
I'm not a dojo-coder but the documentation seems quite good:
http://dojotoolkit.org/documentation/tutorials/1.6/key_events/
http://dojotoolkit.org/api/1.6/dojo/keys/ENTER
see here for related answer:
Enter key press event in JavaScript
http://dojo-toolkit.33424.n3.nabble.com/want-enter-key-in-ValidationTextBox-to-submit-the-form-td977303.html
Overriding the Default Form Submit Action
You can override the default submit action on a form. It's semantically wise to keep your forms within <form> tags, even when you want to override the default behavior, and do what you want, as the strong, independent black woman that you are.
jsFiddle
HTML:
<form id="myForm">
<input type="text" />
<button type="submit">Submit</button>
</form>
JavaScript:
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit',function(event){
alert('submit pressed -- do as you please');
event.preventDefault(); // cancels form submission
});
//Chase.
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.