I am trying to implement recaptcha v3 in CakePHP 3.x. My template page looks like:
<?php $this->start('script'); ?>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
function registerSubmit(token) {
document.getElementById("register").submit();
}
</script>
<?php $this->end(); ?>
...
<?php echo $this->Form->create($user, [ 'id' => 'register', 'name' => 'register']) ?>
...
<button type="submit"
data-sitekey="<?php echo Configure::read('Captcha.site')?>"
data-callback='registerSubmit'
data-action='submit'
class="g-recaptcha btn btn-lg btn-secondary text-uppercase">Get Started</button>
<?php echo $this->Form->end(); ?>
As far as I can tell the registerSubmit call never gets executed and my form doesn't submit - why?
I followed the instructions on the Google Developers page
I suspect the issue is that you have a button in the form with the id "submit". Any element in the form with a name or an id is reflected in a form attribute with that name. So if you have an element <input id="elephants"/> the form object will have an "elephants" attribute. In this case the submit button is accessible via form.submit, but this masks the submit() function. You can test this by adding an alert to the start of your registerSubmit() function. I believe the alert will get executed, and then the submit() call will fail to run the submit button as it is not a function.
If a form control (such as a submit button) has a name or id of submit, this method will mask the form's submit method.
MDN Web docs
Related
I have been having problems passing Javascript variable to php using ajax on the same page.I have a try.php page and once a button is clicked, I want a value sent to try.php variable without reloading the page..
This is my form code,I am actually looping trough a database record
<?php
foreach($vars as $var){
?>
<form method="POST">
<button class="btn btn-warning btn-sm btn_edit" name="btn_edit" value="<?php echo $var['mem_id'];?>">
<span class="glyphicon glyphicon-pencil"></span></button>
<?php
}
?>
Here is my ajax code
$('.btn_edit').click(function(e){
var uid = $(this).val()
$.post("try.php",{ btn_edit : uid},
function(){
});
console.log(uid);//I could see the id logged on console
$('#edit_details').modal('show');
e.preventDefault();//prevent the form from submitting
});
On my try.php page, I have this code to check if it passed succesfully
<?php if(isset($_POST['btn_edit'])){
$user_id = $_POST['btn_edit'];
}?>
There are two modifications need to be done:
Change 1: Only input elements can have value attribute. And as you have <button>, it should be assigned with some other attribute which can be captured using jQuery, so here I am going to use data-bind attribute with it.
<button class="btn btn-warning btn-sm btn_edit" name="btn_edit" data-bind="<?php echo $var['mem_id'];?>">
And then,Change 2:
Get data-bind value with jQuery like this:
$('.btn_edit').click(function(e){
var uid = $(this).attr('data-bind'); // Using attr, not val()...
$.post("try.php",{ btn_edit : uid},
function(){
});
console.log(uid);//I could see the id logged on console
$('#edit_details').modal('show');
e.preventDefault();//prevent the form from submitting
});
<form>
<button type=submit>save</button>
<button onclick="create();return false;">click</button>
<textarea id="some">Testing</textarea>
</form>
<script>
function create(){
window.location.href="some.php";
}
</script>
Though I have added return false in the onclick event, when I click the button it gets submitted. How to make that button to stop from form submission. If I have some other function in the create() function instead of redirecting, return false code will stop from submission. But here am redirecting the page so return false is not working.
I tried putting return false code in create() function too but no luck.
How to stop the form submit ?
<button type=submit>save</button>
Should be:
<input type=submit value="save" onclick="create();return false;"/>
And
<button>click</button>
USE..
<input type="button" onclick="create();">
As in create function you have redirected page so actually form is not submited but page is redirected.
If you use the button like
<button type="button">foobar</button>
it won't submit the form as long as you don't bind some js functions on it.
If you don't give this attribute type="button" the form takes it as a normal button and trys to submit it. Same like if you would add the attribute type="submit".
Actually In my form page of Angularjs, have two submit buttons i.e In one field set i have one button for update and another button at the outside of all field sets for submission of whole page.
Code
<form ....... data-ng-submit="Register()">
<fieldset>
............
.............
<div data-ng-submit="update()">
<button type="submit" class="btn btn-success">Update Vehicle</button>
</div>
</fieldset>
<fieldset> .........</fieldset>
</form>
After submission of form to the ctrl
.ctrl(function(){
**we have two methods in it.......**
$scope.update=function(){
}
$scope.register=function(){
}
}
While updating the fieldset it goes to register method and its executes the logic in it.
how to format the data-ng-submit="update()", such that it will call the update() method in Controller
I'm trying to change the form tag below in order to use jQuery. Already, clicking the buttons changes the display from rows to columns and vice-versa but I want to avoid the page refresh. I'm really new at jQuery and can't honestly say what my mistakes are when trying to change it myself.
<form id="rowsToColumns" action="index.php?main_page=specials&disp_order=1" method="POST">
<input type="hidden" name="style_changer" value="columns"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
</form>
<form id="columnsToRows" action="index.php?main_page=specials&disp_order=1" method="POST">
<input type="hidden" name="style_changer" value="rows"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
</form>
I'm also trying for the buttons to call a different stylesheet upon click. This stylesheet is not needed for the display to change from/to rows/columns as I mentioned above. The actual page is written using php as shown below:
<?php $this_page = zen_href_link($_GET['main_page'], zen_get_all_get_params()); ?>
<div id="style_changer">
<?php if($current_listing_style == 'rows') {?>
<form id="rowsToColumns" action="<?php echo $this_page;?>" method="POST">
<input type="hidden" name="style_changer" value="columns"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
</form>
<?php } else { ?>
<form id="columnsToRows" action="<?php echo $this_page;?>" method="POST">
<input type="hidden" name="style_changer" value="rows"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
</form>
<?php } ?>
</div>
If the question is "how to change a form in order to use jQuery and avoid the page refresh", then the jquery form plugin is your friend, as it turns any html form into an ajax-powered one.
Simply follow their instructions and you'll get it working in no time (provided your form already works as is).
You can prevent the Default form Submission by preventing the default action on the submit button..
$('button[type=submit]').submit( function(e){
e.preventDefault(); // Stops the form from submitting
});
Well, for a very vague method you can use $.ajax and take advantage of reading the <form>'s pre-existing attributes to decide on submission method and read the elements' values as submissiong data:
$('form').on('submit',function(e){
var $form = $(this);
// submit the form, but use the AJAX equiv. instead of a full page refresh
$.ajax({
'url' : $form.attr('action'),
'method' : $form.attr('type'),
'data' : $form.serialize(),
'success' : function(response){
// process response (make CSS changes or whatever it is
// a form submission would normally do)
}
});
// prevent the normal submit and reload behavior as AJAX is now
// handling the submission
e.preventDefault();
});
However, for this to work you'll need some variation of a stripped-down PHP response just for the purpose of the AJAX request (avoid resending headers, script tags, etc. and just return the raw data that jQuery can use to make a UI decision).
These are two files
Calling.php
<html>
<body>
<form action="Called.php" method="get">
<input type="button" name="B1" value="B1">
<input type="button" name="B2" value="B2">
<input type="Submit" name="Submit1"/>
<!-- Google
yahoo
-->
</form>
</body>
</html>
And Called.php
<?php
if(isset($_GET("Submit1")))
{
echo("<script>location.href = 'http://stackoverflow.com';</script>");
}
if(isset($_GET["B1"]))
{
echo("<script>location.href = 'http://google.com/';</script>");
exit();
}
if(isset($_GET["B2"]))
- List item
{
echo "<meta http-equiv='refresh' content='0;url=http://www.yahoo.com'>";
exit();
}
?>
When i click the buttons "B1" and "B2", page will blink but now where redirect and third one "Submit" button will redirect to new page and there i am getting the out put as "Called.php".
Please spend few seconds for this php beginner.
You can't directly because the button click is a client side activity and PHP is server side. If you make all the inputs submit then the one the user clicked will be submitted as part of the $_GET array but that only works if the user clicks one of them and doesn't submit the form by, say, hitting Enter in a text input.
You could attach AJAX events to the button and have them trigger off a PHP script to run the function you want to run, but that has its own set of issues.
EDIT: I should note that your method of redirecting is rather inelegant to say the least. You can just use header() to do the redirection, it would be much cleaner than all this messing around with echoing out javascript.
You need to use Ajax to do this. If you are using jQuery ajax the code will look something like this
$(function(){
$('input[type="button"]').click(function(){
var name = $(this).attr('value');
$.ajax({
type :'GET',
url : 'Calling.php',
data :{name:name}
success : function(data) {
//do smthng
}
})
})
})
//Code is not tested. Need to verify.