In ASP.NET Core I have a home page that I would like to add a 'notes' section to, that anyone can append to. On the page I have this
<p id="noteSection"></p>
<textarea row="6" cols="66" id="note" value="message"></textarea>
Save
<script type="text/javascript">
function SaveNotes() {
var value = document.getElementById('note');
$('#noteSection').text(value);
}
</script>
What am I doing wrong? How can I allow for any user to input a note into the text area, click save, and have that text save into the <p></p> indefinitely? I want it to save even if a user logs out it will still be appended in the html upon relogging in? I would prefer not to have to create a table for this,.
Why wouldn't you create a table for it tho? If you want to keep it forever you need a away to persist the values. The only other option I can think about would be to use localstorage or cookies
Related
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'm trying to send a string from an input box to Google's search input to search on my website.
The only way that I can think of is Posting it to my own page which then sends it to google.
Is there a way to cut out that middle page and go straight to google?
Summary: Send input box string to Google's input box and search using Google.
Current thoughts of how to do this are.
Make form with input box
Submit form to seperate page
Seperate page then redirects you to "https://www.google.com/#q=" $_POST['string'] "site:mysite.com"
But I feel like there's a better way to do this.
Thanks
<input type="text" class="foo">
<button onclick="send()">Submit</button>
<script type="text/javascript">
function send(){
var value = $('.foo').val();
window.location.href = "https://www.google.com/#q="+value+" site:mysite.com";
}
</script>
I would like to
(1) not show any suggestions to the user while typing in an input field.
This can be done like this:
<input autocomplete="off">
However, I noticed that this also
(2) disables the history chaching, e.g. when you go to another site and click on the history back button the input field will be empty.
You can try it here:
http://jsfiddle.net/LC53F/
Only text inserted into the first field will survive going to a new page and back again.
Is there a way to only have effect (1), but not (2)?
This solution should work, but is not ideal: just sharing an idea.
I don't think you will be able to preserve history with 'autocomplete', so let's try to fiddle out something.
Here's an idea: the history is based on input names, so you can turn off the autocompletion from other sites by using an uncommon name (but still constant, for example: 'email_fakeSuffix_194h5g48').
Then, to turn off autocompletion from this input previous values, you can change its name everytime the page is loaded (ie. append a random number). The problem is that, doing this, you will also turn off the history.
So, the main idea is to use an uncommon input's name and to change it just before submitting the form:
The value won't be saved by the browser because the name has changed
If you navigate to another page without submitting, the value will
still be set because you haven't change the name yet.
Here's an example using JQuery (you can use anything else, or even vanilla JS)
JSFiddle: http://jsfiddle.net/vse9jx3r/
HTML
<form>
<input id="input1" name="email_fakeSuffix_194h5g48">
<input name="input2">
<input type="submit">
</form>
JS
$('form').submit(function() {
$('#input1').attr('name', 'email_fakeSuffix_194h5g48_' + Date.now());
//SUBMIT THE FORM (MAY DO NOTHING AT ALL)
});
You can tell me if I'm not clear enough.
This works for me (using jQuery 1.9.1):
$(function(){
$('input[type=text]').prop('autocomplete','off');
$('#formid').on('submit', function(e){
$('input[type=text]').removeProp('autocomplete');
});
});
I would like to create a form that changes dynamically.
I have a form for creating a project (with fields such as: project_name, project_description...) and the project can have any amount (bigger or equal to 0) of categories.
What i want is to display a button which would give the user the option to add another category field. In addition I would also like the option for category fields to be "deleteable" by the user (if he changes his mind or made a mistake). What would be the best way to do so. I would like an Ajax type solution.
My solution so far is to leave an empty div beneath the last category and onclick of the button to load another field into that div with yet another div which will be used for the next div. Not to happy with this solution since i now have to count how many fields I have and give each div it's own id which complicates the matter even more.
Is there a more simple solution to this?
If you are trying to add fields dynamically with a button, you can easily do so by doing something like the following:
HTML:
<form>
<p>
<label>Name:</label> <input type="text">
<label>Age:</label> <input type="text">
<span class="remove">Remove</span>
</p>
<p>
<span class="add">Add fields</span>
</p>
</form>
JS:
$(".add").click(function() {
$("form > p:first-child").clone(true).insertBefore("form > p:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
Demo: http://jsfiddle.net/UeSsu/1/
I started to write a form generator is based on a definition in JSON a while back. It works but could use some enhancements. It's written using Prototype.js but it wouldn't be a huge effort to port it over to jQuery.
You're welcome to steal the code. (just view source)
I've done something similar. To delete fields I didn't really removed fields. I just hidden them with a display:none and had a hidden input "delete" that I trigger to true. Then, the page receiving the result knows which field is to be deleted in the database.
They are not deleted before the form is submitted. It's like a "two pass" conception. But if you don't really need a true ajax, it works fine. Otherwise you need your JS remove function to call the server and tell to delete the field with its id. A little bit more complex to code.
How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs