I have a multi-page form. Each page posts data form one to the next, where PHP stores the POST data as Session data. At the end of the table this session data is displayed in a summary table before final submission stores that session data in a MySQL database.
There are two ways to navigate away from a form page: both options to submit the form data.
1) The submit button which performs the form action, and navigates the user to the subsequent form page.
2) A page menu, from where the user can land on any other form page. I use JavaScript on the menu navigation to prompt submission:
$('#menu a').onclick {
$('#myform').submit();
});
However the submit action of the form is:
<form id="myform" method="post" action="?page=survey-2">
...form fields...
</form>
So instigating submit only posts the updated data to the subsequent page.
In the use-case: user fills out form, arrives at summary page, sees and error uses the menu to navigate back to a page, alters it and uses the menu to jump back to summary page: nothing changes, obviously because the updated data is ONLY being submitted to the following page, NOT the destination of their navigation.
Is there a way I can use js (or anything) such that when a link is clicked in the menu, the DESTINATION of that navigation link, also receives the form data? Or alternatively, that the action of the form can submit to all the pages at once (but default navigation is to the subsequent page only)?
Thanks for your consideration
Use AJAX to post the data to the handler, then go wherever you want to go with the callback
$('#menu a').onclick {
var data = $('#myForm').serialize();
var handler = '?page=survey-2';
$.post(handler,data,function(){
window.location.href='http://www.google.com';
})
});
For more about jQuery POST:
http://api.jquery.com/jQuery.post/
Related
Page one.php has a form with a "Next" button that submits the data to the controller and then redirects to page two.php
On page two.php at the bottom of the form there is a "Previous" button that I want to still save the data but go back to page one.php and also another "Next" button that saves the data and then redirects to three.php and so on.
In Laravel is there a way to do this without duplicating controllers and making it more complicated?
In addition to the buttons there is a navigation menu that would have the same pages so if the user modifies any data they could also click the nav button and then data would be submitted and then go to that next page that they clicked. Is this possible or do I have to have ajax contently listening for form input changes and then posting them to the controller?
Make use of sessions. Store the data in session and on every page check if session var exists. After user submits form, empty the session
https://laravel.com/docs/5.1/session#basic-usage
I have a page that offers the user results. From that page there are additional sort options and advanced search options that are submitted by POST by AJAX to a script and the output is inserted into a div using jquery.
Once the user clicks one of the results, they are redirected to the details page. When I click back from that page it doesnt load says form submission error.
Not sure what to be looking for all the stuff I have seen is for when there are simply multiple ajax pages in one page.
I am developing a wordpress plugin which has a form for voting purpose and has a progress bar for showing the votes result. After submitting the form it redirects to another page for processing. But I want to submit the form without page refresh. I could do it with jquery/ajax. But the problem is, after submitting the form without page reload ajax will submit the form data to a php page and it will keep those data to database ,but the voting poll result will not be updated (progress bar will not display latest information ,after submitting ajax data,though data is updated in database) if user does not reload the page.
Please give me an idea how could I do that.
After the poll data has processed, send a script back to the main page:
<script>
document.getElementById('myProgressBarId').setAttribute("width","50%");
</script>
If you have the code for calculating % (which I assume you do have) then you can do the following in your AJAX call.
Store data in db.
Retrieve the updated data
Fire up your 'calculation code'
Now you have the %.
Update the width attribute of image onSuccess of AJAX call.
The jQuery way:
$.ajax({
//other code
success : function(data) {
$('#progress-bar-image').attr('width', data);
}
//data is the calculated percentage.
});
See jQuery.ajax() doc
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.