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;
}
});
});
Related
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().
<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>
In the above code, I want the action attribute of form to be /deal/(deal-id-entered-by-user). Is there any way to do it without using any javascript? And is it at all possible even with javascript?
You should be able to do it simply with javascript like this:
document.querySelector('form').onsubmit = function() {
this.setAttribute('action', "/baseurl/" + document.querySelector('input[name=dealId]').value)
}
<form action="/baseurl/" method="POST">
Kindly enter the deal id :
<input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>
The best way is to change the form action by javascript:
document.forms[0].action=documnet.getElementById('dealId').value;
You can use it like this:
<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" class="myBox" name="dealId">
<input type="submit" value="Get the deal" />
</form>
$('.myBox').on('change', function (event) {
var myVal = $(this).val();
$('form').attr('action', function(i, value) {
return value + myVal;
});
});
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);
}
I have to choose one simple jquery function to serialize both oft these forms by getting form name dynamically
following jsfiddle is not working.
JSFIDDLE
HTML
<form id="JotForm" method="post" enctype="text/plain" class="jot">
FirstName:<input type="text" name="FirstName">
Email:<input type="text" name="Email">
<input id="btnFade" type="button" name="submit" value="Submit">
</form>
<form id="MyForm" method="post" enctype="text/plain" class="jot">
FirstName:<input type="text" name="FirstName">
Email:<input type="text" name="Email">
<input id="btnFade" type="button" name="submit" value="Submit">
</form>
Code Part
$(function () {
$("#btnFade").bind("click", function () {
//alert(FormId);
// setTimeout(function () {
var FormId = $(".jot").attr('id');
alert(FormId);
var FormSerialize = $(FormId).serialize();
console.log(FormSerialize);
});
});
You need to change
var FormSerialize = $(FormId).serialize();
to this
var FormSerialize = $("#" + FormId).serialize();
to make it match to element with id FormId.
In future when asking questions, please provide more complete example or explain more thoroughly what you are trying to achieve. I still can't understand what you are trying to achieve with this.
While running the following script i am getting error "Please use POST request". I am just a beginner to html and javascript. Can any one help what is wrong here.
javascript
function submitform(){
if (!document.getElementById('reschedule').onclick) {
alert("reschedule")
}
if (!document.getElementById('home').onclick) {
alert("home")
}
if (!document.getElementById('cancel').onclick) {
alert("cancel")
}
}
and html is
<html>
<form name="myform" method="post,get" onsubmit="return submitform();">
<input type="submit" id="reschedule" value="reschedule" />
<input type="submit" id="home" value="home" />
<input type="submit" id="cancel" value="cancel" />
</form>
<form name="myform" method="post" onsubmit="return submitform();">
change this:
method="post,get"
to this:
method="post"
In the <form> tag attributes