This is my code but doesn't work. How do I save data form inputs to json file and send to server?
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<form id="myform" action="register.json">
<label>Vesete ime</label>
<input type="text" name="name" value="name">
<label>Vnesete password</label>
<input type="password" name="password" value="password">
<button id="btn" type="submit" value="submit">Potvrdi</button>
</form>
This is my script
<script type="text/javascript">
var x ={ "name":" ", "password":" "};
var myJSON = JSON.stringify(x);
document.getElementsByTagName("input").innerHTML = myJSON;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'register', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
console.log(this.responseText);
};
xhr.send('name=name&password=password');
</script>
in the browser show this file:///var/www/html/register.json?name=marina&password=1234567 but not save in json file. Plese help me in the first tame work with json.
To save data to the server you need to:
Use a server! Your URL starts with file: which shows you are accessing a local file and not making an HTTP request to a server.
Write server-side code that will read the data you are sending and save it. Just making a request to a static file won't change anything (otherwise anyone could change any page on any website!). How you do this will depend on which server you use and which server-side programming language you pick. Use a search engine to find an introductory tutorial for server-side programming using the language of your choice. (e.g. for Perl, JavaScript, or Python).
Related
I have written an HTML file, in the same when I try to pass data to a .gs file in order to print or console.log then it doesn't give the log in the output of the console and instead, it reflects these statements in the console:
Net state changed from IDLE to BUSY
Net state changed from BUSY to IDLE
Attaching the code UI, HTML file, and .gs file below for reference.
HTML output:
HTML file:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">insert_link</i>
<input id="zz" type="text" class="validate">
<label for="zz">Insert Text</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="testBox.gs"></script>
<script>
var gSheetUrl = document.getElementById("zz");
document.getElementById("btn").addEventListener("click",abc);
function abc(){
console.log("inside abc");
var data = {
zzz: zz.value
}
google.script.run.getData(data);
}
</script>
</body>
</html>
.gs file:
function openIndexDialog() {
var template = HtmlService.createTemplateFromFile("indexDialog");
var html = template.evaluate().setHeight(450).setWidth(600);
SlidesApp.getUi().showModalDialog(html,"Demo App");
}
function getData(data){
console.log(data)
console.log("data logged")
}
Console output:
Main Problem: Not able to print data when passed through getData(data)
Those are not error messages, they are information logs about the server- client communication .
Every time that your client code call a server-side function using google.script.run there will be a Net state changed from IDLE to BUSY log and when the server-side function ends will be a Net state changed from BUSY to IDLE.
Regarding
Main Problem: Not able to print data when passed through getData(data)
If you want to print data on the client side, you have use console.log on the client-side, not on the server-side. Logs printed from the server side can be found in the executions page.
Related
Unwanted Output In Console
I am using materialize in my Vue.js project I am having issues with displaying materialize's datepicker this is the code i have.
<form class="form">
...
<input type="text" class="datepicker" />
</form>
data() {
return {
date: null
};
},
mounted() {
$(document).ready(function() {
$(".datepicker").datepicker();
});
}
I am new to Vue.js so I apologize for the simplicity of my question So how do i get the datepicker to display and save it to a variable I have had the issue with materialize not displaying tabs properly also i don't know if i don't have something imported correctly. this is my html file.
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</script>
</body>
Looks like you forgot to load Materialize after jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I am working on a demo Web Sockets application. I have the communication set up between the client and the server and they are able to exchange the information between them. I am interested in representing the chat history in the form of a scrollable, color differentiated UI. I initially went with a TextArea which was perfect. Only thing was I am unable to color code the server and user responses differently. I then fell back to LI elements from Bootstrap. But they are appearing very bloated and one more thing that I noticed is since they are part of an UL, I am not getting the scroll bar. So the user input textbox is getting pushed to the bottom of the page as and when there is more communication between the client and the server.
Request you to suggest me an alternative HTML construct which I can explore.
HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>A WebSocket Example!</title>
</head>
<body>
<h1>Lets Chat!</h1>
<small id="subtextMessage" class="form-text text-muted">Great conversations happen over a socket!.</small>
<BR><BR>
<!-- Building the Form -->
<form class="" id="chatform" onsubmit="clearTextInput();return false">
<div class="form-group">
<label for="conversationHistory">Conversation History</label>
<ul class="list-group" id="conversationList">
</ul>
<textarea class="form-control" id="conversationHistoryTextArea" rows="10" readonly></textarea>
</div>
<div class="form-group">
<label for="labelMessage">Type your message</label>
<input type="text" class="form-control" id="inputMessageTextBox" aria-describedby="inputMessage">
</div>
<button type="submit" class="btn btn-primary" onclick="sendMessage()">Send Message</button>
</form>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/chatscript.js">
</script>
</body>
</html>
Javascript:
function clearTextInput()
{
$("#inputMessageTextBox").val("");
console.log( "Reached Here" )
}
function sendMessage() {
ws.send( $("#inputMessageTextBox").val() );
$("#conversationHistoryTextArea").val( $("#conversationHistoryTextArea").val() + "\n" + "YOU: " + $("#inputMessageTextBox").val() );
let li = document.createElement('li');
li.innerText = $("#inputMessageTextBox").val();
li.classList.add("list-group-item");
li.classList.add("list-group-item-info");
document.getElementById('conversationList').appendChild(li);
}
let ws = new WebSocket("ws://localhost:8000");
ws.onopen = function(event) {
console.log("Client: WebSocket request accepted.");
};
ws.onmessage = function(event) {
console.log("Received from the server" + event.data);
if( $("#conversationHistoryTextArea").val().trim().length > 0 )
$("#conversationHistoryTextArea").val( $("#conversationHistoryTextArea").val() + "\n" + "SERVER: " + event.data );
else
$("#conversationHistoryTextArea").val( "SERVER: " + event.data );
let li = document.createElement('li');
li.innerText = event.data;
li.classList.add("list-group-item");
li.classList.add("list-group-item-primary");
document.getElementById('conversationList').appendChild(li);
};
Please let me know if you have any suggestions.
You can use the HTML <p> element, and use CSS classes for each different party.
You can also use <span> but you will have to deal with the line break.
I am sure there are many other solutions for this.
I want to get country flag in country label.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="ng-flags.js"></script>
<script src="script.js"></script>
<body ng-app="validationApp" ng-controller="mainController" style="background-image:url('images/Assets/BG.png')">
<label>COUNTRY</label><br>
<select name="country">
<option ><span flag="'us'" flag-size="f32">USA</span></option></select><br><br>
</body>
declaring ng-controller add dependency of ng-flag.
var validationApp = angular.module('validationApp', ['ngFlag']);
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
});
Assuming the ng-flags library you are using is this one: https://github.com/asafdav/ng-flags
You just need to follow the instructions...
Usage
Add ng-flag.js to your main file (index.html)
Set ngFlag as a dependency in your module
var myapp = angular.module('myapp', ['ngFlag'])
Add the following line to the head section of your main file
<link rel="stylesheet" type="text/css" href="http://cloud.github.com/downloads/lafeber/world-flags-sprite/flags16.css" />
Start drawing flags
<flag country="us" size="16"></flag>
* 32x32 thumbnails are also supported, just add the following line to your head:
<link rel="stylesheet" type="text/css" href="http://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />
And and specify the wanted sizein your html:
<flag country="us" size="32"></flag>
Being new to Dojo I'm trying to initialize a Dijit form with values, e.g. read from storage, XHR etc.
However, invoking form.setFormValues() causes an error TypeError: invalid 'in' operand this.formWidgets thrown by http://yandex.st/dojo/1.7.3/dojox//form/manager/_Mixin.js
Is there anything I'm doing wrong or is this a Dojo issue? (The complete sample is also found here: http://pastebin.com/7LUHr3iA)
<!-- language-all: lang-html -->
`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
<script type="text/javascript">
dojoConfig = {async: true,parseOnLoad: true};
</script>
<script type="text/javascript" src="http://yandex.st/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dijit/form/TextBox","dijit/form/Button","dojox/form/Manager",
"dojo/parser","dojo/dom","dijit/registry"], function () {});
</script>
</head>
<body class="claro">
<form id="myForm" method="post" data-dojo-type="dojox.form.Manager">
<label for="name">Name</label>
<input id="name" name="nameField" data-dojo-type="dijit.form.TextBox"/><br/>
<label for="surname">Surname</label>
<input id="surname" name="surnameField" data-dojo-type="dijit.form.TextBox"/><br/>
<button data-dojo-type="dijit.form.Button">Submit</button>
<script type="dojo/method" event="startup">
var form = dijit.byId("myForm");
form.setFormValues({
nameField: "Hello",
surnameField: "World"
});
</script>
</form>
</body>
</html>
`
Dojo 1.7 is asynchronous. Code should take the form:
require(["dependency"], function(dep) {
// use dependency
});
There is no reason to believe dojox/form/Manager would be loaded when you try to reference it further down the page.
The registry is the correct way to reference the widget, not 1.6 style code of the form dijit.byId. See livedocs.
See also the dojo/domReady! plugin.