I'm trying to publish form template to my main page which sits in different location:
my Code looks like this:
<!DOCTYPE HTML>
<html>
<head>
<script src="js/Jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
<style>
html
{
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
</style>
</head>
<body>
<select name="Template_Picker" id="Template_Picker">
<option value="payment">payment</option>
<option value="identity">identity</option>
</select>
<br>
<div id="Templates_Pages">
<button class="Template" value="Send" id="Template_Button">Show selected</button>
</div>
<form action="test/submit.php" method="post" id="submit_template">
<input type="hidden" id="payment" name="payment" value="payment">
<center id="output">
</center>
</form>
</body>
<script src="test/template.js"></script>
</html>
I'm trying to take my form template which looks like this:
<div id="template" class="template">
<input type="text" placeholder="Full Name" name="Full_Name">
<input type="text" placeholder="Credit Card" name="Credit_Card">
</div>
and place her on my main page, so the JS looks like this:
$(".Template").click(function(){
template_p = ($('#Template_Picker').val());
$.get("test\\"+template_p+".php",function(output){
$("#template_p").append(output);
//template_p = payment when choosing
});
});
when on my JS i choose "template_p" it doesnt work, but when i'm using the center id "output" it works, why?
Thanks in Advance.
It appears like you cannot append an output to an "input" tag.
so i kept using the "center" tag instead.
Related
I'm new to coding and I wanted to make data entry more uniform in my worplace. And so I have been trying to create a html form in a sidebar and submit the resulting data to a speadsheet.
I have my form and my sidebar working but no matter what I try or which tutorial I follow I can't seem to wrap my head around how to get the data from the html form to my spreadsheet.
Here is the .gs
function onOpen(){
SpreadsheetApp.getUi()
.createMenu('Menu CFC')
.addItem('Ajout','showSidebar')
.addToUi();
showSidebar();
}
function showSidebar(){
var html = HtmlService.createHtmlOutputFromFile('menuCFC')
.setTitle('Mon menu CFC')
.setWidth(300);
SpreadsheetApp.getUi()
.showSidebar(html);
}
function formCFCSubmit(form_data){
var sheet = spreadsheetApp.getActive().getSheetByName('Feuille 1');
sheet.([form_data.nom,form_data.numéro])
}
and here is a simplified version of my html form for testing purpose.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form name="formAjoutCFC">
<div class ="block form-group">
<label for="Nom">Nom</label>
<input type="text" name="nom" id="nom" placeholder="Nom" required>
</div>
<div class ="block form-group">
<label for="Numéro">Numéro</label>
<input type="text" name="numéro" id="numéro" placeholder="Numéro" required>
</div>
<div class="block">
<button type="submit" class="action">Valider</button>
</div>
<div calss="block">
<input type="reset">
</div>
</form>
<script>
document.querySelector("#formAjoutCFC").addEventListener("submit", //not sure about the #
function(e)
{
e.preventDefault();
google.script.run.formCFCSubmit(this);
);
</script>
</body>
</html>
Any help would be welcome as I'm out of my depth at the moment ^^
You are doing all right #Lugh, very close to your goal indeed. But you need to take care of some things:
Your showSideBar function is alright too.
On your formCFCSubmit(form_data) you have errors:
The class you want to call from is SpreadsheetApp not (s)preadsheetApp.
sheet.([form_data.nom,form_data.numéro]) is not an existing method.
// For testing purposes, you can paste the data in ranges "A1" and "B1" for example:
function formCFCSubmit(form_data){
var sheet = SpreadsheetApp.getActive().getSheetByName('Feuille 1');
sheet.getRange('A1').setValue(form_data.nom);
sheet.getRange('B1').setValue(form_data.numero);
// Notice accent removed from numero!
// Putting accents in code will give you headaches sooner than later...
}
On your menuCFC.html:
Here is where most of your trouble is coming from...
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<!-- Notice 'id'! That's what the # in the query selector is referencing. Not name -->
<form id="formAjoutCFC">
<div class="block form-group">
<label for="Nom">Nom</label>
<input type="text" name="nom" id="nom" placeholder="Nom" required>
</div>
<div class="block form-group">
<label for="Numero">Numéro</label>
<input type="text" name="numero" id="numero" placeholder="Numéro" required>
</div>
<div class="block">
<button type="submit" class="action">Valider</button>
</div>
<div class="block">
<input type="reset">
</div>
</form>
<script>
document.querySelector("#formAjoutCFC")
.addEventListener(
"submit",
function(e) {
e.preventDefault();
google.script.run.formCFCSubmit(this);
}
);
</script>
</body>
</html>
Now the script in your sidebar, can get the form by id, and when submitted execute the formCFCSubmit function that does what you want it to with form_data.
Keep on coding!
Notes:
You should read official documentation now that you are into coding.
Read about the SpreadsheetsApp class from Apps Script's Spreadsheet service to find out which functions you can use to tailor to your need.
I am trying to change the text inside the <label> tags with the chosen file's name from <input type="file" />
I have tried this, but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
</html>
As you can see I have 2 script sources. The first one is local, and it worked with all my little scripts. I have added the second one because I have found it in the example I got inspired from.
What do you think?
jQuery is welcomed.
Resolve:
It did not work because the script has to be after the element in question.
Moving the script at the end of the HTML page solved everything.
The reason is because html loads top to bottom and your code runs the scripts before any elements are loaded on the page.
One solution:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</html>
Reference this post for more solutions: stackoverflow.com
Does anyone know how can I resolve the following: I want the form input by the user, to be alerted in a different HTML file.
This is what I wrote so far. It works for the id called 'name', but I dont know why it does not for the 'position'.
"index.html" file:
<script>
function myFunction() {
name = document.getElementById("name").value;
position = document.getElementById("position").value;
window.location.replace("signature.html");
return false;
}
</script>
<form class="formulario" onsubmit="return myFunction()">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
"signature.html" file - notice the alert(name) and the alert(position) => the alert(name) works, but not the alert(position). I want to understand how to fix that please.
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
alert(name);
alert(position);
</script>
</body>
</html>
Thanks very much
Edit: I have noticed that I am getting an error, in which "position" is "undefined". Does anyone knows?
You can change your html file as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form class="formulario" action="signature.html" method="get">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
</body>
</html>
And your signature.html file as :
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
var values = window.location.search.substring(1).split('&')
var name = values[0].split('=')[1]
var position = values[1].split('=')[1]
alert(name)
alert(position)
</script>
</body>
</html>
That name you are setting in index.html is not the same name you are printing in the alert of signature.html.
You can see this by renaming name to name2 in both places.
If you want to pass those variables from one page to another, I suggest using query strings how to exchange variables between two HTML pages?
So I have been getting help from some as to how I could fix the issue about how I want to be able to click a button, and have it instead auto select the search box on my site.
Well, people are telling me to use Javascript for the click to do it and I was told to use this code:
function setFocus() {
document.getElementById("myTextbox").focus();
}
But I don't know how to properly combine it with my html. Looked around on Google and everything isn't piecing together for me..
My HTML:
<html>
<head>
<title>DLL Download Database</title>
<meta name="description" content="Need a .DLL file? Don't worry, I am sure we have a DLL available for you!">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function setFocus() { document.getElementById("search").focus(); }
</script>
</head>
<body>
<div class="my_container cf">
<div class="headerbuttons"><p>HOME</p></div>
<div class="headerbuttons"><p>HOW TO INSTALL</p></div>
<div class="headerbuttons"><p style="text-decoration: none; color:#000000;padding:3px;display:block;" onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>
<div class="headerbuttons"><p>DLL SOFTWARE FIXER</p></div>
</div>
<h2 class="homepage-start"><strong>WELCOME TO DLL DOWNLOAD.US!</strong></h2>
<div class="body-main2">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search for a DLL" />
</form>
</div>
</body>
</html>
Please make the following changes in your html
HTML
<div class="body-main2">
<form method="get" action="/search" id="search">
<input id="searchbox" name="q" type="text" size="40" placeholder="Search for a DLL"/>
</form>
</div>
<div class="headerbuttons">
<a style="text-decoration: none;
color:#000000;padding:3px;display:block;" onclick="setFocus();">
<p>CAN 'T FIND A FILE?</p>
</a>
</div>
JavaScript
<script type="text/javascript">
function setFocus() {
document.getElementById("searchbox").focus();
}</script>
Its working fine !!! See this working JSFIDDLE Demo
try
onClick="javascript:setFocus();" // no parameter
or more simply
onClick="setFocus();" // no parameter
BTW, you should be setting the focus on the input tag not the form, so change the id of the input tag to be id="search" and of course remove it from the form.
onClick="setFocus(search);
remove "search" inside the braces
set id="search" for text field
Working Demo
You were not calling the function setFocus(). Also, there was no ID assigned to the textbox.
HTML:
<input name="q" id="search_box" type="text" size="40" placeholder="Search for a DLL" />
Javascript:
document.getElementById("search_box").focus();
instead of calling setFocus(search)
have you tried calling only setFocus()
in
`<div class="headerbuttons"><p style="text-decoration: none;color:#000000;padding:3px;display:block;"
onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>`
EDIT:
remove id = search from the form element and set it on the text element
<form method="get" action="/search" >
<input name="q" type="text" size="40" placeholder="Search for a DLL" id="search" />
</form>
I am very new to jquery. Here what I'm trying to do is creating text box and button(login form). The following code is giveing me duplicate result. Is there something wrong with my code?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>
What is happening is the $(document).ready is being called twice. I think this may have to do with jQuery mobile.
See here:
jQuery $(document).ready () fires twice
And here:
http://forum.jquery.com/topic/jquery-jquerymobile-document-ready-called-twice
for more information.
A quick fix is to put the script tag in the head tag. See example below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
</head>
<body>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>