i am using laravel and jquery to make my website, i'm using the jquery .load method to fill a div in a page:
$('#button').on('click',function(){
$('#container').load('url');
});
it's working fine but it's filling the container with a form, and when i submit the form if the validation passes everything it's ok because i don't need to show the form again, but if i want to return some errors i have to click the button again to show the form again.
Is there a way to just load the page with the .load() i allready had?
Related
I have made a simple home-made lightbox. The lightbox contains forms which allows the user to submit data. I placed a SIMPLE form on my SIMPLE lightbox, and I noticed that when I submit the form the lightbox closes automatically. Why is it doing this, and how can I keep this from happening? I'd like to submit a form on the lightbox and keep the lightbox unaffected.
this is not possible if you submit the form using php it will submit to another page so it will refresh if you want to stay on the page you will have to look into using AJAX to submit the form and get the server response
There are some good technology's out there to do this like jquery AJAX
http://api.jquery.com/jQuery.ajax/
I'm not sure why I'm not getting it. Either way this is frustrating me beyond belief. I've looked through 2 jquery books, web tutorials, and stack overflow posts and i still dont understand.
I am trying to build a search filter bar where a user can select filters and upon clicking "refine result" it modifies the query output.
How do I submit the value of whichever form radio box the user selects using jquery/ajax to a php page which will display results dependent upon the input, without page refresh.
Form-->
user selects radio button value and clicks submit-->
form data gets sent via jquery/ajax to the .php page whose output is to be displayed in without page refresh-->
.php file processes the user input and creates output based on it
I've honestly looked through alot of different answers but all of them assume that the reader has a greater basic knowledge of javascript/jquery than I do.
Like, do I have to put the jQuery/ajax in a function that runs "onclick" of my submit button? Or do I just add a .click event handler for my button id?
Can someone explain it all to me assuming I'm a complete jQuery/ajax noob?
You just have to attach your ajax call to the "submit" event that comes from the form when the submit button is clicked :
$('form').submit(function(e){
e.preventDefault();
$('.content').load(this.action+" .content", $(this).serialize(), function(){
// code to execute after result display if needed
});
return false;
});
I assumed your results are displayed in an element that has the "content" class.
$('form') selects your form, you can personalize it
.submit attach an event handler to the form "submit event
e.preventDefault() and return false prevents the form to be actually submitted
$('.content').load will fill the element with "content" class with the ajax call results
this.action is the URL to submit the form to
" +.content" is here to extract only the result part from the response, instead of the entire html page
$(this).serialize() passes the form fields data to the ajax request
finally the last anonymous function is called after the results are displayed and can be used to trigger some visual effect indicating that the results were updated
I have an index page, i am loading several pages in a div in that page by clicking links , some of them are forms(pages). When i click submit, the information is processed correctly and it is stored in the database but the page disappears because of which i am unable to see some useful information like errors generated after form validation. I want that the page should not disappear after loading. A page can be shown in the same div only when i click on the link for that page.
I am using php, javascript, jquery, MySqL.
Any help ??
That is the default behavior of forms submit. If I am not mistaken you need to prevent the default behavior on that form submit callback. If the considering form have an id of formID then You can do this
$('#formID').submit(function(e){
//prevent default Behaviour
e.preventDefault();
});
And in that case you have to use $.ajax to submit form data into server without reloading the page.
i try to do a jquery modal form. the problem is, i include myform.php into the jquery's DIV.
the reason why i put myform.php into jquery's div because i want the php do some input validation/checking exiting data in the database instead of using jquery validation. everything works fine. But the problem is, after i save the data, and the modal was close, then i try refresh the page. then i will get some message saying that "Retry to submit.. blabla..bla..bla..." how to avoid this message? or is there any way to integrate php form with PHP??
You could try and not submit the form and send the $_POST data through AJAX .
i think the new page added to current page div element
may be you should clear the content of div element after closing dialog
I'm making this contact form. The site itself uses AJAX to load the content in the main window. The problem with my form is that when the user clicks on submit and the data passes validation, it loads the page to main instead to itself to reach the actual mailing script.
Is there any way to pass this??
take the action our of the form opening tag
If you're using the Prototype.js library, you could just call event.stop() on a passed event object, on form submit.