I am having trouble wrapping my head around getting Perl to work with HTML. I am trying to do something I think is simple, but I cant find anything like it online.
Let's say I have a blank web page that has only a button labeled new, and when I press it, I want to destroy the button and create two new buttons, one that is a submit button, and one cancel that creates the old new button.
How would I go about doing that, without reloading the page?
From my understanding, the original HTML code would look something like this.
<form action="/cgi-bin/switchButtons.cgi" method="POST">
<input type="button" value="new">
</form>
and afterward should look like this.
<form action="/cgi-bin/switchButtons.cgi" method="POST">
<input type="submit" value="submit">
<input type="button" value="cancel">
</form>
On pressing cancel, it should refer back to the first snippet.
You can't do that.
/cgi-bin/switchButtons.cgi is a Perl program on the server. Clicking on one of the form's buttons sends a request message to the server, which runs switchButtons.cgi. The output from that program is the contents of a new web page which is sent back to the client (the browser). Of course that involves loading a new page
You could do it in JavaScript, which is part of the page and runs on the client. You can specify that a button will cause the browser to execute some JavaScript, which could alter the page 9n any way you want. But that doesn't answer your question
Related
I have an HTML form on a page. The method is POST, but I'm manually adding a GET parameter to the URL string depending on which button the user clicks. But when the form is submitted, the GET is being stripped off the URL.
I'm really baffled by this. This method has worked many times in the past, and this actual form itself used to work fine. Suddenly, the exact same (formerly working) code doesn't work.
I'm using Firefox Web Developer tools to look at which parameters are passed in the request, and there's no sign of the GET.
<form method="post" target="_blank">
<input type="hidden" name="report" value="abc">
...a couple Select form fields...
<input type="submit" action="reports.php?format=PDF" value="Go">
[<input type="submit" action="reports.php?format=preview" value="Web Preview">]
</form>
Basically, if they click "Go" they should get a PDF, and if they click "Web Preview" they get the same report as a web page; but the "format" parameter isn't received on the processing end of things.
(I've also tried it in multiple browsers.)
Edit to add: I can confirm that the POST data is being received on the processing end. Only the GET is missing.
Edit to add:
If I move the action to the <form> tag, it works. Of course that prevents me from having two buttons that do two things, so it doesn't solve the problem, but it's a clue to what might be happening. This DOES work:
<form method="post" action="reports.php?format=PDF" target="_blank">
<input type="hidden" name="report" value="abc">
...a couple Select form fields...
<input type="submit" value="Go">
<!-- [<input type="submit" action="reports.php?format=preview" value="Web Preview">] -->
</form>
The first place I would look would be to verify that the data is indeed being sent as a POST request. If, for any reason, the browser thinks the form should be using a GET request, it will quite happily delete and replace the hardcoded query string.
What I would suggest is doing a var_dump() on $_POST and $_GET in reports.php to get a definitive idea of what the browser is actually transmitting. There may be some clues in the output.
If the $_GET data is truly missing, I would then check to verify that no one has put a rewrite rule into place on the server to strip query strings off of PHP requests, or even requests to this specific page. As far as I am aware IIS does not normally strip query strings from POST requests, as this would go against well established standards, but it is always possible that rules were manually added to accomplish the same thing.
Solved -- In a submit <input>, an "action" attribute is invalid. I should have used "formaction":
<input type="submit" formaction="reports.php?format=PDF" value="Go">
Somewhere along the way an update to various web browsers must have stopped accepting "action".
I'm migrating an old html page from jQuery to Angular, and it contains some old-school forms with <input type="submit">. When I enriched my pages with the ng-app directive, the old forms stopped working (I mean when you press the submit buttons then nothing happens).
I searched for this problem and scanned the Angular docs too, but it seems that nobody is submitting forms anymore.
Any suggestions on how to bring those forms to life again without much keystrokes would be appreciated.
Currently the form has following markup:
<form name="form_upload" method="post" action="" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" name="send" value="Upload">
</form>
All jQuery code I purged and starting fresh with Angular.
UPD:
I guess i now found cause, it's empty action attribute, it seems empty action is not welcomed by standarts, but very convenient to use allowing you to submit form to the current page URL, is there Angular way to do it ?
Going off of the docs: http://docs.angularjs.org/api/ng.directive:form
Angular's philosophy is to minimize data and page reloads, so they don't like "old school forms", but you can get around it by using an action attribute in the form.
Angular is designed with single page applications in mind and avoiding full page reloads as that is going to take longer to do. By using the ngSubmit directive, you can define a function to send over the form data to the server and get a response back much quicker than a full page reload. Bytes instead of Kilobytes.
Use a non-empty action attribute to make Angular submit the form
Fill action attribute with current location (using angular)
In your controller:
$scope.location = $window.location.href
In your HTML:
<form action="{{location}}">
See the plunkr demo.
I've done this. I'm pretty sure I was using jquery to submit the form, but you could probably do it with plain old javascript.
One of the comments on the angular form page suggests this:
<input onclick="javascript:$(this).parent().submit();" type="submit" value="">
http://docs.angularjs.org/api/ng.directive:form
I'm trying to create a HTML form, and in the end I'm adding a submit button:
<submit submitLabel="Save"/>
Is there an attribute that can be configured so that when pressing the button not only saves the data in the form, but it redirects to another HTML form? Perhaps to create a workflow between HTML forms?
clicking a submit button inside a form issuing a POST/GET request to the page you defined in the <form action="_____"
you can put your second form in the other page (the page you defined in the action attribute)
or even better - you can use AJAX, and avoid reloading the page
There are some ways to do it, but it depends also with what language you work. HTML alone doesn't cut it. You need a server side language as well, such as ASP or PHP
When I use php, i simply create a form and make sure the action is marked to the next page. There i can put the next form in, but I can process also the information I just picked up.
See example below
<form method="post" action="the place of the next form plus where processing happens.php">
put here your fields
<button name="btn_moveon" type="submit" >Go further to next page</button>
</form>
Hope this helps.
You can do this through code or the ACTION attribute of the form tag.
No, there isn't such an element. You must do this on server side, with whatever programming language the server runs (eg. PHP, ASP, etc.).
If we type something in the text area and press submit button, the values should be displayed on the same page under that. How to do that?
And make stay permanently on the page
You need javascript.
<form onsubmit="document.getElementById('output').innerHTML = document.getElementById('tarea1').value;return false">
<textarea id="tarea1"></textarea>
<input type="submit" />
</form>
<div id="output"></div>
You need some server side code, asp.net or PHP
Test for Post/Get parameters
Echo text in response
If you need to learn about forms and server side basics w3schools.com is the best place to start
In order to store something permanently, you need to have a server running your webpage. You can't just create an HTML file that can get changed on the fly and have those changes become permanent. You'll need to learn a server language (PHP for example) and have a server (like Apache) that can display your page.
Is this what you're intending? to make an actual site, not just a webpage?
Add a piece of JavaScript and attach it to onClick of the submit button. In the JavaScript, copy the value of the text area into the new place (assign the text to innerHTML) and also call submit() on the form.
Short Version:
Do you know of any way to get an input button (submit) and an anchor tag to render the same visually using CSS and no Javascript?
Long Version:
I'm developing an ASP.NET MVC application. The site contains pages to view the details of or to create or update my models. The page actions are contained at the bottom of the form and typically include Update and Cancel or Edit, Delete and List (if on a details view page). The Update, Edit, and Delete actions post data from a form to the server, while the Cancel and List actions are/can be handled by appropriate GET requests. It's important to note that one of my design goals is to make the site work as identically as possible if Javascript is disabled to the way it does when Javascript is enabled. I also want the UI elements to render the same visually whether the element causes a postback or fires off a GET request.
In order to get the form submissions to work in the absence of Javascript, I think I must use submit buttons. I'm overriding, with CSS, the visually styling of the buttons to render much like the "buttons" on the top of the SO page -- flat, solid-color with plain text. I'd like the actions that generate GET requests to be handled with anchor tags, but I had problems getting these tags and the styled buttons to render identically. There seem to be issues with alignment and font-sizing. I was able to get them close but not identical.
EDIT: Styling differences using buttons and anchors included not being able to get the fonts to render in the same position relative to the baseline within the bounding box and getting the bounding box itself to render at the same size and alignment relative to the container. Things were just a few pixels off one way or the other regardless of my tweaks. If you've been able to get it to work, please let me know. Knowing that it's possible would make it easier to keep trying things until I could get it to work.
One thing I tried was wrapping the GET-actions around a button, styled like the form buttons. This worked great in Firefox, but not in IE7. Clicking on such a button in IE7 didn't propogate the click back to the anchor. What I've come up with now is to create a new form for the GET, using method="GET", associated with the required action. I wrap that around a submit button that has an onclick handler that sets location.href to the URL of the desired action. This renders visually the same and seems to work, even if the form is nested in another form. A minor niggle is that if Javascript is disabled, then my GET url contains a ? at the end instead of being the nice clean url that you would desire.
What I'd like to know is whether anyone else has solved this in a different way that would work better (and maybe require less HTML)? Do you have any other ideas that I could try? Any way to fix the ? on the GET url when the request is submitted as a post when Javascript is turned off?
Sample code below from a details view. I realize that I could (and arguably should) add the onclick handlers via javascript as well, but the code actuall reads better when I do it inline. I'm using HtmlHelper extensions to generate all of the mark up below. I have reformatted it to improve readability.
<form action="../Edit/2" class="inline-form" method="get">
<input class="button"
onclick="location.href='../Edit/2';return false;"
value="Edit"
type="submit" />
</form>
<form action="../Delete/2" class="inline-form" method="post">
<input class="button"
value="Delete"
type="submit" />
</form>
<form action="../List" class="inline-form" method="get">
<input class="button"
onclick="location.href='../List';return false;"
value="List Donors"
type="submit" />
</form>