html single submit button used for two different tasks - html

I've a html button which I want for two different tasks on a single press event. First, when I press the submit button it should insert data to the database (which I've done) and the another task is to render to another page. How can I make this button do these two functions simultaneously?


You can do this by specyfing action attribute of form element:
<form method="post" action="page.jsp?action=save">
...
<input type="submit" value="Submit!" />
</form>
After clicking submit button user is redirected to page.jsp (it may be the same page) and in that file you can get value of action variable: if it's save then execute code responsible for writing to db. After that code you place page-rendering code.
It's the simplest solution, but maybe not the most elegant.


"Just" do it then.
someDAO.save(someData);
response.sendRedirect(newURL);
That's basically all you need to execute in your servlet (or JSP if you're still abusing it as a controller).

Related

HTML form with GET method to PDF file ignores query string

I have this simple web form which has just a single button so the user can open a static PDF file when they click it.
Now that I've updated the PDF file, I updated the query string timestamp cache-busting parameter so they see a new version of the file.
<form action="Path/To/My/PDF Document.pdf?v=1234" target="_blank">
<button>Get your PDF here!</button>
</form>
Well, the PDF opens up alright, but the querystring is automatically reduced to just the question mark.
What opens up is: Path/To/My/PDF Document.pdf?
This shows the original version and not the new one, and I'm wondering what is the matter with this process?
*I know method="GET" is not in my example, but it does the same with or without it.

Give this a go:
<form
action="Path/To/My/PDF Document.pdf"
method="GET">
<input type="hidden" name="v" value="1234" />
<button>Get your PDF here!</button>
</form>
Key points:
specify the method as GET
provide the query-string parameter as a hidden input, with the name set to the name of the query-string
The reason this works is because of how forms process input data.
Demo: https://jsfiddle.net/1tszbe5o/
Recommended reading for WHY this works: https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data
TLDR: when you use the GET method, any form data provided with form inputs will be included in the query-string of the HTTP request resulting from the form action.
Why does it get stripped out in the first place? Because the form data was empty, hence the query-string was empty also ;)

Is it possible to change the value of an HTML button by passing URL parameters?

The issue
I am setting up an IQY query to access data with Excel from the web. This is normally pretty straightforward and done by just providing the URL to the data and then select what to download. But the the data I am interested in is located in a table that can switch between different time-spans by clicking an HTML button.
What I think I need to know is if I can manipulate HTML buttons using parameters passed in the URL. Lets say that I want to access "www.datasource.org/data". At this page there is a table that can be altered by clicking a button with the following code:
<button class="ctt ctt_Text ctt-default" value="2" type="button">Button Text</button>
The default value of the button seem to be "1" (which is the table shown when visiting www.datasource.org/data), but can I change the value to 2 by passing a parameter in the URL instead of clicking the button that changes it? Or is there perhaps someone who can suggest a different solution?

You can get url by JavaScript:
window.location.href
Or PHP:
$_GET['Variable Name'];

Django HTTP post to same URL

What is the "proper" django way to do an HTTP POST to the same page when a button is clicked in that page?
I've got a django app which contains a page with two different buttons. Each button does a different thing but the results of the button press are returned in JSON format which then gets used to update the UI on the page.
I can obviously have each button submit to its own view and do it that way. But I can also make the page view respond to the button presses and detect whether the request is a POST or not.
Then there is the JSON mixin stuff - is it worth trying to use that somehow?
I've got it all working - I'd just like to know what the "proper" way to do it would be.
Any ideas?

As Mikko Ohtamaa said, common practice is to check in your view which button was pressed. e.g.:
template.html:
<form method="post" action="">
{{ obj_form.as_p }}
<button name="action1" value="1" type="submit">
<button name="action2" value="1" type="submit">
</form>
views.py:
if 'action1' in self.request.POST:
form = Action1Form(request.POST)
elif 'action2' in self.request.POST:
form = Action2Form(request.POST)
Using several forms in a single view is more convenient when you have one HTML form with different actions. If you have separate forms (or don't have them at all), I suggest using separate views for each action.

How to use the form value in the action?

I am trying to make a form in html that uses the value you enter to form the destination URL.
<form action="../search/${params.q}" method="post" id="q">
Busqueda: <input type="text" name="q" /><br />
</form>
This is what i am doing, but it does not work, any cluess? thanks!

You'd need to handle this using a script - either server-side or on the client (JavaScript).
HTML alone can't handle parameters in the way you're using them.
So you'd need to either POST the form (as you're already doing) and handle the postback by redirecting your request to the new address, or use JavaScript to capture the field's value when a submit button is clicked and loading the new address in the browser window.
I'd suggest server-side is the best option as JavaScript might be disabled or unavailable.

Dynamically hide form on submit?

I am not a big web programmer, and have a friend who wants me to help him with something.
He wants to be able to have a form that once it is submitted changes to say something like "Thanks for submitting" and have the form info disappear. He wants it to be easy for anyone to use, so he can give it to various people to use on their sites.
I was thinking I could use javascript to do it, but not really 100% sure. I want to avoid anything that isn't HTML as much as possible so that it will be usable by as many people as possible.
Thanks.

What is supposed to happen to the information in the form? Doesn't matter?
If you want it to be pure HTML there's only one good solution: Write one HTML page with the form, and another almost identical one with the success message in place and the form data hidden. Simple.
On the submitting side:
<h1>Email Subscription:</h1>
<form action="successForm.html">
<input type="text" name="emailAddress" />
<button type="submit">Send Info</button>
</form>
On the receiving side (successForm.html)
<h1>Email Subscription:</h1>
<p>Great job, you submitted!</p>
However, if you need something to change on the very same page, you're going to have to use something non-HTML. HTML just won't make any decisions about what to display. It is dumb... it just displays.
It's very easy to use JavaScript to detect when the form was submitted, and then hide the elements you need to hide, and show the success message:
<!-- Goes in the <head> or in a seperate script -->
<script type="text/javascript">
var theSubmitButton = document.getElementById('formSubmit');
theSubmitButton.onclick = function() {
var theFormItself =
document.getElementById('theForm');
theFormItself.style.display = 'none';
var theSuccessMessage =
document.getElementById('successMessage');
theSuccessMessage.style.display = 'block';
}
</script>
<!-- Goes in the body -->
<h1>Email Subscription:</h1>
<p id="successMessage">You submitted the form, good job!</p>
<form id="theForm" action="successForm.html">
<input type="text" name="emailAddress" />
<button id="formSubmit" type="submit">Send Info</button>
</form>
Of course, this example is oversimplified. It doesn't do anything with the data, and it doesn't follow best practices, or check that the data is valid in any way. I'm just trying to give a basic idea of how to use JavaScript for this purpose. If you're not a programmer, then coming up with a small, distributable piece of software might be a good job for someone else.
However, you still need some mechanism to store, email or otherwise DO something with the form. Add an edit to your question and I'll be happy to clarify my answer with a specific example.
(Another note, I didn't try to run that Javascript, so if you see an error, please just note and I'll fix it)

Try the jquery form plugin. This will achieve what you're after in an elegant way with minimal coding. In addition to this you'll need to download jquery.
This is a javascript solution, however it's safe to assume that everyone is using a javascript capable browser.

The standard way to do this is to submit the form to a different page (submit.php, for example), which provides a new page with the thankyou message. No javascript, no DHTML.
You could use javascript to replace the innerHTML of a huge div containing everything, or remove all the elements, but I'd advise against it.

There's 2 options:
Old school forms:
Person clicks submit and form data gets sent server side via GET or POST,
the page loads again and displays "Thanks for submitting"
New school javascript AJAX
Person clicks submit and javascript submits form data to server side via AJAX and removes the form elements to then add "Thanks for submitting"
Anything else is some hybrid of both these techniques.

I know you want to avoid anything other than html but this simple php code may help. You could use php within the page
fill out form and press submit to send data to form handler
In form handler, have data processed and then redirect back to the form page with a header('Location: yourwebaddresshere?form=submited');
Then in the original form page, add a php IF statement above the form code:
$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(strpos($url, 'form=submited')) {
echo 'Your thank you message here';
exit(); // Use this to stop code after this statement from loading
}