I am trying to add an effect to the login form and when the effects is done ( like 1 sec) it then goes to php.
I tried to make a setTimeout() function inside the .submit with e.preventDefault() so I can delay it for a sec but the problem is it didnt take the data but instead it goes to the php in a blank webpage that sopposed to be checking the data that was inputted.
And when the e.preventDefault() is been taken away the php works but it didnt give me a second to perform the animation first then go to php file to check all the data
here is my code
<script> $("#effectsExplode").submit(function (e) {
var form = this;
e.preventDefault();
$("#effectsExplode").toggle("explode");
setTimeout(function () {
form.submit();
},1000);
});
</script>
<form id="effectsExplode" class="form-1" method="post" action="checklogin.php">
<p class="field">
<input type="text" name="login" placeholder="Username or email">
<i class="icon-user icon-large"></i>
</p>
<p class="field">
<input type="password" name="password" placeholder="Password">
<i class="icon-lock icon-large"></i>
</p>
<p class="submit">
<button id="buttonexplode" type="submit" name="loginsubmit">
<i class="icon-arrow-right icon-large"></i>
</button>
</p>
</form>
You've created an infinite loop. If for example I had a button and this javascript:
$('button').click(function() {
var b = this;
$('#status').append('Clicked<br/>');
setTimeout(function() {
b.click();
}, 1000);
});
http://jsfiddle.net/b9chris/yaNdc/
Once I click that button, I'll get another "Clicked" message appended to that status tag every second... forever. That's because jquery fires all its event handlers for the events you manually trigger; in this case you attached to 'submit' then fired 'submit' and looped right back into your own code, which keeps preventing the form from ever actually submitting.
Most likely on your local test machine this form submission happens almost instantly, but once you put it out on the webserver the live version will take longer, and your animation will have time to play. Simplest solution is to just get rid of the ev.preventDefault() and let it submit and play while the submission takes its time.
Related
I have a form...I want to add disabled to all the inputs inside a certain div but rest of the form. I verified that this is indeed happening as it should but, when I submit the form with the disables added, I get no POST data. But with all my code the same, except for not adding the disableds, I do get my post data as I should. And I repeat, I DID verify that the disableds are only going on the inputs that I expect and NOT the other inputs that I want data from.
There is not really even much code..the inputs look like this (and it is definitely inside a form element) -
<div class="abridged-hide">
<input type="hidden" name="actor_id[]" value="162705079">
</div>
The submit button -
<button type="submit" id="entry_submit" class="btn btn-primary">Update Page</button>
Jquery is simply -
$('#entry_submit').on('click', function(event){
$('.abridged-hide input').attr('disabled', 'disabled');
$('.unabridged-hide input').attr('disabled', 'disabled');
});
I tried
.attr('disabled', true);
.prop('disabled', true);
Like I said, if I comment out the Jquery and submit, I do get my post data fine, something about this Jquery is making me not get my post and really don't see any reason why... Thanks in advance.
edit - these are the inputs being created dynamically.
<td class="btn btn-primary">
<span class="glyphicon glyphicon-resize-vertical" aria-hidden="true">
<input type="hidden" name="actor_id[]" value="162705079">
</span> Julie Benz - J</td>
edit - code that generates the inputs
$( ".drop-container" ).droppable({
accept: ".draggable",
addClasses: false,
drop: function(event, ui) {
var drag_name = ui.draggable.html();
ui.draggable.hide();
var new_body_count = '<tr><td class="btn btn-primary">'+drag_name+'</td>
<td class="badge"><input placeholder="Number of Kills" name="body_count" class="number-count" type="number"></td></tr>'
$('.table').prepend(new_body_count);
}
});
In my mail sending script powering my contact form, the mail sending action can take some time, during this time the user doesn't know what happens. So, I wanted to add a "Mail Sending..." notification. The "Mail Sending..." notification appears when the submit button is clicked, but the script processing stalls at this point infinitely, and further mail processing is not done. I shall appreciate clues on how to resolve this. Find below the AJAX script and html form code.
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("send.php", $("#contactform").serialize(),function(response) {
$('#success').html('<h4>Mail Sending...</h4>').load(url);
});
return false;
});
});
</script>
And this is the contact form html code:
<form action="" method="post" id="contactform" >
<label for="name">Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" /><br />
<label for="message">Message:</label><br />
<textarea name="message" id="message"></textarea><br />
<input type="button" value="send" id="submit" />
<div id="success" style="color:red;"></div>
</form>
Well,
"during this time the user doesn't know what happens. So, I wanted to add a "Mail Sending..." notification."
How about ajaxStart as this is exactly what it is designed for.
"Show a loading message whenever an Ajax request starts (and none is already active)."
You can simply attach the event handler to any element:
$( document ).ajaxStart(function() {
$( "#loading" ).show();
});
Then in the case when the ajax request is started the loading div will be shown. Once the ajax is done it will be hidden again as it would with:
$( "#loading" ).hide();
You will want to make sure that the div with that id (loading) is hidden by default.
"but the script processing stalls at this point infinitely, and further mail processing is not done."
Per jQUery Post:
If a request with jQuery.post() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method. Alternatively, as of jQuery 1.5, the .error() method of the jqXHR object returned by jQuery.post() is also available for error handling.
If your post is failing it should return an indication as to why.
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post( "test.php", $( "#testform" ).serialize() )
.done(function( data ) {
$('#success').html('<h4>Mail Sending...</h4>');
// You should not do a .load within another ajax call so placing it here is okay as it will execute AFTER the original one completes, but it will trigger the ajaxStart method again.
})
.fail(function ( data ) {
console.log(data);
});
});
});
</script>
Unfortunately I am on mobile so I can't test the above to make sure it works, but that should get you started.
I'm using an ajax call for upload pdf files. After triggering upload button the ajax calls two times. I checked the entire code. But couldn't get any solution. Kindly help me :)
My code is,
HTML:
<div class="uk-form-row">
<div id="loadingPDFUpload"><i class="uk-icon-spinner uk-icon-spin"></i></div>
<div id="targetUpload"></div>
<label class="uploadLbl">Upload Book:</label>
<div class="uploadWrap">
<input name="pdfFile" id="pdfFile" type="file" size="30" />
<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" />
</div>
</div>
ajax code:
function uploadPDF(){
$("#frm").attr("action","upload.php");
$("#loadingPDFUpload").show();
$("#frm").ajaxForm({
target: '#targetUpload',
complete: function(){
$("#loadingPDFUpload").hide();
}
}).submit();}
You have a submit button calling the function but then the function uses the forms submit method. That is probably triggering a double call on the function.
I see you are using jQuery and the jQuery Form Plugin, so this should be relatively easy to fix. I would create the event handler directly in the JavaScript to avoid messy markup. Remove the onclick attribute of your submit button:
<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" />
Then do something like this in your code:
$(document).ready(function() {
$('#frm').submit(function(e) {
e.preventDefault(); //stops the default submit action
$('#loadingPDFUpload').show();
$(this).attr('action', 'upload.php');
$(this).ajaxForm({
target: '#targetUpload',
complete: function(){
$("#loadingPDFUpload").hide();
});
});
})
});
You are using form submit button for trigger your ajax call
<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" />
So when you trigger click it which call uploadPDF() function also which submit your form after submit() function. That is why there the function is call two times.
Try removing the submit at the end of ajaxForm request. It is submitting the form again. Also please update your HTML code. I cannot see #frm anywhere.
function uploadPDF() should return false, in order to prevent normal form submission.
as in documentation example code
// attach handler to form's submit event
$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
How can I save the state of a page after to press F5.(with php or javascript)
I have this page, which if I I press the button 1, div 1 disappears, and if you press the div 1 again, it reappears.
the button 2 has the same function.
is there any way that if I press button 1(or button2) disappears the div, and then if I press F5 continue the div1(or div2) hidden, ??
<input type="submit" id="button1" name="button1" value="ID1"><br/>
<div id="div1" name="div1"/>
<b>Hello1</b><br>
<img src="pic1.png" height="100px" width="100px" />
</div>
<input type="submit" id="button2" name="button2" value="ID2"><br/>
<div id="div2" name="div2"/>
<b>Hello2</b><br>
<img src="pic2.png" height="100px" width="100px" />
</div>
<script>
$(document).ready(function(){
$("#button1").toggle(function(){
$("#div1").hide();
},
function(){
$("#div1").show();
});
});
//
$(document).ready(function(){
$("#button2").toggle(function(){
$("#div2").hide();
},
function(){
$("#div2").show();
});
});
</script>
Thanks in Advance
Well Cookies could do the trick of saving the last state and so on.
If you aren't sure that html5 is available on all browsers.
one way is to use HTML5 history for this.
var state = { div1: true, div2: false };
history.pushState(state, 'Page', 'mypage/10');
Local Storage
When you want to save localy great amount of data, you have another opportunity — to use local storage (since HTML5). You can do it directly using JavaScript or using one of available jQuery plugins.
for example, with totalStorage:
var scores = new Array();
scores.push({'name':'A', points:10});
scores.push({'name':'B', points:20});
scores.push({'name':'C', points:0});
$.totalStorage('scores', scores);
I'm pulling my hair out over this one - I have a page that searches a MySQL database and returns the results in a table. I want the user to be able to update the results and hence update the MySQL database. The first part works ok, I have a search box on the page, which uses jQuery/ajax to query the database and display the results, e.g.:
<form class="well" id="jquery-submit-ajax" method="post">
<input type="text" name="userSearch" placeholder="Search…">
<label>Name/Email/id</label>
<Br />
<input type="submit" id="searchButton" value="Search">
</form>
<div class="alert alert-success hide">
<div id="success-output" class="prettyprint"></div>
</div>
<div id="loading-image" class="alert hide" style="text-align:center">
<img src="../images/ajax-loader.gif" /></div>
<div class="alert alert-error hide">
<div id="error-output" class="prettyprint"></div>
</div>
</div>
and the jQuery:
$("#jquery-submit-ajax").submit(function(e) {
$('#loading-image').fadeIn();
$.ajax({
type: "POST",
url: "jquery-ajax-control.php",
data: $(e.target).serialize(),
dataType: "html",
beforeSend:function(){
$('.alert-error,.alert-success').hide();
},
error: function(jqXHR, textStatus, errorThrown){
$('#loading-image').hide();
$('.alert-error').fadeIn();
$('#error-output').html(errorThrown);
},
success: function(data){
$('#loading-image').hide();
$('.alert-success').fadeIn();
$('#success-output').html(data);
}
});
return false;
});
So the results are parsed into a table for each result. Within that table is a form with a submit button. e.g.:
<form method="post">
<table>
<tr>
<td><input type="text" class="editbox" name="subs-expiry" value="<?php echo $expiry_date; ?>"</td>
</tr>
</table>
<input type="submit" class="updateSubsButtons" value="Update" />
</form>
I'm trying to submit this form via jQuery/Ajax again, but I can't get it to work. Pressing the Update button results in the whole page refreshing. I've stripped the jQuery for this button right back to just display an alert when the button is pressed, but even that doesn't work.
$(".updateSubsButtons").on("submit", function(e){
alert("clicked");
e.preventDefault();
});
Using the Chrome debugger a breakpoint in the function never gets hit, so maybe jQuery can't find the button? I've tried .on() and .live() functions, but I get the same result with both. I really can't figure out what's going on here, so any help would be gratefully received!
Try replacing it with a button, and a 'click' event.
<button class="updateSubsButtons">Update</button>
$(".updateSubsButtons").on("click", function(e){
alert("clicked");
console.log(e);
e.preventDefault();
});
Here's how to deal with asynchronously loaded items(added because this is how the problem was actually fixed.):
$(".AlreadyLoadedParent").on("click",'.buttonYouWantToClick', function(e){
alert("clicked");
console.log(e);
e.preventDefault();
});
First, you "click" a button, you don't "submit" it. You submit the form. So you should work with the event "click".
Second, if the button that should trigger the jQuery code is loaded using AJAX you should bind the event using .live() function like this:
$('.updateSubsButtons').live('click', function(e) {
e.preventDefault();
// Your code here...
}
This way the click event is bound to every new object with class="updateSubsButtons" that is loaded even after the page is loaded. If you use $('.identifier').click() it only works on objects that are already loaded when the page loads and doesn't work on elements being loaded through AJAX.