Display form result in same page with only client-

2019-09-02 05:17发布

问题:

I have a bit of a tricky work problem I hope to get some help with.

To handle various forms and storing entries, we use an in-house tool which I cannot modify. Basically what happens is:

  1. I enter he URL the original page, and the URL of the destination page after successful submission.
  2. The tool spits out some HTML and Javascript code, the most important of which is a unique URL, let's call it (redactedURL), that goes after the action attribute.
  3. When the form is submitted, the page will refresh to one of two possible destination URLs: the one I inputted if success, or (redactedURL) if error.
  4. I can download all the entries from the tool afterward.

The HTML is quite simple. checkform() is a simple validation script.

    <form action="(redactedURL)" name="enenForm" method="POST" onSubmit="return checkForm()">

The issue with this is that I can't style the (redactedURL) error page, which is quite ugly. I am wondering if there is anyway I could

  1. Suspend automatic display results of form submission
  2. Determine the destination URL, and based on that, write out a custom thank you/error message (since I cannot access the server-side script, this seems to be the only solution to determine if the submission is successful or not).
  3. Make sure that tool still properly stores all the entries.

Any help would be much appreciated. Thanks!

回答1:

Don't use a form. Instead use AJAX. I think this SO Question will provide a start. Basically you use JavaScript to submit data to a server using XMLHttpRequest. The returned HTML is a string which you could either modify or (better yet) normalize and add to the DOM.

For an advanced example jQuery-Mobile does this concept when you click a link instead it gets the HTML from the server as an AJAX request copies the HTML inside the <body> and inserts it into the DOM.

Search for tutorials about AJAX and jQuery (or your prefered JS library). Like this one.