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">
...
Related
I want to change the submit button to call signout function after the user signed in
<html>
<head>
/* Here I have the links for jQuery and bootstrap so, they are working properly
</head>
<body>
<form onsubmit="signIn(event)">
<input type="text" id="username" />
<input type="password" id="password" />
<input type="submit" id="connect_disconnect">
</form>
</body>
<script type="text/javascript">
function signIn() {
code ....
// Below I just change the caption of the submit button from 'Connect' to
// 'Disconnect'
$("#connect_disconnect").text('Disconnect');
}
</script>
<script type="text/javascript">
function signOut() {
code...
}
</script>
</html>
with the above code, when I click on submit button, it will call the signIn function even when I am already signed in. I want it to call signOut function when I am already signed it. any ideas?
Thanks in advance and please let me know if my question is not clear.
If you apply a "submit" event handler to your form, then run event.preventDefault() you can prevent the form from submitting the native way and you can run any Javascript you want.
Below I've added a code example showing what you could do to capture the event.
I try not to add too much philosophy into my answers, but I've decided to include an example of a linked Javascript file.
HTML
<body>
<form id="theForm">
<input type="text" id="username" />
<input type="password" id="password" />
<input type="submit" id="connect_disconnect">
</form>
<script type="text/javascript" src="/script.js"></script>
</body>
Javascript (script.js)
(function() { // Create closure to avoid global-scoped variables
var theForm = document.getElementById('theForm'); // Select the <form> element
theForm.addEventListener('submit', handleFormSubmission); // Bind event listener.
function handleFormSubmission(event) {
event.preventDefault(); // Keep the form from taking any further native action
if( /* user is signed in */ )
signOut();
else
signIn();
}
function signIn() {
// Sign In Code
}
function signOut() {
// Sign Out Code
}
})(); // End closure
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
}
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 have two forms in my page. I hide the form 2 using HTML inline style.
<form id="productionForm" name="productionForm" method="POST" style="display:none;">
I have input button on form 1.
<input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />
I have JQuery code to load the form 2 on button click of form 1. My JQuery code is as follows.
<script type="text/javascript">
$(document).ready(function(){
$("#buttonProductionSummary").click(function() {
$("#productionForm").show();
});
});
</script>
When i click the button in the form one, the page get reloaded again, so the form 2 appears and disappers again. How to can i make the form 2 to appear when i click button on form 1.
You need to prevent the default behavior of the form:
$("#buttonProductionSummary").click(function(e) {
$("#productionForm").show();
e.preventDefault();
});
The problem is that clicking the button in form 1 is triggering a submission of the form (default event)... Hence, the page reloading. You should prevent that by using the submit event as your trigger, handle the form using AJAX and output the result to #productionForm before displaying:
$("#form1").submit(function() {
/* AJAX calls and insertion into #productionForm */
$("#productionForm").show();
return false;
});
as per my requirement i tried to display the form which is to be edit and hide all remaining forms using the following way;
<html>
<head>
<script>
$(document).ready(function(){
$("#what").click(function() { //event called
$(".hello").hide(); // to hide all forms
$('#ayyappa1').show(); //to dispaly needed form only
return false //option to stop
});
});
</script>
</head>
<body>
<form id ="ayyappa1 " class ="hello"> // declare class for every form
<input type="check" class="what"> // trigger of click event
</form>
<form id ="ayyappa2 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa3 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa4 " class ="hello">
<input type="check" class="what">
</form>
</body>
</html>
None of the answers above works, so I figured it out myself. This code works like a charm.
<button id="btn" class="editbutton" >Edit your Profile</button>
<form id="editForm" action="" method="post" name="editForm">
<input type="text" name="txtname" placeholder="enter your name">
</form>`
<script type="text/javascript">
$(document).ready(function(){
$("#editForm").hide();
$("#btn").click(function(e) {
$("#editForm").show();
$("#btn").hide();
});
});
</script>