How can I change this function so when I submit form the button disables and page refreshes ?
function thanks() {
setTimeout(function () {
document.location.pathname = "index.php";
}, 3000);
}
Page refresh function is working btw. I just need to disable button.
This is my form
<form method="post" action="<?=htmlspecialchars($_SERVER["PHP_SELF"], ENT_QUOTES, "utf-8");?>?id={{$theme->id}}" id="myForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="price" value="{{$theme->price}}">
<input type="hidden" name="id" value="{{$theme->id}}">
<button type="submit" class="btn btn-success" onclick="thanks()"><span class="glyphicon glyphicon-shopping-cart"></span>Buy theme</button>
</form>
EDIT
Problem is that whenever I disable the button the file doesn't start downloading.. why ?
Try making it into an unobtrusive script:
<form method="post" action="<?=htmlspecialchars($_SERVER["PHP_SELF"], ENT_QUOTES, "utf-8");?>?id={{$theme->id}}" id="myForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="price" value="{{$theme->price}}">
<input type="hidden" name="id" value="{{$theme->id}}">
<button type="submit" class="btn btn-success" onclick="thanks()"><span class="glyphicon glyphicon-shopping-cart"></span>Buy theme</button>
</form>
And in jQuery:
$("#myForm").submit(function (e) {
// do not allow to submit form
e.preventDefault();
// disable the submit button
$(".btn.btn-success").prop("disabled", true);
// do the set time out
setTimeout(function () {
document.location.pathname = "index.php";
}, 3000);
});
Use the disabled property like this:
document.getElementById("<button id>").disabled = true;
On button click, set the disabled property of this button to true
HTML
<button type="submit" class="btn btn-success" onclick="thanks(this)">
jQuery
function thanks(elem) {
$(elem).prop('disabled', 'disabled');
setTimeout(function () {
document.location.pathname = "index.php";
}, 3000);
}
Related
i have an issue with Google Recaptcha V3. Id does work on single form but works only for first form if in page are more than 1 form.
How to make it work for all forms?
I know that issue is with id="recaptchaResponse" but i have no ideas how to fix this! There are smilar questions ou there but could not found a solution.
Javascript:
<script src="https://www.google.com/recaptcha/api.js?render=key1"></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute('key2', { action: 'contact' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
</script>
Forms:
<form class="user" action="" method="post" name="form1" id="form1">
<input type="hidden" name="source" value="form1">
<button type="submit" class="btn btn-success">Submit 1</button>
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
</form>
<form class="user" action="" method="post" name="form2" id="form2">
<input type="hidden" name="source" value="form2">
<button type="submit" class="btn btn-success">Submit 2</button>
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
</form>
Please help! Thanks in advance!
The problem seems to be because the getElementById call only resolves the recaptcha_response input element in the first form and not the second.
A simple fix would be to change the ids of the recaptcha_response elements in each form to something different, say recaptchaResponse1 and recaptchaResponse2. Then the Javascript code to set the tokens could be:
grecaptcha.ready(function () {
grecaptcha.execute('key2', { action: 'contact' }).then(function (token) {
document.getElementById('recaptchaResponse1').value = token;
document.getElementById('recaptchaResponse2').value = token;
});
});
A better approach that is easier to maintain and will work for any number of forms is to specify a class name for the recaptcha_reponse inputs and use the querySelectorAll function to get all the inputs with the given class name and update them.
<form class="user" action="" method="post" name="form1" id="form1">
<input type="hidden" name="source" value="form1">
<button type="submit" class="btn btn-success">Submit 1</button>
<input type="hidden" name="recaptcha_response" class="recaptchaResponse">
</form>
<form class="user" action="" method="post" name="form2" id="form2">
<input type="hidden" name="source" value="form2">
<button type="submit" class="btn btn-success">Submit 2</button>
<input type="hidden" name="recaptcha_response" class="recaptchaResponse">
</form>
grecaptcha
.execute("key", {
action: "contact"
})
.then(function(token) {
document
.querySelectorAll(".recaptchaResponse")
.forEach(elem => (elem.value = token))
;
});
Hope that helps :)
Remove the id tag and use only name tag.
grecaptcha.ready(function () {
grecaptcha.execute({publicKey}, {action: 'forms'}).then(function (token) {
var recaptchaElements = document.getElementsByName('recaptcha');
for (var i = 0; i < recaptchaElements.length; i++) {
recaptchaElements[i].value = token;
}
});
});
I have two submit button in form, one button for validate and form submit form reload, Another one for submit the form with out validate in ajax method, How to do this.
HTML Code:
<form action="" id="form-product" method="post" name="product" enctype="multipart/form-data">
<input type="text" name="title"id="title">
<input type="submit" name="save">
<input type="submit" name="enter">
</form>
$(function() {
$("form[name='product']").validate({
rules: {
title: {
required: true,
},
},
messages: {
title: {
required: "Please enter your Emailid.",
},
},
submitHandler: function(form) {
form.submit();
}
});
});
Actually you can do it a numerous way.I will show you one possible way,
<form action="" id="form-product" method="post" name="product" enctype="multipart/form-data">
<input type="text" name="title"id="title">
<input type="button" name="save" value="validate" onclick="_validate()">
<input type="button" name="submit" onclick="_submit()" value="enter">
</form>
<script>
function _validate(){
console.log("add your validation method here");
// add your validation method here.
}
function _submit(){
console.log("submit your form without validation");
//just submit your form
}
</script>
HTML CODE:
<input type='submit' id='btn1' value='Normal Submit'>
<input type='button' id='btn2' value='New Window'>
JS CODE:
document.getElementById('btn2').onclick = function()
{
form.target = '_blank';
form.submit();
}
or simply try this:
<input type='submit' name='self' value='This window' onclick='this.form.target="_self";' />
<input type='submit' name='blank' value='New window' onclick='this.form.target="_blank";' />
I make some form different action within different button
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add');?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print');?>')">Print</button>
Javascript
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
}
Then, my required attribute not working. Did I do something wrong? Let me know if there is other solution.
Thanks,
I can't give you a good explanation but you need the submit buttons inside the form.
So if you would have a button like:
<input type="submit" value="Submit">,
it will trigger the required attribute.
#Remn If you would still stay on your structure with submit inside a function you could trigger yourself the validation like:
if ($("form")[0].checkValidity())
{
$("form").submit()
}
and then do something with inputs that are invalid by passing through each required element ( input is set in code ):
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
In the below case the invalid inputs will be focused one by one.
The whole code is:
$( function () {
$("body").on("click", "#trigger", function() {
if ($("form")[0].checkValidity())
{
$("form").submit()
}
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
});
});
Where #trigger is an id I set on the button to submit, you can make your own functions to achieve your goal I just used on().
I hope it helps!
Please try bellow code. i hope solve your problem.
<html>
<head>
<title>Submit</title>
<script type="text/javascript" language="javascript">
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
//alert(document.getElementById('form').action);
}
</script>
</head>
<body>
<form id="form" method="get" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required="required">
<button type="submit" class="btn btn-primary" onclick="return submitForm('<?php echo base_url('order/add');?>');" id="submit">Submit</button>
<button type="submit" class="btn btn-warning" onclick="return submitForm('<?php echo base_url('order/print');?>');" id="print">Print</button>
</form>
</body>
</html>
I have test your code by adding Javascript part in Script tag it is working fine. And i tested it on Chrome Windows 10.
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add'); ?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print'); ?>')">Print</button>
<script>
function submitForm(action) {
document.getElementById('form').action = action;
document.getElementById('form').submit();
}
</script>
Using javascript's form.submit() function will cause input validation to be bypassed (according to the HTML specification in point 4 of the form submission algorithm). The only way to trigger HTML input validation is to use a click event on a submit button inside the form, either by the user actually clicking, or in javascript with something like form.querySelector('input[type="submit"]').click().
I want to delay the post of the below form by 3 seconds and have an image pop up.
<form id="test" name="test" method="post" action="">
<input type="hidden" name="inp1" method="post" value="<?php echo $var1 - $var2; ?>">
<input type="hidden" name="inp2" method="post" value="<?php echo $var3 - $var4; ?>">
<input type="hidden" name="inp3" method="post" value="">
<input type="submit" name="inp4" value="Test" />
</form>
I am trying to get the delay part working first and have tried using Javascript in the HTML head part of my php file:
$('test').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 30000); // in milliseconds
});
This currently isn't giving any delay. Any ideas?
you forgot to add # with $("#test")
$('#test').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
Demo
I would switch things up a bit, rather than using a submit button I would change it to a regular button and pass the form in the button. You don't need the submit button at all.
<input type="button" name="inp4" value="Test" onclick="myfunction(form)" />
Then the function
function myfunction(form) {
setTimeout(function() {
form.submit();
},30000);
}
that should do the trick. No jQuery needed
I got a foreach loop which display many forms like this :
<form action="cree-new-user.php" method="post" class="formButtonForm">
<input type="hidden" name="ent" value="<?php echo $corp->id;?>" />
<input type="hidden" name="action" value="delete" />
<input type="submit" class="submit redform" value="delete" />
</form>
When i click on the Delete button it delete the objet in my database.
I would like to create a popup box to confirm if i "really" want to delete it.
I coded this with Javascript :
function Validate(event) {
var thereturn = confirm("Voulez vous vraiment effacer cette entreprise ?");
if (event) {
if (!thereturn) {
event.preventDefault();
}
} else {
return thereturn;
}
}
window.onload = function () {
document.getElementByName("deleteEntreprise").onclick = Validate;
}
It should display a alert popup, but nothing pop...
Do you guys have any clues ?
Even if you get the button correctly you should validate in the form on submit event.
<form action="cree-new-user.php" method="post" class="formButtonForm" onSubmit="return Validate();">
if you return false in the function it won t submit the form.
Try this approach, using onsubmit instead of onclick:
HTML:
<form action="cree-new-user.php" method="post" class="formButtonForm" id="delete-form">
<input type="hidden" name="ent" value="<?php echo $corp->id;?>" />
<input type="hidden" name="action" value="delete" />
<input type="submit" class="submit redform" value="delete" />
</form>
JavaScript:
function Validate(event) {
var thereturn = confirm("Voulez vous vraiment effacer cette entreprise?");
if (event) {
if (!thereturn) {
event.preventDefault();
}
} else {
return thereturn;
}
}
window.onload = function() {
document.getElementById('delete-form').onsubmit = Validate;
};
Code Example