First sorry for my bad English.
I would like to show a confirmation layer (id="confirmwin") before submitting a form (id="form"). There is another button (id="yes") to submit the form.
I tried this:
Layer:
<div id="confirmwin" style="display:none">
Are you sure to submit?<br>
Yes No
</div>
JavaScript:
$(document).ready(function(){
$("#yes").click( function() {
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
$('#confirmwin').show();
return false;
});
});
Sometimes (not always) it looks like it's in an endless loop.
Perhaps the #yes click event's off event goes wrong.
Have you tried removing the .submit() while turning it off?
$("#form").off("submit").submit();
shouldn't it be..
$("#form").off("submit") //if
and only if confirmed proceed to do..
$("#form").submit(); //then you can /off() but I don't see the need to
One solution would be to pass extra parameters while triggering the submit event.
You can read more about event data in the jQuery API here.
$("#yes").click( function() {
$("#form").trigger("submit", [true]);
});
$("#form").on("submit", function(e, blnConfirmed) {
// If it's not confirmed yet, show the overlay.
if (!blnConfirmed) {
$('#confirmwin').show();
return false;
} // else it actually IS confirmed, do a real submit
});
You should test this code first. It's just an example.
It is easy:
Just add an global var:
var ignoreConfirm = false;
so it will look like:
$("#yes").click( function() {
ignoreConfirm = true;
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
if(!ignoreConfirm){
$('#confirmwin').show();
return false;
}
});
simples as this
<form id="xpto" name="" action="" ... onsubmit="return callJavascriptFunctionConfirm();">
//bla bla bla here
</form>
function callJavascriptFunctionConfirm(){
//do the logic here
if (yes)
return true;
else
return false;
}
}
Related
I'm trying to create a function in javascript that gets an alert to show up when you click the submit button. I managed to get the alert to show but it only pops up when you open the page but doesn't work when you click the submit button.
heres the function i created in javascript
function orderTics(){
//creates alert
var orderTotal=35;
alert("Your order total is $"+orderTotal);
}
I called the function in html like this:
<script>
orderTics();
</script>
I'm still very much a beginner so any and all tips will be greatly appreciated
You can use the below.
$("#FormSelector").on("submit", function() {
//Your code goes here
});
You could use the on submit function like this:
$("form.class-name").on("submit", function() {
alert("I've been submitted.");
});
Vanilla JS onsubmit event:
document.querySelector("form.class-name").addEventListener("submit", function() {
alert("I've been submitted.");
}, false);
You can also use the event.preventDefault(); method to prevent the form from going to another page, like this:
$("form.class-name").on("submit", function(event) {
even.preventDefault();
alert("Do stuff");
});
Vanilla JS onsubmit event with event.preventDefault(); method:
document.querySelector("form.class-name").addEventListener("submit", function(event) {
event.preventDefault();
alert("I've been submitted.");
}, false);
NOTE: when you use the event.preventDefault(); method the form won't redirect to the target page, even if you click the ok button in the alert box.
Finally you can just use the click event on the submit button, like this:
$("button.submit-button-class").on("click", function() {
alert("I've been clicked!");
});
Vanilla JS onclick event:
document.querySelector("button.submit-button-class").addEventListener("click", function() {
alert("I've been clicked!");
}, false);
Call your function like this:
<input type="button" value="myButton" onclick="orderTopics();">
I have a form which posts some data to the server
<form action="action.html" method="post" id="formComments">
// controls, etc
</form>
<script>
function validateFormJustBeforePost()
{
//
return true;
}
</script>
Just before the form is posted, I'd like to run a script which returns true or false.
If true it should continue with the post, otherwise not (an error message will be shown)
The form post can happen on clicking a button inside or outside (page menu) the form above.
How to achieve that?
I ran the below but it never alerts:
$(document).ready(function(){
$('form').submit( function()
{
alert("Something");
});
});
onsubmit event handler, for example
<form onsubmit="return validateFormJustBeforePost()" ... >
or in <script>:
document.getElementById('formComments').onsubmit = validateFormJustBeforePost;
or, the most proper way
function validateFormJustBeforePost(e){
if( invalid ){
e.preventDefault()
return false;
}
}
document.getElementById('formComments').addEventListener( 'submit', validateFormJustBeforePost);
my code is as follows
$(document).ready(function() {
// this is a button to add the form to the DOM tree.
$("#submitPara").click(function() {
$("body").append('<form id = "dimensionAndObjects" action = "#"></form>');
some code to add some input fields, omitted...
$('#dimensionAndObjects').append('<p><input id = "submitDO" type = "submit" value = "submit"></input></p>');
return true;
});
$('#dimensionAndObjects').submit(function() {
alert("haahhhahhaha");
return false;
});
});
it seems that the submit function doesn't work because the alert info doesn't appear.
if i put the submit function inside the click function, it doesn't work either.
what's wrong? I am a totally freshman to jQuery, thanks in Advance!
since the form is created dynamically you need to use event delegation
$(document).on('submit', '#dimensionAndObjects', function() {
alert("haahhhahhaha");
return false;
});
$('#dimensionAndObjects').live('click',function(e) {
e.preventdefault();
alert("haahhhahhaha");
return false;// for not submit the form
return true ;// for submit the form
});
UPDATED
Html Code:
<input type="textbox" id="textbox" value="">
<input type="button" id="btn" value="Validate" onclick="document.write('VALIDATION PASSED')" />
JS Code:
$(document).ready(function() {
$("#btn").click(function() {
if ($("#textbox").val().length == 0) {
alert("Validation error");
return false;
}
}).prop("onclick", null );
})
I have updated my code. So the issue is that after first click my onclick event stopped working. How I could fix it?
P.S. Please DO NOT change html code. I have some reasons to ask about it, but please could you please do it only with javascript? I realize that probably this is not the most easy way but I have some technical limitations in my application.
Thanks!
JSFiddle http://jsfiddle.net/B5GWx/12/
$(document).ready(function() {
$("#btn").click(function() {
alert("Want to show only this message");
return false;
}).prop("onclick", null );
})
http://jsfiddle.net/B5GWx/5/
You can't reliably, cross-browser, use a DOM2 handler to prevent a DOM0 handler from running.
What you can do, though, is remove the DOM0 handler entirely:
$(document).ready(function() {
var btn = $("#btn");
btn.click(function() {
alert("Want to show only this message");
return false;
});
btn[0].onclick = null; // <==== Here
});
Just removing the DOM handler will do the job. No need to return false; or e.preventDefault();
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
}).prop("onclick", null );
})
DEMO
You are looking for preventDefault
Description: If this method is called, the default action of the event will not be triggered.
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
e.preventDefault();
})
})
I have a form with a submit input and I need that when the button gets clicked, my script do some Ajax actions. Also I need to disable that button during the Ajax request. So I need a jQuery command to avoid real form submit when input is clicked. I tried to use this:
$('input.searchplease').click(function () {
$(this).attr('disabled', 'disabled');
alert('Yep');
//Do Ajax
});
This didn't worked. I mean, the alert shown correctly but form is submitted. So what is your suggestion?
Try this:
$('input.searchplease').click(function (e) {
$(this).attr('disabled', 'disabled');
alert('Yep');
//Do Ajax
e.preventDefault();
});
$('input.searchplease').click(function () {
alert('yep');
return false;
});
This should work
You can do this:
$('form').submit(function(){
... ajax things
return false;
});
I would rather not disable the button (and then enable it), unless I have to.
try this way :
$("#id-of-your-form").submit(function() {
$("#id-of-your-submit-input").attr("disabled", true);
// do-ajax
// you can use jquery's ajax complete handler to enable the submit button again
return false;
});
I think this will do the trick:
$('form').submit(function(event) {
event.preventDefault();
$('#submit-button-ID').attr('disabled', 'disabled');
$.ajax({
...,
success: function() {
$('#submit-button-ID').removeAttr('disabled');
}
});
});