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>
Related
I am sort of a beginner at this, but my objective is to have the header of my webpage changing, depending on what button was clicked on another page.
More precisely, I have a webpage with 7 buttons on it coded like this:
<form action="contribution.html">
<input type="submit" style="margin-right: 80px;margin-top: 25px;" value="I contribute">
</form>
All of the buttons lead to the same "contribution.html" page, but I would like the header of that page to be different depending on what button the user clicked. There must be a way to do this without creating 7 different "contribution.html" pages for each button... I assume.
Can anyone help, please?
When you do form submission server receives HTTP post request that contains button clicked. Having that request server side can generate proper content of <title> element. Browser will render that text in <title> as a caption of tab/page.
Thus you will need something like PHP or the like on your server. In this case you can have single contribution.php file (but not static html).
Using javascript is the easiest solution. If you spend a little time learning jQuery, you could use something like this:
// A reference to your "header" element
var header = $('.header');
// When the submit button is clicked
$('[type=submit]').click(function(){
// Update the header with the button's text
header.text( $(this).value() );
});
Though I'd recommend using a more specific selector for the buttons you want this to work for, [type-submit] is too generic but I used it because you did.
Use a server-side language and <a> tags instead of a form.
In PHP it will look something like this:
10$
20$
30$
etc.
Then on contribution.php you can get the request data from $_GET['sum'] and act accordingly.
Depending on your application and if you want to be SEO Friendly you should look into this answer How to dynamically change a web page's title?
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...
I have two forms in my html file. They both submitted by one button. Can I connect both forms with this button? Something like
<button form="firstFormId secondFormId"> Save </button>.
Will it make any sense?
You have multiple solutions to do that, I'd go with javascript, or even better, jQuery, if you're using it.
If you are not using jquery, with javascript you could do something like this:
Place somewhere in the page a "submit" link:
Submit
Assign to each form an unique name, let's say "myform1" and "myform2".
Then include in your page the following:
<script type="text/javascript">
function submitform(){
document.myform1.submit(); // submit form 1
document.myform2.submit(); // submit form 2
}
</script>
Instead of calling an external function, to keep things as simple as possible, after assigning the names to the forms, you could even simply place the following link:
Submit
If you are using jQuery, and I suggest this way, you could simply assign a given class to both forms, let's say "submit-me" and then add to your code:
$('.submit-me').submit()
Of all the above I would definitely suggest the last one, that relies on jQuery. It's easy to maintain, reusable (meaning that it can be applied to any form having the class submit-me, and all the job is done by jQuery.
Note that in all the examples you don't need anymore the "classic" submit button of forms.
Not tested, but I hope it'll do what required! :-)
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 am building a faceted search system that has inputs in a sidebar (the facets are check boxes), and an input in the header of the page (the main query box). All of these inputs are submitted simultaneously when the user submits a search.
The only way I can think of to make this work is to wrap the entire page in an HTML form tag. Something like the following pseudo-html:
<form>
<div id='header'>
<logo/>
<input id='q'/>
<!-- a bunch more stuff -->
</div>
<div id='sidebar'>
<div id='sidebar-facets-subsection'>
<input id='facet1'/>
<input id='facet2'/>
<input id='facet3'/>
<!-- a bunch more stuff -->
</div>
<div id='sidebar-form-subsection'>
<form id='unrelated-form'>
<input id='unrelated-input-1'/>
<input id='unrelated-input-2'/>
</form>
</div>
</div>
<!-- a bunch more stuff -->
</form>
This would work, except for three things:
I need to use other forms in the page, as I've indicated above.
I use different django templates to generate the header and the sidebar, making the templates have dependencies on each other.
It's a real mess since the sidebar is in reality about 100 lines, not three.
Is there a more clever way of doing this that I'm not aware of, or is creating huge HTML forms the norm? In circumstances like this, is it better to use Javascript to somehow generate the input entries in a more normal form? Or is that the only option?
Any creative solutions or ideas?
You can make it work with Javascript without sacrifying accesibility
Put all the checkboxes in the header and wrap them in div
Set up and empty but clean side bar
Using Javascript, move you checkboxes from the header into the side bar
Attach a callback to the form.submit event, and when the user submit the form, cancel the event then, take the data from the search field and the checkboxes and send it as an Ajax POST request.
Using a framework like jQuery, it's a 15 minutes job.
If the user has JS enable, the form will post the request and everything will work. If the user doesn't have javascript enable, the checkboxes will be in the header and so they will work, at just the price of a slightly less elegant design.
But people with Javascript disable are used to design changes so it's ok.
Use javascript to populate a hidden field with a list of this checkboxes name=value pairs on form submit and treat this in serverside code, spliting the string into an array, etc.
Please note that this is not a good aprouch, since you loose accecibility to those with javascript disabled. The form tag is the only accessible way of doing so.
You can try to change the layout, if you can, swaping the checkboxes with links of buttons that filters the data, almost the way most ecommerce sites do out there.
I believe you have two options:
1.) a page wide form element. All "submit" buttons submit to the same form and the server-side script processes the form for all filled elements. By page wide, I'm not being literal... The related inputs all in the same form tag. Other forms are placed in other form tags.
2.) multiple forms, with a client side script which populates hidden form fields with the data from the other form before submission.
1 requires more work, but 2 may not work for every visitor.
Do consider the fact that, just because you have one form container, you don't have to necessarily display everything together for the user. Encapsulate inputs in divs and position them according to your will. It may not be easy, but it's definitely possible.