I got issue on my code. I Have a html form where the button submit when clicked but there will be some checking first, if all values are true the form will be submitted - but on my code, it didn't work. does anyone have an idea about this?
$("#button").click(function(e) {
e.preventDefault();
if ($(this).attr("at") == "1") { //some checking
alert("Subsssmitted");
$("form").submit(function() {
alert("Submitted"); // it didn't passed the form didn't submitted
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<!-- some code -->
<button id="button" at="1">Submit</button>
</form>
Add
$('#form').submit()
after
$("form").submit(function(){
alert("Submitted"); // it didn't passed the form didn't submitted
});
Since you are just defining event handler but not triggering submit event.
If possible move
$("form").submit(function(){
alert("Submitted"); // it didn't passed the form didn't submitted
});
Outside the click event handler
You should do this in that way:
$("#button").click(function(e){
e.preventDefault();
if($(this).attr("at") == "1"){ //some checking
alert("Subsssmitted");
// here you trigger event
$("form").submit();
}
});
// here you listen event
$("form").on("submit", function() {
alert("submitted")
})
Just get it here https://jsfiddle.net/6hzt663q/
$('#myForm').submit(function(event){
// do your validation success
if(!success){
event.preventDefault();
}
console.log('fsdfsdfds');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="/google">
<input type="text" id="name">
<button id="button" at="1" type="submit">Submit"></button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your code is working for me, remove e.preventDefault() and try,
$("#button").click(function(e){
if($(this).attr("at") == "1"){
$("form").submit(function(){
console.log('done');
});
}
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<form action="">
<button id="button" at="1">Submit</button>
</form>
Just removed "e.preventDefault();" on button click event and it will work fine.
Related
I am using jcryption for encrypting the form.It works fine if i use submit button in form. Instead if i use button and submit the form manually my jcryption method is not getting called.
below is my code
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#login").bind('click', function(){
document.authenticatorform.username.value=$("#username").val();
document.authenticatorform.password.value=$("#password").val();
alert('outer hello');
$("#authenticatorform").jCryption({
getKeysURL:"<%=request.getContextPath()%>/keypairrequest",
beforeEncryption:function() {
alert('inner hello');
document.authenticatorform.submit()
return true; },
encryptionFinished:function(encryptedString, objectLength) {return true;}
});
});
});
</script>
<body>
<form:form method="post" action="login.htm" name="authenticatorform" id="authenticatorform">
<input type="hidden" name="username"/>
<input type="hidden" name="password"/>
</form:form>
<input type="button" id="login"/>
</body>
</html>
In the code only outer alert is printing.
Is it possible to call jcryption in other than submit button?
Any help will be greatly appreciated!!!!!
Try using on click function instead of bind
Try this:
$("#login").on('click', function(){
//your codes goes here
}
With the HTML below how could I remove the form action and show an alert if the submit button is clicked?
HTML:
<div id="reservation-widget-content">
<form class="resForm" action="https://www.thebookingbutton.com.au/properties" method="get">
<button type="submit" id="submit-button">Check Availability</button>
</form>
</div>
Using Javasrcipt
'onclick' is the event in javascript which is executed when the element is clicked
<div id="reservation-widget-content">
<form class="resForm" action="" method="get">
<button type="submit" id="submit-button" onclick="alert('Success')">Check Availability</button>
</form>
</div>
Using Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit-button").click(function(){
alert("Success");
return false;
});
});
</script>
return false will prevent the page from being redirected after alert.
$('.resform').removeAttr('action').on('submit', function(e){
e.preventDefault();
alert('form submitted');
// rest of the code
});
return false will prevent default behaviour of submit button and stops the event bubbling up through the DOM.
$('#submit-button').click(function(){
alert('Submit button clicked !');
return false;
});
JSFiddle
return false does combined work of
event.preventDefault();
event.stopPropogation();
<div id="reservation-widget-content">
<form class="resForm" action="" method="get">
<button type="button" id="submit-button">Check Availability</button>
</form>
</div>
$('#submit-button').click(function(){
alert('Show something');
});
Try this.
Change the button type to 'button' (now you are using 'submit'. This will submit the form on when button is clicked).
I have the following code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form method="post" id="theform" action="http://example.com" target="_blank">
<input name="email" placeholder="email" type="text">
<input id="submit" type="submit" value="submit">
</form>
<script type="text/javascript">
jQuery(function() {
jQuery('#submit').on('click', function(e) {
e.preventDefault();
jQuery('#theform').attr('disabled', 'disabled');
//Code here
jQuery('#theform').removeAttr('disabled').submit();
}
});
});
</script>
</body>
</html>
The form does not submit. Any idea what is up?
I know I could do an ajax call to manually submit the form to action URL and then use JavaScript to redirect to where I want to send the user in a new tab; however, I don't want to do that because popup blockers will eat up the JavaScript redirect. Hence, I have the form target="_blank" upon submit, which gets the user where I want to send them... if only the code worked.
remove the line e.preventDefault(); from your onclick event handler.
Update:
Sorry my bad that I didn't notice that you were explicitly trying to submit the form later in the code. Even though the above change will fix it, the actual issue is else where. Don't make any changes to the function just rename the submit button's id to something else and update the binding and the code should work.
Working fiddle : http://jsfiddle.net/epednoat/
<body>
<form method="post" id="theform" action="http://example.com" target="_blank">
<input name="email" placeholder="email" type="text">
<input id="smt" type="submit" value="submit">
</form>
<script type="text/javascript">
jQuery(function() {
jQuery('#smt').on('click', function(e) {
e.preventDefault();
jQuery('#theform').attr('disabled', 'disabled');
//Code here
jQuery('#theform').removeAttr('disabled').submit();
}
});
});
</script>
</body>
</html>
You can jQuery submit form with below code.
$( "#theform" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
With JavaScript
function submitform()
{
document.theform.submit();
}
I got a form which I would like to submit using jQuery if the result of checkBrowser function is old.
<form action="xxx" method="post">
...
<input id="iop" type="submit">
...
</form>
jQuery:
$("#iop").mousedown(function(e){
e.preventDefault();
var status=checkBrowser();
if(status=='old'){
$("#iop").submit();
}
});
What I have done:
I debugged the code and it reaches the line $("#iop").submit(); but nothing happens. any idea?
You need to use submit() on <form> not <input> element. From the docs:
The submit event is sent to an element when the user is attempting to
submit a form. It can only be attached to elements
if(status=='old'){
$("form").submit();
}
or more specific by using .closest() to get the closest matching form element of your submit button when traverse up the DOM tree:
if(status=='old'){
$(this).closest('form').submit();
}
Now you are refering to the submit input instead of the form.
Change this:
$("#iop").submit();
To this:
$("form").submit();
Instead of calling submit() explicitly, let the default action do it:
$("form").submit(function(e){
var status=checkBrowser();
if(status != 'old'){
e.preventDefault();
}
});
Also, bind the handler to the form's submit event, not the button.
Change <input id="iop" type="submit"> to <input id="iop" type="button">
and $("#iop").submit(); to $("form").submit();
Try this
<form action="xxx" method="post">
<input id="iop" type="button" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#iop").mousedown(function(e){
//e.preventDefault();
// var status=checkBrowser();
status = "old";
if(status=='old'){
$("form").submit();
}
});
});
</script>
I am trying to submit a form through jquery. I want to get my form submit event get fired when jquery submits the form.
But when form is submitted successfully, submit event handler is not called successfully.
Below is the code :
<html>
<head>
<title>forms</title>
<script src="../common/jquery-1.6.2.min.js"></script>
<script>
$('#testform').submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(html) {
$("#menu").html('<object>'+html+'</object>');
});
return false; // prevent normal submit
});
</script>
</head>
<body>
<form id="testform" action="<%=getURL%>" method="post" >
<!-- <input type="hidden" value="DocQrySetup" name=form>
<input type="hidden" value="bdqdb1" name=config>-->
<input type="hidden" value="test" name=otherParams>
</form>
<script language=javascript>
$('#testform').submit();
</script>
<div id="menu" style="position:relative; bottom: 0; overflow:hidden;">
</div>
</body>
I searched all the forums but was not able to get the resolution.
The form doesn't exist when you run the first script so your event handler has nothing to attach to.
Either need to move that handler to after the form or wrap it in
$(document).ready(function() {
$('#testform').submit(function() {
/* your code */
});
});
The form isn't defined when you attach the event listener, move the code where you attach the event listener after the form or wrap the code with:
jQuery(document).ready(function ($) {
...
});
And add a submit button.
...
<input type="submit" value="submit">
...