jQuery Remove Action and Show an Alert - javascript

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).

Related

jquery preventdefault on submit form will not be re submitted

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.

jcryption form submit not working with button click

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
}

Can't prevent submit on dynamically inserted <button> into DOM, that is part of a form

I have a really strange issue, that seems very basic but I can't get it to work.
I can't prevent the submit event of the button, that is dynamically instered into a div that is also part of a form.
Markup
<form>
...
<div class="dynamically-inserted">
<button class="copy-inquiry">Copy</button>
</div>
...
<button id="submit-form" type="submit">Submit</button>
</form>
jQuery
$( "body" ).on( "click", ".copy-inquiry", function(e) {
e.preventDefault();
console.log("button clicked");
});
On click the form submits and the console.log("button clicked") doesn't get printed. If I add type="button then the form doesn't submit but still nothing happens.
Thanks for checking this out.
You have to provide id='frm' to the form
Fiddle link for further explanation
Html
<form id="frm">
<button type="submit" class="btn1">ss1</button>
<button type="submit" class="btn2">ss2</button>
<button type="submit" class="btn3">ss3</button>
</form>
js
$(document).ready(function() {
$("#frm").submit(function(e) {
e.preventDefault();
var val=$(this).find("button[type=submit]:focus").attr("class");/* this selects the class of button which trigger submit event */
alert(val)
});
});
Hope this helps
The fix was apparently really simple. Change the body to document like this.
$( "document" ).on( "click", ".copy-inquiry", function(e) {
e.preventDefault();
console.log("button clicked");
});
JSFiddle https://jsfiddle.net/rj1405/jaordzuy/2/
You can also use <input> tag instead of <submit.
Please check the JSFidller The bellow code is not working in Stackoverflow
as given in the following example.
$("#form").submit(function(e) {
e.preventDefault();
alert('submit button')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="submit" class="btn1"/>
<input type="button" class="btn2" value= "btn2"/>
<input type="button" class="btn3" value= "btn3"/>
</form>

How to submit form with jQuery .submit?

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();
}

html form with multiple submitbuttons

I have 2 submit buttons in an HTML form.
How can I know which submit button has triggered the JavaScript function?
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
// I can't use onclick handler
// I can't use JQuery.. I want to do only with javascript
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1">
<input type="submit" value="submit2">
</form>
<button value="delete row" id="but1" onclick="disps()">delete row</button>
I want to do different actions based on the different submit buttons clicked.
It is not possible to check the button clicked through the onsubmit event. Instead move the call to verifyData() to the onclick handler of each button. Use return in the onclick call to cancel submission if false is returned by verifyData()
<script language="javascript" type="text/javascript">
function verifyData(button) {
// validate
switch (button.value) {
case "submit1":
// do somehting
break;
case "submit2":
// do somehting
break;
// ...
};
// submit the form
return true;
}
</script>
<form method="post">
<input type="submit" value="submit1" onclick="return verifyData(this);">
<input type="submit" value="submit2" onclick="return verifyData(this);">
</form>
How about putting an onclick event handler on both buttons which will set a variable to say which button was clicked?
like so:
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
alert(btnClicked);
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
}
var btnClicked = 0;
function setSubmit(which) {
btnClicked = which; return true;
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1" onclick="return setSubmit(1);">
<input type="submit" value="submit2" onclick="return setSubmit(2);">
</form>
Are you allowed to use the jQuery library?
If you can using this you can easily bind to each submit button based on an id.
For example:
<form id="form1" method="post">
<input type="submit" value="submit1" id="submit1">
<input type="submit" value="submit2" id="submit2" >
</form>
<script type="text/javascript">
$("#submit1").click(function(e)
{
// Do stuff when 1 is clicked.
$("#form1").submit();
});
$("#submit2").click(function(e)
{
// Do stuff when 2 is clicked.
$("#form1").submit();
});
</script>
you could also have the buttons as a type of button to avoid any issues, but you should be able to simply return false; to stop the button of type submit from... submitting
Here is how I would do it... Firstly I would use jQuery so you must include that in your document like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
It would also mean your HTML can be simplified to:
<form method="post">
<input type="submit" value="submit1"/>
<input type="submit" value="submit2"/>
</form>
Then you can use jQuery:
<script>
// When the document is ready
$(function(){
// Action performed when a submit button in the form is clicked
$("form[type='submit']").click(function(e){
// Get the value attribute
var val = $(this).val(),
validation_has_passed = false;
// If it is submit1
if(val == "submit1") {
// Validate submit 1
validation_has_passed = true;
// If it is submit2
} else if(val == "submit2") {
// Validate submit 2
validation_has_passed = true;
}
// If all validation is OK submit the form
if(validation_has_passed === true) {
$("form").submit();
}
// Ensure pressing these buttons doesn't submit the form
e.preventDefault();
});
});
</script>

Categories

Resources