I need to 'click' one button using JavaScript, when the user clicks another button.
In Chrome on Mac, the following works fine. However, in Safari on Mac, clicking the button simply reloads the current page, rather than triggering the expected behaviour.
JS
$( 'document' ).ready( function() {
var $myForm = $('#my-form');
$('#button-fake').on('click', function(){
console.log("FAKE CLICKED");
if ($myForm[0].checkValidity()){
console.log("FORM VALID");
$('#button-real').click();
console.log("FORM SUBMITTED");
}
});
});
HTML
<input type="submit" id="button-fake" value="Fake button" />
<input type="submit" id="button-real" value="Real button" />
PS: Not my idea, I just need to get it working.
You may need to add e.preventDefault();
var $myForm = $('#my-form');
$('#button-fake').on('click', function(e) {
e.preventDefault();
console.log("FAKE CLICKED");
if ($myForm[0].checkValidity()) {
console.log("FORM VALID");
$('#button-real').click();
console.log("FORM SUBMITTED");
}
});
$('#button-real').on('click', function(e) {
console.log('button-real clicked')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='my-form'>
<input type='text' required>
<button type='submit' id='button-fake'>Submit</button>
<button type='button' id='button-real'>Real</button>
</form>
The button will trigger a form submit. The form submit will reload the page. To prevent this, call preventDefault().
$( 'document' ).ready( function() {
var $myForm = $('#my-form');
$('#button-fake').on('click', function(e){
e.preventDefault(); // <- This
console.log("FAKE CLICKED");
if ($myForm[0].checkValidity()){
console.log("FORM VALID");
$('#button-real').click();
console.log("FORM SUBMITTED");
}
});
});
Related
I have a situation here. I have a form which contains hidden value. When user clicks the browser back button then the form should be submitted. I have controlled the back space button but haven't found a solution for browser back button. Here is my code.
Form
<form id="movevalue" action="/media" method="post">
<input type="hidden" id="pagedetail" name="pagedetail" value="<?php echo $pagenumber; ?>" />
<input type="submit" value="" style="display:none" />
</form>
At the end of page this is my script.
script
<script>
$(function(){
$(document).bind("keydown keypress", function(e){
if( e.which == 8 ){ // 8 == backspace
$('#movevalue').submit();
}
});
});
window.onbeforeunload = function(evt)
{
if (typeof evt == 'undefined')
$('#movevalue').submit()
}
</script>
window.onbeforeunload this not work for me.
Just use this code and this will cover all state of page leave or close...
<script>
window.onbeforeunload = function() {
$('#movevalue').submit();
return true;
};
</script>
try this:
$(function () {
if (window.history && window.history.pushState) {
window.history.pushState('', null, '');
$(window).on('popstate', function (id) {
$('#movevalue').submit();
});
}
});
I have a form with multiple buttons that submit to it that differ by value. After I click a button, and then click a second button, the function operates on them both instead of just the second button. Is there a way to prevent this behavior?
This is somewhat related to a question I asked here: Why does function only work on second click? but the solution isn't valid if there a multiple buttons as it just registers the first button from the list of buttons.
JS:
$(document).ready(function () {
$(':button').click(function (){
var myval = $(this).attr("value");
$('#post-form').on('submit', function(event) {
event.preventDefault();
console.log("form submitted!");
console.log(myval);
//var cbtn = $("button");
//var btnval = cbtn.val();
//console.log(cbtn);
document.getElementById('gbimg').style.display = 'none';
document.getElementById('rgimg').style.display = 'none';
create_post(myval);
});
});
function create_post(btnval) {
console.log("create post is working!");
$.ajax({
HTML:
<form action="/create_post/" method="POST" id="post-form">
<div class="col-sm-4" id="toprow">
<h4 style="font-family:verdana"> Models </h4>
<img src='{% static 'images/USAcomplete2.png' %}' class="img-responsive thumbnail" id='gbimg' >
<div class="btn-toolbar">
<button type="submit" name="model" value="test" class="btn btn-default">test</button>
<button type="submit" name="model" value="test2" class="btn btn-default">test2</button>
<button type="submit" name="model" value="test3" class="btn btn-default">test3</button>
</div>
</div>
</form>
You need to prevent the form from submitting before the user clicks the button.
$(document).ready(function () {
$('#post-form').on('submit', function(event, myval) {
event.preventDefault();
console.log("form submitted!");
console.log(myval);
//var cbtn = $("button");
//var btnval = cbtn.val();
//console.log(cbtn);
document.getElementById('gbimg').style.display = 'none';
document.getElementById('rgimg').style.display = 'none';
create_post(myval);
});
$(':button').click(function (){
var myval = $(this).attr("value");
$('#post-form').trigger('submit', myval);
});
Update
Sorry, I think this code should work. The above code would run twice, since a button click would be considered a form submit as well.
$(document).ready(function () {
$('#post-form').on('submit', function(event) {
event.preventDefault();
});
$(':button').click(function (){
var myval = $(this).attr("value");
console.log("form submitted!");
console.log(myval);
//var cbtn = $("button");
//var btnval = cbtn.val();
//console.log(cbtn);
document.getElementById('gbimg').style.display = 'none';
document.getElementById('rgimg').style.display = 'none';
create_post(myval);
});
What is happening here is that you are binding the submit event to #post-form a second time when a second button is clicked, as the binding happens inside the button clicking event callback.
The best way to prevent this is to move this
$('#post-form').on('submit', function(event) {
...
});
outside of your button click event.
<div id="language-container">
<form id="language_radio">
<input type="radio" value="//domain.tld/page.php?lang=02" name="language" id="alb">
<label for="alb">Shqip</label>
<input type="radio" value="//domain.tld/page.php?lang=03" name="language" id="eng">
<label for="eng">English</label>
</form>
</div>
<script type="text/javascript">
$("#language_radio input[type=radio]").change(function(event) {
event.preventDefault();
newLocation = $(this).val();
$("body").fadeOut(800, newpage);
});
</script>
What I'm trying to accomplish is, when a radio button is selected, I want to fade out the entire body, and then redirect to another page.
However, I can't seem to get it to do anything. It won't fade out or redirect.
How can do I fix it (newb to JS) :)?
You can use:
$("html").fadeOut();
as such:
<script type="text/javascript">
$("#language_radio input[type=radio]").change(function(event) {
event.preventDefault();
// This variable is useless
// You can remove it if it's not
// being used
newLocation = $(this).val();
$("html").fadeOut(800, function() {
// Redirect to the newLocation here
// similar behavior as clicking on a link
window.location.href = newLocation;
});
});
</script>
try :
<script type="text/javascript">
$("#language_radio input[type=radio]").change(function(event) {
event.preventDefault();
newLocation = $(this).val();
$("html").fadeOut(800, function() {
window.location.href = newLocation;
});
});
</script>
you can do this by
$("#language_radio input[type=radio]").change(function(event) {
event.preventDefault();
$("body").fadeOut(1000,function(){
window.location.href = $(this).val();
})
});
jsfiddle
I'm trying to get my form to not submit when I press the cancel button on my JavaScript dialog.
I have this code:
$(document).ready(function() {
$("#submit").click(function (e) {
e.preventDefault();
var link = $(this).attr("href"); // "get" the intended link in a var
var result = confirm("Are you sure you want to log this fault?");
if (result) {
document.location.href = link; // if result, "set" the document location
}
});
});
The form submits regardless if I press the Ok or Cancel buttons or not even though I have the prevent default code.
My HTML code is:
<button type="submit" id="submit" class="btn btn-default"><span class="glyphicon glyphicon-floppy-save"></span></button>
<form id="myform" method="post" action="/the/post/url">
<!-- other elements -->
....
....
....
<button type="submit" id="submit" class="btn btn-default">
<span class="glyphicon glyphicon-floppy-save"></span>
</button>
</form>
$(function() {
//this would do the same as button click as both submit the form
$(document).on("submit", "#myform", function (e) {
var result = confirm("Are you sure you want to log this fault?");
//if cancel is cliked
if (!result) {
return false;
}
//if ok is cliked, form will be submitted
});
});
the following like won't work since this reffers to the submit button which does not have an href attribute.
var link = $(this).attr("href"); // is invalid.
try
$(document).ready(function() {
$("#submit").click(function (e) {
e.preventDefault();
var result = confirm("Are you sure you want to log this fault?");
if (result) {
$('#formId').submit(); // where formId is the id of your form
document.location.href = "url to which you want to redirect";
}
else
return false;
});
});
side note: from wherever you got this piece of code, they must be using a hyperlink <a> styled like a button, with a valid href attribute :)
I have a form that I am stopping from submitting with e.preventDefault(). (I've also tried return false).
I would manually tell the form to submit after a short delay, using the code:
$('form').delay(2000).submit();
Unfortunately, e.preventDefault() seems to disable the form from submitting even if it explicitly submitted using the submit() function.
Any idea how I can combine these intentions? I'd like to show a loading screen for a couple of seconds.
Thanks!
$("form").on('submit.blocker', function (e) {
setTimeout(function () {
$("form").off('submit.blocker').trigger('submit');
}, 2000);
e.preventDefault();
});
Try this.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var okToSubmit = false;
$('form').submit(function (e)
{
if ( ! okToSubmit)
{
e.preventDefault();
var $form = $(this);
setTimeout(function ()
{
okToSubmit = true;
$form.submit();
}, 2000);
}
});
});
</script>
<form action="somewhere">
<input type="text" name="something" />
<input type="submit" />
</form>
Above code is tested.
$('form').on('submit', function(e) {
if (!e.isTrigger) {
setTimeout(function() {
$("form").trigger('submit');
}, 2000);
e.preventDefault();
}
});
you may want to try this it works for me:
<form name="demo" action="111" onSubmit="fun();return false">
<input type="text" name="name1" />
<input type="submit" />
</form>
and in the javascript
fun()
{
var x= document.forms["demo"];
setTimeout(x.submit(),2000);//time in milliseconds
}