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...
Related
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);
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 have a contact form which is hidden when the page loads. The contact form can then be viewed by clicking the contact form button, causing it to slideUp and slideDown. The problem is that when the form is submitted the page refreshes and if there is an error message or a success message it is hidden because the page has reloaded, you have to click on the 'contact form' button to see it. I'm not great with jquery or php. Any help would be much appreciated. Once the form is submitted I need the messages to appear.
the website is http://www.carlisleironing.co.uk/index.php
My jquery is
$(document).ready(function () {
$("#contactLink").click(function () {
if ($("#contactForm").is(":hidden")) {
$("#contactForm").slideDown("slow");
} else {
$("#contactForm").slideUp("slow");
}
});
});
add the following (just before the last }); in your question):
if ($('#contactForm #error').size() > 0){
$('#contactForm').slideUp('slow'); // or just .show();
}
Test if the #error element is present and, if so, show the form. I'm not sure what your success message looks like but a similar test can also be one for that.
As for the other answers: yes, you can do an AJAX submit but chances are (and I'm assuming context here) that's out of the scope of this question. That would involve special request handling and additional validation librar(y/ies) added.
You can use ajax to submit the form and show the result without reloading the page:
$('form').submit(function() {
$.post($(this).attr('action'), $(this).serialize(), function(data) {
console.log(data);
});
return false;
});
I am assuming that when someone submits the form, the php page generates the errors, but the user is not able to see them, because the form is hidden by default on a page load.
You can name the submit button. If the user clicks the submit button, the value of the button is send with the get or post request. You can then change the behaviour of your php page to not have the contact form hidden if the form was submitted.
<input type="submit" name="theSubmitButton" value="Submit!" />
In php $_GET['theSubmitButton'] (or $_POST if you are using a post request) will be set if the user submitted the form, and it will not be set if that was not the case. You can use isset( $_GET['theSubmitButton'] ) to test if the user did submit the page and alter the class of the contact form accordingly.
I am designing webpage using jquery and php. My page has side menu, and clicking one of the option it send a request to server to read some information from file and it will create a form out of it, with submit and other button edit(in case anybody wants to change the information in that form) and send this html back to client. I am able to do this successfully. But when I click on the edit button it actually not calling the click handler I registered for the all the buttons.
$('button').click(function(){
alert("click event");
});
I included this in the
jQuery(document).ready(function() {
But because all the jquery/js code in ready() and it gets executed at the page load time, its not able to find these buttons in form because its something which i get from server after loading and replacing it to existing 'div' and hence its not able to invoke the event handler. If I define click handler for the parent div of this form, it receives the click event if I click 'edit' button because that 'div' was present when initial page got loaded. I might not be doing it correctly, may be getting the whole form from server is not a good idea, if you have to do some operation on the form at client side. But is it doable? if yes then whats the possible way out?. Thanks!
Your event isn't firing because you define it prior to the element existing on the page. Using the .on() method should fix this. Something along the lines of:
$('body').on('click','button', function(){
alert("click event");
});
should work.
If I understand you correctly you adding the buttons dynamic to the form. You should try to use jQuery.on() insteed, see http://api.jquery.com/on/
And in your example this might work for you
$("body").on("button","click", function(event){
alert("Hello world");
});
Use on (jQuery 1.7 and up). Previously was delegate (1.4.2+), before that live...
$('*your_form*').on('click', 'button', function(){
alert("click event");
});
You may simply need to use this instead:
$(document).on('click','button',function(){
alert("click event");
});
(jQuery 1.7 or higher)
you have to call using button id
$('#buttonid').click(function(){
alert("click event");
});
or button class
$('.buttonclassname').click(function(){
alert("click event");
});
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