thanks for answers, question needed some more code examples to be resolved
You can replace the default submit button behaviour with your own function like this or even just don't use <form> at all and use on click listener on a normal button.
In that function you can then send the data to your backend yourself by using an XmlHttpRequest, example and documentation.
This is a matter of which page you will be directed to and which ejs structure you will use. If you call the same page after the post process, you will call a page that uses that api. This causes the data you previously posted to be sent again. Instead, if you return to the first submitted api url source of the form, you can both re-render the page and prevent the form data from being resubmitted.
If you use this in the same api after post processing, it will cause you to send the data again:
res.render("index.ejs");
try returning to the first page source instead:
res.redirect("/")
I hope it was understandable.
Related
I need to send form data to another page that will allow the user to do something in a form and return the result of that form back to the original page? Is this possible? I know it's not ideal, but the issue is that I need to make a "drop-in" solution that does not need to be integrated with other code. I know it's a very specific request and scenario.
I know how to send POST data that doesn't require any user input on the processing page. i.e. I can send POST data to 'calculate.php' which will do the math and send it back, but if I need additional user input on 'calculate.php', how can I still send it back?
An example of expected results would be:
Page #1: User enters a number and presses submit to go to next page.
Page #2: User enters a second number and presses submit to finish.
Back to Page #1: User receives sum of both numbers.
Obviously, this is a really redundant thing to do, but I'm trying to simplify the problem as much as possible.
EDIT: There a few restrictions I forgot to add.
Page #1 is not my application, I am developing Page #2 as a "drop-in" solution for Page #1. Essentially, I can only use Page #1 to call Page #2 and receive a response from it. The problem is that I need to be able to allow for user input on Page #2.
I know I can post to Page #2 and then post to Page #1 again, but what if I need to maintain the state of Page #1. For example, if there's an open Web Socket connection.
Please note, I understand that this may be impossible or extremely difficult, but if I don't ask I'll never know right?
You want it with PHP or any other language. If you are running Php on server side then you can use Global variables like $_GET and $_POST.
Page #1: Use Post/Get method to send data to second page.
Page #2: Receive all fields' values using Globe variables ($_GET and $_POST). You can use these values as default values of form fields. Now submit this data to page 1 using post or get method.
Back to Page #1: Here you will receive the data of first page from second page and newly posted data from page 2
Either of these should work:
Never leave the page - use AJAX / XMLHttpRequest to call out to other pages to process chunks of data
Do everything on page 1 using "postbacks" -- the form targets are the same page, there is a state variable like "stage=1", and you use JavaScript to add set hidden variables for any additional state that's needed.
... PHP state validation and processing for the different stages ...
... one or more blocks of HTML for the page (PHP if / else can be used to choose between multiple page views) ...
Edit for added restrictions:
Have page 2 use postbacks or AJAX to collect the additional information
I figured out a few ways to do it.
Update a Database (or Data Store of some sort, depends on security needs) and have Page #1 listen for events from a separate page (on the same server as the database). Very similar to the way PayPal's Instant Payment Notification (IPN) works. I was actually able to set up server sent events with it as well.
Essentially, Page #1 sends data to Page #2 where the user will perform the function and then Page #2 will send POST data to a listener somewhere (either on the same server or Page #1's server), the listener will update a database and Page #1 will be listening or pulling to an event handler that will send an update once the database updates.
Use JavaScript Child/Parent Window functions. This is okay if Page #1 and Page #2 are on the same server, but can get messy and browsers have a lot of restrictions and it varies depending on browser.
Page #1 will open Page #2 in a child window, after the user performs a function, Page #2 will call a function that accepts the result data on Page #1.
In my webpage, the user can write a post and the data the user enters is then stored in the database. I want that data to be Selected by a query and posted into the webpage but without the page being reloaded.
I am aware that I need to use Ajax, but I do not know how to use it. I need the post to be added to the page when the post button available in the webpage is clicked.
If you do not know how to use it, why not try to read up on it? :)
To give you a gist of what you need to do, the button needs to be tied to an event handler in Javascript/JQuery. That event handler will be responsible for making the AJAX call and retrieving the information from the server. The call would be something like:
$.ajax({type: 'GET', url: '/path/to/information'})
Calling .done() on this particular AJAX call will execute the callback function specified in the parameter. Usually it's done like so:
$.ajax(...).done(function(data) { ... });
Where data is the response data on a successful (200) response. Once you receive the data, you would just use Javascript to update the html/text of an element on the DOM. How you implement this is solely up to you, but I suggest reading up and trying to get it to work before asking!
We are trying to implement a web page that each time of page refreshing will not result in the form resubmit, how to achieve that? Is there any Javascript code or HTML can make it WITHOUT external javascript library(jquery, dojo or extJs)
The reason of such design is that the form is going to tie an unique relation to current data with means cannot do it twice but for security reason we have to use POST instead of GET, also after the action we still want to preserve user the right to do similar action on the same page to another relation. so how to avoid a consequence like that?
Thanks.
Suppose that the action to the form submits it to submit_form.php. That file can handle the data and do whatever it needs to do. Then in it's response, it can redirect the browser to a separate page (you'll have to look up the exact method of how to do this depending on what language you write your POST handler in). This separate page can show the results of the form submit using session variables or some other method.
I have a basic page, with a div containing text, and a form to update that text, on rails 3.1/jquery. I do not know jquery or js well so I'm just poking about with the coffeescript for the controller.
None of the tutorials I've found seem be relevant, and the few I've found are ancient. I can see what is going on, sort of: I can get an js alert on ajax success, for the form as a remote form (that puts to the server and the update on the controller works -- the basic text gets changed, but I need to refresh the page to see the changes).
So I have 2 basic questions I'm working through:
Do I need to fiddle with js partials or can I just put this into the js/coffeescript for the page? Seems like this can be handled without a messy bunch of partials.
how exactly do you control replacing information with js/jquery: .html, .load, and several other functions seem to be implicated, but I haven't found the right combo.
All the tutorials I've found are either too old or too verbose for a basic hit-the-ground- running understanding of doing some basic jquery stuff within rails. I'm trying to work toward paring down and speeding up form submissions with js/json. A newish, clear, simple tutorial for the uninitiated would be great, but anything pointing me in the right direction of learning would be great.
Yeah, I've posted no code yet but if I can this little bit working, I'll post that.
Where you have the alert() on ajax success, do something like this:
$("#myDivId").text(myText);
Where myText is either the text you submitted to the server, or the response from the server - whichever is most appropriate for your situation.
More generally speaking, to replace the text of an element use $("#myElementId").text("new text"). To replace the HTML of an element use $("#myElementId").html("<b>new HTML</b>")
I do not know Ruby however this is pretty easily handled with jQuery.
You can do an AJAX form submission and update your <div> element after the AJAX call returns success.
//bind some code to the submit event for your form
$('#form_id').bind('submit', function (event) {
//preventDefault(); is the same as return false; except you can run code after preventDefault();
event.preventDefault();
//make a GET request to your server-side script
$.get('path/to/form_action.rb', $(this).serialize(), function (response) {
//this is the callback for the AJAX call
$('#div_id').html('<span>This is my <strong>new</strong> fancy text</span>');
});
});
Some notes:
You can also use the $.post() (http://api.jquery.com/jquery.post/) method rather than $.get() (http://api.jquery.com/jquery.get/) and send the data using the POST method.
event.preventDefault(); will stop the form from submitting normally so you can handle its submission with your own code.
The response variable within the AJAX callback is the response that your ruby script outputs after handling the form submission.
$(this).serialize() in the $.get() call is adding your form input data to the AJAX call: http://api.jquery.com/serialize/
Is it possible to use javascript:location.reload(true) as a action= for a form without having the browser say "In order to reload this page, information must be resent" or something similar to that? Form action is currently being handled by onsubmit= instead.
Reload will always ask the question about information being resent if the user came from POSTing data. It's hard to answer anything specific as I don't know what you are trying to do. This is something that is in the browser's history and can't be prevented.
A better solution is to use the PRG pattern.
http://en.wikipedia.org/wiki/Post/Redirect/Get
If you just want to reload the page without submitting the form try window.location=window.location;
It seems you are handling your form with an AJAX request in the onsubmit event, which begs the question why since nothing is gained if you have to refresh the page anyway. I would suggest either using a normal post from the form, or use #Bob 's solution (which he saved me from typing by posting first). If you use window.location=window.location be sure to call it after whatever happens in your onsubmit method has completed or you may introduce a race condition where it redirects before your onsubmit method has finished sending the data.
Edit:
Just read your comment that provided more information. Again, reloading the whole page in response to an AJAX submit completely defeats the purpose of using AJAX. You really should consider using a Javascript Library like jQuery to help you with this. Basically the pattern would be as follows:
Handle submit with AJAX
When request completes, request only the changed portion of the page with AJAX
Replace or Append the content on the page with the response to the second AJAX call
Empty the form so it can be filled in again