With this example of reCAPTCHA v3, the g-recaptcha-response textarea is outsite the form...
<form method="post">
<input type="text" name="name" placeholder="Name">
<input type="text" name="email" placeholder="E-Mail">
<script type="text/javascript">
var onloadCallback = function() {
console.log('onloadCallback');
grecaptcha.execute(
"SITEKEY",
{action: "homepage"})
.then(function(token) {
console.log('verifyCallback')
console.log(token);
}
);
};
</script>
<script src="https://www.google.com/recaptcha/api.js?render=SITEKEY&onload=onloadCallback"></script>
<input type="submit" value="Send">
</form>
So there's no $_POST["g-recaptcha-response"]
What adjustments are necessary to provide the textarea inside the form tags?
You need the hidden input in your form that receives the response and you also need to set the token to the hidden input value
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" value="" />
document.getElementById('g-recaptcha-response').value = token;
However, I'm also having issues with the recaptcha v.3 implementation in Magento 2.
Related
I need to save the token which is stored in this hidden input.
This is my request:
cy.request({
method: 'GET',
url: '/auth/login',
body: {
email: email,
password: password,
},
}).then((response) => {
const page = response.body;
});
The response.body returns:
<!DOCTYPE html>
<html>
<body>
<form class="form" action="" method="post" autocomplete="off">
<input id="email" class="form-control" type="text" name="email" placeholder="Email" />
<input id="password" class="form-control" type="password" name="password" placeholder="Password" />
<input type="hidden" name="_token" value="c5LWQtrMVkKXxBFKs1zFzrJYq4PgNifndvcV0F6O">
<button type="submit">Login</button>
Other Login
</form>
</body>
</html>
I'm not sure how I find/grab the value from the hidden input with the name _token
From the cypress CSRF example:
it('strategy #1: parse token from HTML', function () {
// to fetch the login page, and then parse the HTML contents
// to find the CSRF token embedded in the page
cy.request('/auth/login')
.its('body')
.then((body) => {
// we can use Cypress.$ to parse the string body
// thus enabling us to query into it easily
const $html = Cypress.$(body)
const token = $html.find('input[name=_token]').val()
...[see link for full code]
})
my input for example :
<div class="form-group">
<label for="name">New Name Offers :</label>
<input name="newNameOffers" class="form-control" id="newNameOffers">
</div>
<div class="form-group">
<label for="">From Email :</label>
<input name="fromEmail" placeholder="Email" class="form-control" id="fromEmail">
</div>
How can i put it on text area ....
That my textArea :
<textarea class="form-control" name="HEADER" id="HEADER" rows="11">i need to dispay my values here <textarea>
(i need to put the values not the name of variable)
I have tried to make a simple form for you. You can modify it as you wish. For this, you need to take help of javascript or other similar front end technologies. However, if your requirement is just to take the value to back end then you can get both value $request->newNameOffers and $request->fromEmail then you can concatenate and store in your desired way.
function myFunction() {
var val1 = document.getElementById("newNameOffers").value;
var val2 = document.getElementById("fromEmail").value;
var res = val1 +' '+ val2;
document.getElementById("HEADER").innerHTML = res;
}
<!DOCTYPE html>
<html>
<body>
newNameOffers:<br>
<input name="newNameOffers" onChange="myFunction()" class="form-control" id="newNameOffers">
<br>
fromEmail:<br>
<input name="fromEmail" placeholder="Email" class="form-control" onChange="myFunction()" id="fromEmail">
<p>Click the button to alert the contents of the text area.</p>
<!-- <button type="button" onclick="myFunction()">Try it</button> -->
<br>
<textarea id="HEADER"></textarea>
<script>
</script>
</body>
</html>
Why do you want to put it using Laravel, You can do it in the front-end(JavaScript, JQuery, Vue.js, React) itself.
I used django-tinymce in my project. The django-tinymce editor is appended on textarea field using "tinyMCE.execCommand('mceAddControl', false, id); " command but the problem is that it does't have image upload functionality from local machine. please suggest me which editor suits in my condition.
Use jquery-easyui-1.3.4 example is below
<form id="my_form" action="/quiz/upload/" method="post" enctype="multipart/form-data">
{%csrf_token%}
<input id="image" name="image" type="file" /> <input type="submit" value="upload" />
and my script
<script type="text/javascript">
$(function(){ $('#my_form').form({ success:function(data){
tinymce.activeEditor.selection.setContent("<img src='"+data+"' />"); } });
});
Hi i was using normal form submission in WordPress plugin settings options.php. Now i like to use ajax based form submission in WordPress admin.i can able to do the form submission using ajax by onsubmit in form
For submit
<form id="hhh" onsubmit="return sub();">
<label>FirstName</label>
<input type="text" name="fname" value="">
<label>LastName</label>
<input type"text" name="lname" value="">
<input type="submit" class="button-secondary" value="save" />
</form>
For reset
<form method="post">
<input class="button-secondary" name="reset" type="submit" value="Reset" />
</form>
ajax for submit
function sub() {
$.ajax({type:'POST', url: 'options.php', data:$('#hhh').serialize(), success: function(response) {
}});
return false;
}
i can easily save the value by submit using ajax but for resetting the value i have to call a php function which will reset the form and it will add new default values.How can i achieve this using ajax? Thank
Hi make one html from which submitting without refresh by jquery. Problem is that I am beginner and I dont know how to add validation for html form. I need changes in script so first form will validate by jquery or ajax then it will submit by jquery witout page refresh.. have look in my code. Please provide me working solution in that first form validate by ajax jquery then submit by jquery without refresh.. Thanks in advance
JQUERY:
<script type="text/javascript">
$(document).ready(function(){
$("form#form").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var uno = $("#uno").val();
var name = $("#name").val();
var licence = $("#licence").val();
var email = $("#email").val();
var phone = $("#phone").val();
var dataString = 'uno=' + uno + '&name=' + name + '&licence=' + licence + '&email=' + email + '&phone=' + phone;
$.ajax({
type: "POST",
url: "addd.php",
data: dataString,
success: function(){
$('form#form').hide(function(){$('div.success').fadeIn();});
}
});
return false;
});
});
</script>
HTML FORM:
<form id="form" method="post" name="form" action="">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="choice">Name : </label>
<input type="text" id="name" name="name" value=""> <br />
<label for="choice">Licence No : </label>
<input type="text" id="licence" name="licence" value=""> <br />
<label for="choice">Email : </label>
<input type="text" id="email" name="email" value=""> <br />
<label for="choice">Phone : </label>
<input type="text" id="phone" name="phone" value=""> <br />
<input type="hidden" name="uno" id="uno" value="" />
<br />
</fieldset>
<div align="center">
<input id="button2" type="submit" value="Add Driver" />
<input id="button2" type="reset" />
</div>
</form>
I found multiple errors/mistakes on your HTML form too. some of them I want to mention..
for attribute of label have same value of the next input/select id, read:
http://www.w3schools.com/tags/att_label_for.asp
Dont assign name for name and id attribute, it's misleading.( good practice)
Don't write value ="", if you there is no initial value of any input box.
If u want to validate a hidden field then write some value for that on form intialization, otherwise it wud be always empty and your validation never works.
If u want to validate all input field together for emptyness then use :input selector ,read :
http://api.jquery.com/input-selector/
Don't forget to validate email address
If you want to post a form via ajax then there is no need to write method and action attribute in your form
Your reset button shoud have some value, otherwise its takes default value.
A very useful and handy article for newbie for jquery ajax validation
http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition
OR you can use jquery validator plugin :
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
here is your neat and clean form
<form id="driverForm" name="driverForm">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="lname">Name : </label>
<input type="text" id="lname" name="lname" > <br />
<label for="licence">Licence No : </label>
<input type="text" id="licence" name="licence" ><br />
<label for="email">Email : </label>
<input type="text" id="email" name="email" ><br />
<label for="phone">Phone : </label>
<input type="text" id="phone" name="phone" > <br />
<input type="hidden" name="uno" id="uno" /><br />
</fieldset>
<div align="center">
<input type="submit" id="submitForm" name="submitForm" value="Add Driver" />
<input type="reset" value="clear" />
</div>
</form>
Hope this will be useful for you.
UPDATE
put it insdie submit() and before ajax like this
$("form").submit(function() {
if($('#lname').val() == '')
return false;
});
$.ajax({
NOTE: dont create dataString Manually there is inbuilt function in jQuery.
serialize
Please note that ,this is not matter that your form is submitting or not. most thing is it a valid form or not.
Happy to help :)