I write a code that submit a form to another page without loading like ajax.I use jquery form plugin.but the problem is it is not working.
here is my code
<div id='preview'></div>
<form action='ajaxcall.php' id='upload_pic' enctype='multipart/form-data' method='post'>
<input type='file' id='pic' name='picture'>
<input type='button' id='sub'>
</form>
<script type="text/javascript" src='jqueryform.js'></script>
<script>
var options=
{
target:'#preview',
url:'ajaxcall.php',
success:function(){
document.getElementById("upload_pic").reset();
}
};
$(document).ready(function(){
$("#sub").click(function(){
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
</script>
I understand that the ajaxForm() function is not working.the jquery file is above the code and working fine.After clicking button page automatically redirected to ajaxcall.php page.please help me finding out the error.Thanks in advance.
In this scenario you need to use ajaxSubmit
$(document).ready(function() {
var options = {
target : '#preview',
url : 'ajaxcall.php',
success : function() {
document.getElementById("upload_pic").reset();
}
};
$("#sub").click(function() {
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxSubmit(options);
});
});
Add one more submit function:
$(document).ready(function(){
$('#upload_pic').submit(function(e){ // <---pass event here
e.preventDefault(); //<----------------stop it here
});
$("#sub").click(function(){
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
Try to stop the submit before the click.
Related
I've integrated reCAPTCHA and it is working fine, except for when the users are too quick to click the Submit button right after checking the "I'm not a robot" checkbox. It takes quite some time for reCAPTCHA to register the user action via Ajax, and if they click on Submit too quickly, the g-recaptcha-response is missing, and the validation fails.
Hence my question: how to I grey out the Submit button until g-recaptcha-response value is available?
<form id="capform" action="/captchaverify" method="POST">
<div class="g-recaptcha" data-sitekey="..."></div>
<p>
<input id="capsubmit" type="submit" value="Submit">
</form>
I ended up using the data-callback attribute as described in the documentation:
<form action="/captchaverify" method="POST">
<div class="g-recaptcha" data-sitekey="..." data-callback="capenable" data-expired-callback="capdisable"></div>
<p>
<input id="capsubmit" type="submit" value="Submit">
</form>
JavaScript (mootools-based, but the general idea should be clear):
function capenable() {
$('capsubmit').set('disabled', false);
}
function capdisable() {
$('capsubmit').set('disabled', true);
}
window.addEvent('domready', function(){
capdisable();
});
Here's an example that begins with the submit button disabled, and enables it once the callback is received from reCaptcha. It also uses jquery validate to ensure the form is valid before submitting.
var UserSubmitted = {
$form: null,
recaptcha: null,
init: function () {
this.$form = $("#form").submit(this.onSubmit);
},
onSubmit: function (e) {
if ($(this).valid()) {
var response = grecaptcha.getResponse();
if (!response) {
e.preventDefault();
alert("Please verify that you're a human!");
}
}
},
setupRecaptcha: function (key) {
UserSubmitted.recaptcha = grecaptcha.render('recaptcha', {
'sitekey': key,
'callback': UserSubmitted.verifyCallback
//'theme': 'light'//,
//'type': 'image'
});
},
verifyCallback: function (response) {
if (response) {
$(".visible-unverified").addClass("hidden");
$(".hidden-unverified").removeClass("hidden");
}
}
};
I call setupRecaptcha from the page with a named function that's part of the js include.
<script>
var recaptchaLoader = function () {
UserSubmitted.setupRecaptcha("yourkey");
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaLoader&render=explicit" async defer></script>
You could simplify this. I use it in a multi-tenant application with different keys, and UserSubmitted is actually part of a larger library. You can't usenamespaces (UserSubmitted.somefunction) as the onload param either (to my knowledge).
I'm using magnificient popup on my website, and I would like to execute ajax function when a link is clicked and the result of the query should be the content od the popup.
this is my code (I'm pretty new in JQuery) :
<script>
function showPics(str)
{
if (str=="")
{
document.getElementById("displayPics").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("displayPics").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getpics.php?q="+str,true);
xmlhttp.send();
}
</script>
<a class="1-popup" href="#">Guerlain</a>
<script type="text/javascript">
$('a').click(function() {
showPics($(this).attr('class').charAt(0)), //Ajax function call
$(this).magnificPopup({ //Popup call
type:'inline',
midClick: true,
closeBtnInside:true
});
});
</script>
<div id="displayPics"><b>Pictures will be listed here.</b></div>
The content is loaded, but the popup not.
Here's the solution of my issue :
<a class="1-popup" href="#displayPics">Guerlain</a>
<script type="text/javascript">
$('a').click(function(){
showPics($(this).attr('class').charAt(0)) //Ajax function call
});
</script>
<script type="text/javascript">
$('a').magnificPopup({ //Popup call
type:'inline',
midClick: true,
closeBtnInside:true
});
</script>
<div id="displayPics" class="white-popup mfp-hide"><b>Pictures will be listed here.</b></div>
Thank you all.
I am trying to import a file with AJAX, using the following plugin -
http://malsup.github.com/jquery.form.js
Based on the following example -
http://malsup.com/jquery/form/progress.html
The my View looks like this -
<form action="/MyController/MyAction" enctype="multipart/form-data" id="myFormId" method="post">
<input type="file" name="file" id="file">
<input type="submit" value="Import File"> </div>
</form>
<script type="text/javascript">
window.onload = function () {
(function () {
$('#myFormId').ajaxForm({
beforeSend: function () {
alert('before send');
},
success: function () {
alert('success');
},
complete: function (xhr) {
alert('xhr.responseText=' + xhr.responseText);
}
});
})();
}
</script>
The javacsript in window.onload = function (){} is never called. MyAction is called, and then the browser just displays the JSON Action Result of MyAction.
Can anyone tell me what I am doing wrong or suggest a different way of doing this?
Thanks very much!
Since the script you wrote is placed after the form, you don't need to be putting it in a window.onload handler. The following should work fine:
#using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { enctype = "multipart/form-data", id = "myFormId" }))
{
<input type="file" name="file" id="file">
<input type="submit" value="Import File"> </div>
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
(function ($) {
$('#myFormId').ajaxForm({
beforeSend: function () {
alert('before send');
},
success: function () {
alert('success');
},
complete: function (xhr) {
alert('xhr.responseText=' + xhr.responseText);
}
});
})(jQuery);
</script>
Also notice that it is important to make sure that jquery.js is included before the jquery.form.js plugin which needs to be included before the script using it. In the example I have shown I also passed jQuery as parameter to the anonymous function which was being used in order to ensure that there are no conflicts with other plugins you might be using and which might have hijacked the $ function.
Also I would recommend you using a javascript debugging tool such as FireBug or Chrome developer toolbar to ensure that all your scripts are properly included (no 404s) and that you do not have any duplicate scripts or javascript errors.
I have a such form with many links:
<form name="myform" action="" method="get" id="form">
<p>
My link
</p>
<p>
My link 2
</p>
<p>
My link 3
</p>
<input type="hidden" name="division" value="" />
</form>
I would like to send the form's value from the link that was clicked to php script and get the response (not reloading the page).
I'm trying to write a function that gets the value from a link:
<script type="text/javascript">
window.addEvent('domready', function() {
getValue = function(division)
{
var division;
division=$('form').getElements('a');
}
</script>
but I don't know how to write it in a right way. Next I would like to send the form:
$$('a.del').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
$('form').submit();
});
});
How I should send it to get the response from a php file not reloading the page?
Instead of putting in javascript inline in the HTML, I would suggest using a delegated event instead. I would also send the form using an ajax call instead of a form submit.
<form id="form">
<a data-value="A">My link</a>
...
</form>
<script>
var formEl = document.id('form');
formEl.addEvent('click:relay(.del)', function() {
var value = this.getProperty('data-value');
new Request.JSON({
url: '/path/to/your/listener',
onSuccess: function(data) {
// ...
}
}).get({
value: value
});
});
</script>
This works for me:
<form id="form">
<a data-value="A">My link</a>
...
</form>
<script>
var links = document.id('form').getElements('a');
links.each(function(link) {
link.addEvent('click', function(e) {
e.stop();
var value = link.getProperty('data-value');
var req = new Request.HTML({
url: "/path/to/your/listener",
data: value,
onRequest: function(){
$('display').set('text', 'Search...');
},
onComplete: function() {
},
update : $('display')
}).get(
{data: value}
);
});
})
</script>
Can someone show me a tutorial of using jquery to display successful form submission without refreshing the page. Something like that happens on gmail when a message is delivered and the yellow overlay that shows that you message was delivered and then fade outs.
Use jQuery+JSON combination something like this:
test.php:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>
<form action='_test.php' method='post' class='ajaxform'>
<input type='text' name='txt' value='Test Text'>
<input type='submit' value='submit'>
</form>
<div id='testDiv'></div>
_test.php:
<?php
// Code here to deal with your form submitted data.
$arr = array( 'testDiv' => 'Form is successfully submitted.' );
echo json_encode( $arr );
?>
jsFile.js:
jQuery(document).ready(function(){
jQuery('.ajaxform').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
for(var id in data) {
jQuery('#' + id).html( data[id] );
}
}
});
return false;
});
});
OR:
You can use jQuery Form Plugin