I work on a php file that contains a simple register form. I send the data to my mysql database via jQuery.click event. When the data goes to database, a massage display below the button, after 3 seconds it disappear and the input areas clean by jQuery. If I don't refresh the page and keep going to send data to my database, when I click the button, data go to database, input fields clean but message doesnt appear second time. I hope you could help me. Here is the jQuery code that I use;
$(document).ready(function(){
$('#submit').click(function(){
$.post("add_user2.php", $("#addUser").serialize(), function(response) {
$('#success').html(response);
$('#success').hide(3000);
$("#users_name").val('');
$("#users_mail").val('');
$("#users_phone").val('');
$("#users_schoolnumber").val('');
$("#users_faculty").val('');
$("#datepicker").val('');
});
return false;
});
});
This is the problem:
$('#success').hide(3000);
You are hiding your message box so when you execute it again, the message of the box will be the response variable but you will not see it as it is hidden.
You should show your message box when you want to display the message.
For example like:
$('#success').html(response).show();
$('#success').hide(3000);
Related
i need to call a click event from another file...
On my index.php I have a 'select' to choose a name, once I did, I call by Ajax a form by the name I choosed before, this form is on espacio.php, once I complete the form I must have to click a button to save the info, when I click this button the info are passed by Ajax to espacio2.php and there is here where I show a success or a failure message.
This message shows on my index.php and this is good, but I want to hide it after a few seconds.
How can I call the click event from espacio.php?
This is a code that works only if a click is pressed on the same page:
$(document).ready(function(){
$(".botoncete").click(function(){
$(".prueba").fadeIn();
Esconder();
});
function Esconder(){
setTimeout(function() {
$(".prueba").fadeOut();
},2000);
}
});
I've already solved the problem, thanks to #Barmar, and as he said: "If you're sending the data by AJAX, you stay on the same page".
I really don't know what was I thinking...
I am working on a survey that will go at the bottom of a FAQ page. My problem is that everytime a form is submitted, it sends you to a different page. I was wondering - is there a way to submit the form and have a little message that replaces the survey that says "Thanks for your feedback" instead of sending the user to another page or refreshing the page?
So far, I have a file that contains the HTML form, CSS, and jQuery and another file that contains the PHP connection to database and insertion of data to the database.
I would appreciate an explanation that is dumbed-down and an example would help since I am relatively new to programming.
An important note: My jQuery is set up to automatically submit if a user answers very helpful/extremely helpful. If not, two more questions appear below with a submit button at the bottom.
More specifically it looks like this:
$(document).ready(function() {
$('.rating').click(function() {
$('.rating').removeClass('selected');
ratingClick(this);
});
});
function ratingClick(that) {
console.log(that.id);
if (that.id == 'rating4' || that.id == 'rating5') {
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
$('#questions').submit();
} else {
$('#getMore').fadeIn();
$(that).toggleClass('selected');
}
}
$(document).ready(function() {
$('#submit').click(function(){
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
});
});
What you want is the jquery post function: http://api.jquery.com/jQuery.post/
Make sure your data is JSON.
$("#formdiv").click(function(){
$.post("somepage",{ yourformdata} );
$("#formdiv").replacewith("Thanks for filling out the form!");
});
You can use the replaceWith function to replace the desired content with the thankyou message.
Alex,
from the code you supply, the reason for leaving the page is due to the fact that you don't preventDefault() on the click event. Your page will always reload after that submit unless you take abortive action. No guarantees, but try a quick refactor to:
$(document).ready(function() {
$('#submit').click(function(e){
e.preventDefault();
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
});
});
This should get you a stage closer. You then just have the ajax logic to define, which should come good with a quick search to match your needs.
I am making a test project in PHP. I want to show some information on click of button named 'View Details'. But there are 3 different buttons like this. Each are showing different information. I want to manage like user can see only one information at a time. Can Any one help me?
Thanks in advance.
You will manage flag to show/hide your information.
e.g if any one click on view details button you have set flag=1 in javascript and check this flag on another button click if is already 1 then does not display any information.
You could create a wrapper div say "resultsDiv" and display the response (ajax) from your php file to this DIV. So that only one information is seen at a time, like:
//First ajax call on first button click,
$.ajax({
...
..
success: function(resp) {
$("#resultsDiv").html(''); //clear the DIV html
$("#resultsDiv").html(resp); //place the response
}
});
//Second ajax call on second button click,
$.ajax({
...
..
success: function(resp) {
$("#resultsDiv").html('');
$("#resultsDiv").html(resp);
}
});
//more ajax calls
//your div that will hold response of ajax call on various button clicks
<div id="resultsDiv"></div>
Did you mean something like this
I have 3 tasks :
1) Submit the message in a textarea when the user press enter button on keyboard or click "submit" button.
2) Use php/mysql to save the message onto database.
3) After save it onto database, need to show the updated message onto the website back.
The problem is... There is no php script that can change "Enter" button event, so I need to use javascript, if I use javascript, I need to create a new page sendMsgToDB.php to submit the data to database by the following javascript/ajax :
<script type="text/javascript">
function gg(e) { //sumbit the form when user press Enter button
key = e ? e.which : window.event.keyCode;
if(key==13) {
$.ajax({
type: "POST",
url: "sendMsgToDB.php?msgid=" + msgid,
data: dataString2,
success: function() {
$('textarea.resposting').val('');
}
});
}
}
$(function() {
document.getElementById("resposting").onkeypress = gg;
});
</script>
I use mysql to retrieve 10 latest messages from database and use pure php to display the messages onto the website. If I want to show updated messages onto website after the user submit the data through the textarea by pressing "Enter" button on keyboard, sure I need to call the function Display_New_Msg() after the data is complete send to database. If I use Javascript/ajax to sumbit data, how to use javascript/ajax/jquery determine whether or not the data is complete send to database?
Seriously I don't like to use javascript/ajax/jquery, but I force to use them because I need to change the "enter" button event, is there a way to change "enter" button event by using php? How to make the press "enter" button act like click "submit" button to submit the form <form name="frmMsg" action="currentPage.php">, the action will go to the currentPage.php, so the page is refresh, so it will re-execute the function Display_New_Msg() automatically to show the new message, so don't need to dertermine whether or not the data is complete send to database anymore.
If I use Javascript/ajax to sumbit data, how to determine whether or not the data is complete send to database?
It all comes down to the response from the resource that's handling the AJAX request. In this case, sendMsgToDB.php. That script needs to make sure it's doing what it needs to do and that everything's getting into the database (usually a lack of error is sufficient), then sending a response accordingly. If there is an error on the server, return an HTTP error code (such as a 500 server error) to indicate this.
The jQuery .ajax() call then determines the call-back function to use based on the response from the server. Your code currently handles a successful response:
success: function() {
$('textarea.resposting').val('');
}
In order to handle an error response, you'd want a second callback for error:
error: function() {
alert('There was an error!');
}
The HTTP response codes exist for exactly this purpose, so that clients consuming those responses can easily determine the status of the request.
Edit: Conversely (and perhaps more to the spirit of your question, if I'm now re-interpreting you correctly), you can use the jQuery submit() function to submit the form in your key press logic. That way you don't have to use AJAX and can just use a regular form submission and response, which you indicate to be your preference. Something like this:
if(key==13) {
$('#myForm').submit();
}
I have a form which users may submit information. The submission can be successful or it's not successful.
In either case, I want a dialog box to tell the user if it was a success or not.
The page loads itself on form submission. Ergo, the page is not submited through Ajax.
I know how to trigger the dialogbox by clicking a button / link etc.
But how can I use jQuery UI Dialog after form submission?
UPDATE
I have found the solution. You can read the solution in this thread.
Don't use a type='submit', but rather bind a jQuery event to a normal button, process the form via ajax. When you get results via ajax you can either show the results from the ajax request on the dialog (PHP generates the message on the dialog), or you can have a conditional that checks whether it was successful or not and then take the appropriate actions.
Here's an example with an in the form. (the coding is a bit sloppy)
$(document).ready(function() {
$('#submit').click(function() {
name = $('#name').val();
email = $('#email').val();
number = $('#number').val();
message = $('#message').val();
$.post("contact.php", //PHP file to send POST to
{ ajax: 'yes', name: name, email: email, number: number, message: message }, //POST fields to send
function(returned) { //What to do if the POST finishes. 'returned' is the value recieved back from the script.
if (returned == 'done') {
//PHP script returns the word 'Done'
alert('Submit successful');
});
} else {
alert('An error has occured');
}});});});
You should be able to bind an event handler to the submit event on the form.
$("form_name_here").bind("submit", function(){$("dialog").open()})
Or whatever the method is to show the dialog. I can't remember off the top of my head. The other option would be go use the jQuery form plug-in as I'm assuming you're using ajax to submit the form. With that you can pass methods in for all of the events related to form submissions. Before, after, success, fail, etc.