jQuery, submit is not cancelling on form - javascript

I have a form which I am trying to use JS to cancel, so that I can submit it using Ajax.
However I just started and as I made the form and tested to see if the submission is cancelled/return's false I discovered that it did not. I checked other threads/posts made but none helped me. This is my form bellow, followed by the .js file. The console in chrome has not given me any errors either.
EDIT: I forgot to mention that the alert in the .js file is not coming up either.
<form method="post" class="form-horizontal form-bordered" id="user-data-form">
<div class="form-group">
<label class="col-md-3 control-label" for="oldpassword">Old Password</label>
<div class="col-md-6">
<input type="password" id="oldpassword" name="oldpassword" class="form-control" placeholder="Old Password">
</div>
</div>
<div class="form-group form-actions">
<div class="col-md-9 col-md-offset-3">
<!-- Submit element -->
<input type="submit" class="btn btn-effect-ripple btn-primary" value="Update">
<!-- END Submit element -->
</div>
</div>
</form>
And the JS file,
$( '#user-data-form' ).submit( function(event) {
alert( "Handler for .submit() called." );
event.preventDefault();
return false;
});

I suggest you try making the event.preventDefault(); the first thing that runs as the alert maybe allowing the normal button pressing function of a HTML form to get run while the alert sits on screen
$( '#user-data-form' ).submit( function(event) {
event.preventDefault();
alert( "Handler for .submit() called." );
return false;
});
As per your comment:
Add the javascript before the
<script src="js/test.js"></script>
</body>
</html>
otherwise its not actually part of the DOM and wont get run
As per your second comment
Try putting your code inside a .ready like this. This ensures that the document is completely built before attempting to attach the .submit handler. And stops it attempting to add the handler before there is an object to attach it to in the DOM.
$( document ).ready(function() {
$( '#user-data-form' ).submit( function(event) {
event.preventDefault();
alert( "Handler for .submit() called." );
return false;
});
});

Try this:
In your html:
<input type="submit" class="btn btn-effect-ripple btn-primary" value="Update" id="SUBMIT">
JS:
$('#SUBMIT').on('submit', function(e) {
e.preventDefault();
var confirm = confirm('Message');
if(confirm === true){
//do something
}else{
return false;
}
});

Try changing your input submit to button and make an id. You can delete your id in your form and put that id in class.
<form method="post" class="form-horizontal form-bordered user-data-form">
<button id="submit" type="submit" class="btn btn-effect-ripple btn-primary" value="Update"></button>
OR
<form method="post" class="form-horizontal form-bordered user-data-form">
<input id="submit" type="submit" class="btn btn-effect-ripple btn-primary" value="Update">
Then in your javascript calling the submit button
$('form.user-data-form #submit').click(function(e){
e.preventDefault();
alert( "Handler for .submit() called." );
return false;
});
Hope that helps

Related

Catch HTML Form "Enter" Press to execute AJAX, not Post

i am currently working on a HTML Form (building it with the pug view engine), that I try to work with in an ajax request after fill-out.
When pressing Enter after editing my input-element, it seems to submit the form (post request i suppose?). I would like to the enter-press event to (just like my button) fire a jquery function instead.
The form is build as following:
form(class="form" action="")
div(class="form-group")
label(for="testid") Tickersymbol
input(name="symbol", type="text", class="form-control", id="testid", placeholder="Please enter the symbol")
div(class = "form-group")
button(class="btn btn-primary" id="getdata" type="button") Get Info
Current JQuery Code:
// This does not work
$("#inputStocksymbol").trigger('click', function (){
console.log("Enter event should have happened.")
})
// This does work
$("#getquote").click( function () {
console.log("Button has been pressed")
})
Are there any suggestions on how this would be possible?
Thanks!
The Return keypress within an input of a form will, by default, submit that form. Therefore, if you want to run some logic when this occurs hook to the submit event:
$("form.form").on('submit', function(e) {
e.preventDefault()
// run your code here
console.log("Button has been pressed");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" action="">
<div class="form-group">
<label for="testid">Tickersymbol</label>
<input name="symbol" type="text" class="form-control" id="testid" placeholder="Please enter the symbol" />
<div class="form-group">
<button class="btn btn-primary" id="getdata" type="button">Get data</button>
</div>
</div>
</form>
Alternatively, if you just want to run some code when Return is pressed within the input, but do not allow the keypress to submit the form, you can hook a keypress event handler directly to the input, making sure to call stopPropagation():
$("#testid").on('keypress', e => {
if (e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
// run your code here
console.log("Return has been pressed");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" action="">
<div class="form-group">
<label for="testid">Tickersymbol</label>
<input name="symbol" type="text" class="form-control" id="testid" placeholder="Please enter the symbol" />
<div class="form-group">
<button class="btn btn-primary" id="getdata" type="button">Get data</button>
</div>
</div>
</form>

jQuery display text input on page

I have a form with a text input field and a button. What I am trying to achieve is that after the user types something in the text input field and clicks the button, the text he typed in the box will be displayed in the span underneath the form. For some reason it doesn't work and I am trying to figure out why.
My HTML:
<form>
<input type="text" id="textInput">
<button id="submitButton" class="btn btn-primary">Submit</button>
</form>
<span id="guests"></span>
My JS/jQuery:
$(document).ready(function() {
$("#submitButton").on("click", function() {
var input = $("#textInput").val()
$("#guests").html(input)
})
});
The JS file in which I have my JS code is linked in the head like this:
<head>
<script src="guestList.js"></script>
</head>
You will need Event.preventDefault();.
Every time you click on button, page is being refreshed so no value is displayed. Default action of <Button> is to submit the form hence page is reloaded(Submitted).
Another easier option would be to set type = "button" hence button will not act as Submit button.
$(document).ready(function() {
$("#submitButton").on("click", function(e) {
e.preventDefault();
var input = $("#textInput").val()
$("#guests").html(input)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="textInput">
<button id="submitButton" class="btn btn-primary">Submit</button>
</form>
<span id="guests"></span>
Your button submits the form so page refreshes.
Just set Button type as type="button"
> <button id="submitButton" type="button" class="btn btn-primary">Submit</button>
HTML:
<form>
<input type="text" id="textInput">
<input type="submit" value="Submit" id="submitButton">
</form>
<span id="guests"></span>
JQuery:
$( document ).ready( function() {
$( "form" ).submit( function(e) {
e.preventDefault();
var input = $( "#textInput" ).val();
$( "#guests" ).html( input )
})
});

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>

Jquery form being submitted twice

I have a really strange problem. My Jquery based form appears to be submitting its self twice.
It only happens when I use the following code to submit my form:
<button class="btn dark"><i id="transfer-spin" class="fa fa-cog"></i> Transfer...</button>
When I use the following, I do not get the double submit:
<input type="submit" value="Transfer" class="btn btn-success dark" id="transfer-button"/>
Here is the code in context:
FORM:
<form class="form-horizontal hidden" id="transfer-form" novalidate>
<fieldset>
<div class="control-group">
<div> </div>
<div class="controls">
<button class="btn dark"><i id="transfer-spin" class="fa fa-cog"></i> Transfer...</button>
</div>
</div>
</fieldset>
</form>
And the JQuery code:
$('#transfer-form').submit(function()
{
event.preventDefault();
//run some error checks
if (messageArray.length !== 0)
{
//Return errors
} else {
$('#transfer-button').prop('disabled', true);
$('#transfer-spin').addClass('fa-spin');
var url ='/api/transfer';
$.ajax({
//Do the ajax call...
You need to pass the event as parameter in submit:
$('#transfer-form').submit(function(event)
Your submit function needs to receive the event object
function (event) {
...
I believe you have to specify the event variable in the function, with that you can prevent default behavior.
$('#transfer-form').submit(function(event)
{
event.preventDefault();
...
}

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

Categories

Resources