How can i use the CCaptcha not using models (rules) and ActiveForms?
Just create and check. e.g. through AJAX
I recommend using Yii models for forms even if you're making modal ajax forms.
You simply need to bind the onsubmit method to make ajax call with the form data instead of reloading the whole page.
I can show you this example of Ajax form on this page:
http://www.eldeposit.com/agencia/1552/oi-real-estate
Uses Yii and has captcha.
In this case it is not a modal but it is a Ajax form with captcha.
jQuery('#contactar_submit_btn').click(function(){
var submit_label = jQuery('#contactar_submit_btn').attr('value');
jQuery('#contactar').ajaxSubmit(
{'dataType': 'json', 'success': function(data) {
jQuery('#contactar_submit_btn').attr('disabled', false);
jQuery('#contactar_submit_btn').attr('value', submit_label);
var timestamp = Number(new Date());
var csrc = jQuery('#contactarCCaptcha').attr('src');
jQuery('.captcha_image').attr('src',csrc+'?t='+timestamp);
if (data.error.length > 0)
alert(data.error);
else {
jQuery('#contactar_target').html(data.success);
jQuery('#contactar').resetForm();
jQuery('#contactar_target').show();
}
},
'beforeSubmit': function() {
jQuery('#contactar_target').hide();
jQuery('#contactar_submit_btn').attr('value','enviando..');
jQuery('#contactar_submit_btn').attr('disabled', true);
}});
});
The "trick" in making the captcha work properly is to make a refresh on the image with a random parameter in the original url. This is required because if we keep the same image but send the ajax request, the captcha will not match if user clicks submit multiple times.
Another way around would that I often use is to:
1. Create full Yii form inside a controller that I load by ajax and show in a modal with a ID
2. When clicking submit, you make ajax call to the same controller and totally replace modal ID content with ajax response
Hope it helps you someway!
Related
I want to load a form when a user clicks a button. My current solution works by pulling a pre-created form using .get() . My problem is that if the user types the url directly to where the form is located, they can see the form in raw html with no css. Is there a better way to dynamically pull a form or even maybe a way I can restrict a user from seeing the form if they directly type the url where the form is being pulled from. My current solution looks something like this:
$('#upload-photo').click(function (e) {
e.preventDefault();
/// load the contact form using ajax
$.get("http://pms.dev:8000/uploadphotoform", function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modalCloseImg'>x</a>",
position: ["20%",null],
minHeight: '700px',
minWidth: '600px',
fixed: false,
});
});
});
I'm using larval 5 and SimpleModal js plugin for pulling the form.
You could check if the request is an ajax request before returning the form:
Route::get('/uploadphotoform', function(){
if(!Request::ajax()){
abort(404);
}
return view('form');
});
If this doesn't work, make use you added a use Request; at the top of the file to use the Request facade.
But why would you like to load the form from an ajax request?
I'm a new user of laravel. I have problem in pass data to server in laravel 4.2. I didn't use a form submit, I use javascript to refer action of form such the code below:
$(document).ready(function(){
$(".delete_action").click(function(event){
$("#deletecategory").prop('href','/admin/category/'+ event.target.id +'/delete');
});
});
and my modal of delete like this:
×
Are you sure want to delete this category?
Yes
No
When i click Yes, it doesn't do anything. I hope to get some solution from you!
You can use http://api.jquery.com/jquery.ajax/ for this.
$('#yourOkButton').click(function(){$.ajax(...);});
In the documentation of $.ajax is everything written down.
You need to include an ajax call... to actually submit data...
Like so...
$(document).ready(function(){
$(".delete_action").click(function(event){
// incase the button is inside a form, this will prevent it from submitting
event.preventDefault();
// get your url
var url = '/admin/category/'+ event.target.id +'/delete';
// Create alert to confirm deletion
var conf = confirm("Are you sure you want to Delete this?");
if(conf){
// If they click yes
// submit via ajax
$.ajax({
url:url,
dataType:'json',
success:function(data){
//put anything you want to do here after success
// Probably remove the element from the page since you deleted it //So if the button is part of a parent div that needs to be removed.
}
});
}
});
});
You could also use $.get instead of $.ajax to shorten the code some more...
$.get(url, function(data){
//remove element after success
});
But I realize youre trying to pass the url to a modal window, and then submitting that modal window. So you need to attach the ajax call to the modal window button. Not like above, which is just opening an alert window. Its the easier way, but less fancy looking. If you really want a modal. You need to attach the above code to the modal confirm button. But the gist is the same.
In a form I have a modal skeleton--meaning the modal body is empty. I designed number of on the fly add(for dropdowns) form and loading with a ajax post call like
var scriptname,initiator;
$(".launch-add-form").click(function(e){
scriptname=($(this).prop('id')).split("-")[0] ;
initiator=$(this).prop('id');
$.ajax({
type:"post",
url:"<?=site_url()?>/admin/commoncontroller/getform/",
data:{csrftoken:cct,scriptname:scriptname}
}).done(function(res){ $("#modalBody").html(res) ;})
});
Which returns any script that matches the script name and render the response to the modal body. Well now from modal i fill the form and save it which properly works but the problem is on the main form there are multiple drop-downs and each have
.launch-add-form class
Well, if I save with one drop down and try to do with other, then the ajax save call is being called like in geometric progression...1st 1 call than 2 calls then 4 calls...
Can anyone help please?
I guess you are assigning the onClick event multiple times.
try unbinding any clic event before adding a new one:
$(".launch-add-form").unbind( "click" );
so your code will be:
var scriptname,initiator;
$(".launch-add-form").unbind( "click" );
$(".launch-add-form").click(function(e){
scriptname=($(this).prop('id')).split("-")[0] ;
initiator=$(this).prop('id');
$.ajax({
type:"post",
url:"<?=site_url()?>/admin/commoncontroller/getform/",
data:{csrftoken:cct,scriptname:scriptname}
}).done(function(res){ $("#modalBody").html(res) ;})
});
Normally, when I'd do an ajax call to a page with jQuery's $.post(), I'd post to a specific page (i.e. ajax.php) with something like:
var submissionId = 1;
$.post('/ajax/ajax.php', {
submissionId: submissionId
}, function(data) {
alert(data);
});
and inside ajax/ajax.php, I'd manipulate the data how I'd want with $_POST['submissionId']. What is the equivalent to this in CakePHP if I'm posting to a controller?
Do I still use $_POST['submissionId'] or $this->data?
If using $this->data, do I need to create a <form> to wrap the event handler in?
you should create form with cake helper (hide it with css or jquery if you don't want it to be there) and use jquery form plugin
you can submit the form with jquery with submit()
so in the controller you can use $this->data
I have a form which I want to submit and show in Colorbox.
The form is Mals Ecommerce View Cart.
See: https://www.mals-e.com/tpv.php?tp=4
I want it to Show the Cart contents in a colorbox iframe. Is this possible to do using the FORM method rather than the Link method?
here the best answer..
add this to your submitbutton : id="SearchButton"
then use this:
$(document).ready(function() {
$("input#SearchButton").colorbox({href: function(){
var url = $(this).parents('form').attr('action');
var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
return url+'?'+ser;
}, innerWidth:920, innerHeight:"86%", iframe:true});
});
test at: http://wwww.xaluan.com or http://wwww.xaluan.com/raovat/
I recently faced this problem, spent some time searching the solution and found this:
$("#submit_button").click(function () { // ATTACH CLICK EVENT TO MYBUTTON
$.post("/postback.php", // PERFORM AJAX POST
$("#info_form").serialize(), // WITH SERIALIZED DATA OF MYFORM
function(data){ // DATA NEXT SENT TO COLORBOX
$.colorbox({
html: data,
open: true,
iframe: false // NO FRAME, JUST DIV CONTAINER?
});
},
"html");
});
I.e. Colorbox uses submitting the form via standard jQuery methods. Hope this helps someone.
Try
$("input#formsubmit").colorbox({title: function(){
var url = $(this).parents('form').attr('action');
}});
Not tested, I just took the syntax from the Colorbox page. You'd have to give your submit button an id of "formsubmit" for the above to work.
you can open colorbox independently using:
jQuery.colorbox({href:,iframe:true, opacity:0.6 ,innerWidth:760,innerHeight:420,title:});
and you can call this function on any event like:
jQuery("document").ready(function(){ jQuery.colorbox.. });
when u submit a form send a query parameter along with it. When after submission you reach back the form. see if that parameter is populated.
and then call jQuery.colorbox()