Similar to how an input outside of a form element can be including in submission using the form= attribute. Is it possible to include an input in every form submission without using javascript?
<input type="hidden" form="*" name="include-all" value="id1234"> //This is an example and is not working html
I am using a scope id server side to manage browser tabs and this id needs to be passed with each form submission. Its redundant having to include the hidden element in each and every form container.
I've considered including the id in the querystring but this destroys bookmarking and adds complexity to my request handler. Though it may be my best option...
Does the button you are using have a value? In my application, to get an id, I just set it as the value of the submit button (<button>) and call a $_POST request on the button's name attribute.
Related
How to semantically structure HTML to delete an item?
I know that HTML's <form method="..."> only permits "POST" and "GET". But that doesn't matter to me, since all forms are submitted via AJAX. ( Btw. I found some old draft that requests "PUT" and "DELETE" in forms: http://amundsen.com/examples/put-delete-forms/ ). This question is just about the HTML semantics.
In some rare cases there are forms that use an input field, in order to let the user confirm his delete action (like GitHubs "Delete this Repository").
But what about having a form that contains no inputs at all, but only a single submit button?
Bonus question: Would it make any difference if it's a real delete vs. a soft delete (a.k.a. "move to trash")?
If you're unable to use HTML <form> methods and must rely on javascript to send information to the server, in this specific case, a <button> element by itself (without a wrapping form element) is most appropriate. Buttons don't have to be wrapped in forms to be used to trigger actions.
The HTML <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
— Mozilla HTML Elements Reference: Button Element
A standalone button should be used regardless of if the button action is a "soft" or "hard" delete, but you should use text or another method to make sure users understand which action is being performed.
<button class="soft-delete" type="button" data-item="1234">Move to Trash</button>
<button class="hard-delete" type="button" data-item="1234">Delete Forever</button>
Fairly new to HTML Service in apps script, have written a very basic UI.
The problem is that when the button is clicked (no onclick handler set) it opens up a new blank tab (I'm using Chrome).
Code below reproduces the behaviour, I have jquery / jquery UI references which are used in the broader project so left them in here.
How do I stop this blank tab opening on button click? Not shown here but it also happens when entered hit in a text box.
code.js:
function NewProposal() {
var html = HtmlService.createTemplateFromFile('Index');
var ss = SpreadsheetApp.getActiveSpreadsheet();
ss.show(html.evaluate().setHeight(530).setWidth(1100).setSandboxMode(HtmlService.SandboxMode.IFRAME));
}
Index.html:
<!DOCTYPE html>
<base target="_top">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid.min.js"></script>
<form>
<table>
<tr>
<td>
<button id="Create">Create</button>
</td>
</tr>
</table>
</form>
You'll need to either get rid of the button, and use something else, or get rid of the form tags, and use div tags. If you get rid of the form tags, then it's more difficult to collect data from any input tags in the form. But, I don't see any input tags in your form. If you have no input tags in your form, then using form tags is pointless. Maybe you just left them out for purposes of reproducing the error in as little code as possible.
When a button is clicked inside of a form tag, the default behavior is for the current window to issue a POST request. That refreshes the content in the browser, but if there is no callback to display some other content, the page will go blank.
The only way to avoid this built-in feature of a form with a button, is to not use a button, or not use the form tags.
A click event can be added to multiple different types of HTML elements. Like a link <a> tags. Or a <div>. So, you can use something else other than a button, style it to look like a button if you wish, and add a click event to whatever you decide to use.
If you have lots of different types of input tags, it may be better to continue to use the form. But if you can easily get all the data out of the table some other way, you don't really need the form. The form adds nothing to the capability of styling or layout. So, if the benefit of using the form doesn't fit your circumstance, then you can look at other options.
If you want to give feedback to the user about what inputs are required, that's another issue. The form tags, the required attribute, and the button submission are all part of a system to try to make form submission more automatic, and make data validation and data collection easier. But, in order to use that "built-in" functionality, it all needs to work together in a certain way. As with anything that people try to make generic, it's very difficult to make it fit all circumstances. If you don't want the page to go blank when the button is clicked, all of that built-in behavior can become more of a detriment than a help.
When Apps Script gets the form, it strips out most of the content from the form element, and creates an object of input names and their values. So, when the "form" object (No longer a real form object) gets to the server, the only way you can get the values out of the object is by using the name attributes.
Add onsubmit="return(false)" inside your form openning tag:
<form onsubmit="return(false)">
...
</form>
I have a very long form, so I need to separate it to different pages.
My questions are:
1) How to save the form input when the user navigate to next form, and when the user back to previous form, the data entered previously will still be there.
2) How can I save the data of the incomplete form and provide the user a link so that he can go to that link and continue to fill in the form before actually submit it.
Please advise me on how to achieve these. Thanks in advance.
Simply submit the form to next form page and in next form page you can populate hidden fields with the received data from form1
form2.php
$form1Field = $_POST;
form2.php
<form action="form3.php">
<input id='form1_name' type='hidden' value='<?=form1Field['name']?>' />
<input id='form12_email' type='text' value='' />
</form>
#katti's suggestion is good, easy way is to make divs for each form and hide using css "display:none" all divs except 1st, then on a click button, hide div1 and show div2 so on. that way you wont need many form and will need less code and faster solution.
You can use hidden fields for this purpose. Or save data in cookies.
You can divide the form by dynamically loading the next part of the form using JavaScript.
And it is a better user experience too not loading a new page completely.
In this case you can save the form content in a JSON object which can be posted to the server once the user hits submit.
When I add a normal <form> element in my xpage, the pager doesn't work any longer, means I cannot switch to other pages (clicking on "next" or something).
Here is the important part:
<xp:pager id="newsPager" for="newsList" pageCount="4" partialRefresh="true">
//pager stuff.....
</xp:pager>
<form action="#">
//form stuff... contents not important for my issue, I tested it
</form>
When I exclude the form entirely, it works
I use Domino Designer 8.5.3 on windows 7
And the "newsList" is an ID of a repeat-control
Instead of using a passthru form, use a form component:
<xp:form action="#">
// form contents
</xp:form>
This will prevent the rest of the content from being surrounded by a form tag, which also breaks events and data submission, so you'll need to surround the rest of your content in its own form:
<xp:form>
<xp:pager id="newsPager" for="newsList" pageCount="4" partialRefresh="true">
//pager stuff.....
</xp:pager>
<xp:repeat id="newsList">
//repeat contents
</xp:repeat>
</xp:form>
NOTE: do not nest forms inside each other; this confuses browsers, which is why your current design is not functional. Identify, instead, discrete portions of the page that can be safely treated as separate forms and wrap each portion in its own form component.
The XPage renderer automatically adds a form to the page unless you have disabled this in the properties of the Xpage.
This form is used to process all the partial refreshes and submitting of values to the backend. When you add your own form tag the partial refresh used by the pager ( or any xpage component ) no longer has the correct information needed to talk to the server.
if you really need to have your own form tag then I would suggest an iFrame that loads in an external page that contains your form.
i found this and it's work fine for me
http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/work_with_HTML_forms#Embed+a+custom+HTML+form+in+a+XPage
I have a form with id and multiple inputs with ids as well how i get a specific input inside a form tag.
<form action="#" method="post" id="frm-location">
<input type="text" name="txt-location" id="txt-location" />
</form>
what I want is to get the txt-location from the frm-location
You want a reference to the <input> element itself?
var form = document.getElementById('frm-location'),
input = form.getElementsByTagName('input');
// or, more specifically:
var form = document.getElementById('frm-location'),
input = form['txt-location'];
// if the name didn't have a dash in it, you could write this instead:
input = form.txtLocation;
// or, even better, since the input has an ID:
var input = document.getElementById('txt-location');
https://developer.mozilla.org/en/DOM/document.getElementByID
https://developer.mozilla.org/en/DOM/element.getElementsByTagName
https://developer.mozilla.org/en/HTML/element/form
https://developer.mozilla.org/en/DOM/element
You want the value of that element?
var input = /* whatever */,
inputValue = input.value;
https://developer.mozilla.org/en/DOM/HTMLInputElement
HTML is a static type markup language. As such, by itself there are not many options for accessing and processing data. There are a few general approaches for getting data from a web page. I'll keep the explainations generic, but they will translate to whatever platform/language you are using.
Access the data server side. This is accomplished by having the user submit the form. Once submitted, the values will be available via the query parameters. Various languages will have different methods to access the parameters.
Access the data client side. You can always use javascript to hook client side events like onblur, onchange, onfocus. Once your javascript fires, you can access various form elements with dom/js methods like getElementById/getElementByName -- Which would be able to reference your form elements but Id/Name respectively.
A Hybrid approach. AJAX is a mixture of the two approaches listed above. Client side code (javascript) makes async calls to the server. the server then processes the data in some manner and sends responses back to the client.
Hope this points you in the right direction. If you would like to clarify your question a bit, I can certainly try to cater the answer more to your specific case.