I am trying to create something that when the script is run it reads the parameters that have been set in there.
For example loading a custom sidebar where the user can enter details or parameters to the run the script with. These parameters will remain until they are changed but shouldn't be required every time you run a script that uses these parameters.
A sort of like settings menu.
I have seen something similar in some addons that have been made can someone please point in right direction on how to go abouts doing this.
I already have the scripts running succesfully just need a UI where the parameters can be entered and set. I would like to avoid reading it from a sheet in the spreadsheet if possible.
Edit:
I see that there is a getscriptproperty available that is available to all users:
so far I have got update (2):
HTML:
function showside(){
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('body'))
}
function setProperty(objectForm){
PropertiesService.getScriptProperties().setProperties(
{a1: objectForm.a1 ,
a2: objectForm.a2,
p1: objectForm.p1,
p2: objectForm.p3})
return 'Updated'
}
<!DOCTYPE html>
<html>
<head>
<script>
function readProperty(){
var settings = PropertiesService.getScriptProperties(), keys = settings.getKeys()
Logger.log('running')
for (var i =0;i<keys.length;i++){
document.getElementbyID(keys[i].toUpperCase()).value = settings.getProperty(keys[i])
}
}
function handleFormSubmit(objectForm){
google.script.run.setProperty(update).setProperty(objectForm)
}
function update(update){
var div = document.getElementById('output');
div.innerHTML = 'Updated!';
}
</script>
<base target="_top">
</head>
<body onload="readProperty()">
<form id="myForm" onsubmit="handleFormSubmit(this)">
a1<input type="url" id="a1" value="" />
a2<input type="url" id="a2" value="" />
a3<input type="url" id="a3" value="" />
P1<input type="text" id="P1" value="" />
P2<input type="text" id="P2" value="" />
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
</body>
</html>
A rough approach; Improvise from here;
Read comments inside the loadScript();
document.getElementById("formWithData").onsubmit = loadScript();
function loadScript() {
// get data from submitted form
// this way script will re-run with data based on what u give in the form
}
<form id="formWithData">
<input type="text" placeholder ="enter condition 1">
<input type="text" placeholder ="enter condition 2">
<input type="text" placeholder ="enter condition 3">
</form>
Related
I have the below code which allows me to dynamically add additional text fields when the button is pressed. I'm essentially mocking up multiple destinations along a route.
<!doctype html>
<head>
<title>Test</title>
</head>
<body>
<div id="form">
<form id="address">
<p>Route:</p>
<input type="text" name="Address" placeholder="Origin">
<input type="text" name="Address" placeholder="Destination">
<button type="button" id="add" onclick="addField('address')">Add field</button>
</form>
</div>
<script type="text/javascript">
function addField(id) {
// OnClick function for adding additonal fields for
// transit routes with multiple destinations.
var field = `<br/><br/>
<input type="text" name="Address" placeholder="Origin">
<input type="text" name="Address" placeholder="Destination">`
document.getElementById(id).innerHTML += field
}
</script>
</body>
</html>
I can fetch an array of all the elements within:
var elements = document.getElementById("address").elements;
But what I want to do is link every Destination field to the next Origin field, so that the Destination in the last field ends up as the Origin for the next row. I imagine it's something like below, but it's not clicking in my head.
elements[elements.indexOf(this)-1].value;
I am using Ajax to submit forms in serial. I am trying to make the first s_referee_email + s_referee_fname pair required while the second or others not - there will be up to five of these pairs. I cant seem to figure how to make just the first pair required without breaking the form. I have tried using HTML5 and some answers from stack but havent been able to get anything to work. Any advice is greatly appreciated!
fiddle: https://jsfiddle.net/badsmell/gcrvqbna/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--serial submit ajax-->
<script>
function mySubmit(){
var myForms = $("form");
myForms.each(function(index) {
var form = myForms.eq(index);
var serializedForm = form.serialize();
serializedForm += '&s_referer_fname='+$('#s_refererFname').val();
$.post("http://post.aspx", serializedForm, function (data, status) {
if (status === "success"){
window.location.href= "http://redirect";
}
});
});
}
</script>
<title>Forward a copy to a friend</title>
<style type="text/css">
*[class=hide] {
display: none
}
</style>
</head>
<body>
<!--hidden iframe-->
<iframe class="hide" id="myIframe"></iframe>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" required >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" required >
</form>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" >
</form>
<label for="s_referer_fname">Your name:</label> <br /> <input type="text" name="s_referer_fname" value="" size="20" id="s_refererFname" ><br>
<p><button onclick="mySubmit();">Submit</button> </p>
</body>
</html>
Adding required="required" to the tags can let you make any field compulsory to be filled by user.
You should never use .onclick(), or similar attributes from a userscript.
Userscripts operate in a sandbox, and onclick operates in the target-page scope and cannot see any functions your script creates.
Always use addEventListener() (or an equivalent library function, like jQuery .on()).
So instead of code like:
something.outerHTML += '<input onclick="func()" id="button_id" ...>'
You would use:
something.outerHTML += '<input id="button_id" ...>'
document.getElementById ("button_id").addEventListener ("click", func, false);
And for your answer, one method is to perform a check before actually submitting the forms. Check if the required fields have been filled, if yes, go ahead and submit the form, or else don't submit and show an error message instead.
Please bear with me as I am a beginner when it comes to JavaScript !
I have a dymamic form that pulls information from a database. For each line in the database there is a new row of form fields and the select name incorporates the id from the database - this is all on the same form e.g
<select name="supplier<%=objRst.fields("returnpartid")%>" id="supplier<%=objRst.fields("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">
<select name="STOCKACTION<%=objRst.fields("returnpartid")%>" id="STOCKACTION<%=objRst.fields("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">
<select name="stockreason<%=objRst.fields("returnpartid")%>" id="stockreason<%=objRst.fields("returnpartid")%>">
<select name="creditaction<%=objRst.fields("returnpartid")%>" id="creditaction<%=objRst.fields("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">
<select name="rejectreason<%=objRst.fields("returnpartid")%>" id="rejectreason<%=objRst.fields("returnpartid")%>">
Users are currently missing out data when they are saving the record and I want to prevent this, The save button saves ALL of the records in one go so some lines will be totally blank if they have not yet been processed.
If a user has started to fill in the row but not completed all the information for that record then I need to stop the form submission.
Take a look at Parsley. I use this to validate my login and create user page of my website. Let me know what you think of it!
This is a great javascript tool that utilizes jQuery to validate different forms. Its really nice as you can have it validate several different things such as max and or min text length. It is very easy to implement because all you need to do is add the identifiers to the HTML element.
EDIT:
To avoid a link only answer, here is the code that could be helpful.
<form id="demo-form" data-parsley-validate>
<label for="question">Do you code? *</label>
<p>
<input type="radio" name="question" value="true" required /> Yes
<input type="radio" name="question" value="false" /> No
</p>
<label for="languages">If yes, in which language(s)?</label>
<input type="text" class="form-control" name="languages" data-parsley-conditionalrequired='[" [name=\"question1\"]:checked", "yes"]' data-parsley-validate-if-empty data-parsley-success-class="" data-parsley-conditionalrequired-message="This value is required since you are a programmer!" />
<label for="question">Do you eat dog food? *</label>
<p>
<input type="radio" name="question2" value="yes" required /> Yes
<input type="radio" name="question2" value="no" /> No
</p>
<label for="why">If no, why?</label>
<input type="text" class="form-control" name="why" data-parsley-conditionalrequired='[" [name=\"question2\"]:checked", "no"]' data-parsley-validate-if-empty data-parsley-success-class="" data-parsley-conditionalrequired-message="This value is required since you do not eat dog food!" />
<input type="submit" class="btn btn-default pull-right" />
</form>
<script type="text/javascript">
window.ParsleyConfig = {
validators: {
conditionalrequired: {
fn: function (value, requirements) {
// if requirements[0] value does not meet requirements[1] expectation, field is required
if (requirements[1] == $(requirements[0]).val() && '' == value)
return false;
return true;
},
priority: 32
}
}
};
</script>
<script type="text/javascript" src="../../dist/parsley.js"></script>
EDIT 2:
This is also a simple html file that could do something close to what I think that you want:
<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<input id="test" type="checkbox" id="chk"/>asdfad
<form>
<textarea></textarea>
<button onclick="myFunction()">asd</button>
<form>
<p>If the check box is check the thing is required and if the box is not check then it is not required. So tell your form to only save the rows that have the box checked?</p>
<script>
function myFunction() {
if(document.getElementById("test").checked){
document.getElementsByTagName("textarea")[0].setAttribute("required", "true");
}
else{
document.getElementsByTagName("textarea")[0].removeAttribute("required");
}
}
</script>
</body>
</html>
I have a simple form that I would like to accept data with and store each input as a local storage variable used as a one time setup.
Here is my current JavaScript and HTML form:
<script type="text/javascript">
function accountSetup(form){
localStorage.payDayDate = form.setPayDayDate.value;
localStorage.monthlyTakeHome = form.setMonthlyTakehome.value;
localStorage.monthlySavingsTarget = form.setSavingsTarget.value;
console.log("set up complete again");
}
</script>
I have also tried document.getElementById("setPayDayDate").value(); if you think the syntax is incorrect.
<form>
<label>
Date of pay day:
<input type="text" id="setPayDayDate" placeholder="23" />
</label>
<label>
Monthly takehome:
<input type="text" id="setMonthlyTakehome" placeholder="£800" />
</label>
<label>
Savings target:
<input type="text" id="setSavingsTarget" placeholder="£200" />
</label>
<input type="submit" value="Calculate" onClick="accountSetup(this.form)" />
</form>
I also assume that since I haven't set a method or action that the page will just refresh but the localstorage variables will have been set? I do have divs that are meant to display the newly set variables but they still appear empty after the form submission.
Is there some kind of common practice im missing? Any advice is appreciated, thanks.
Update
There are no messages/errors in the console log
Ok so there were quite a few things wrong with this. My first clues came from this very good youtube video:
https://www.youtube.com/watch?v=BVo3nnloZzw
Using what I learnt there I was able to successfully collect, store and then represent the form data. Here is the updated code:
<script type="text/javascript">
function accountSetup(){
var submittedPayDayDate = document.getElementById("setPayDayDate").value;
var submittedMonthlyTakehome = document.getElementById("setMonthlyTakehome").value;
var submittedSavingsTarget = document.getElementById("setSavingsTarget").value;
window.localStorage.setItem("payDayDate", submittedPayDayDate);
window.localStorage.setItem("monthlyTakehome", submittedMonthlyTakehome);
window.localStorage.setItem("monthlySavingsTarget", submittedSavingsTarget);
return false;
}
</script>
<form method="post" onSubmit="return accountSetup()" data-ajax="false">
<label>
Date of pay day:
<input type="text" id="setPayDayDate" name="setPayDayDate" placeholder="23" />
</label>
<label>
Monthly takehome:
<input type="text" id="setMonthlyTakehome" name="setMonthlyTakehome" placeholder="£800" />
</label>
<label>
Savings target:
<input type="text" id="setSavingsTarget" name="setSavingsTarget" placeholder="£200" />
</label>
<input type="submit" value="Calculate!" />
</form>
To then use the collected data use this line code:
window.localStorage.getItem("varName");
I hope this turns out to be useful for someone.
Use name="setPayDayDate" instead-of/in-addition-to the id="" on your form inputs.
so I have a project now, as an addition to my company's website, we want to show our clients how much they can save on gas by buying one of our electric cars, I'm responsible for making it happen, I don't know how to approach this using javascript, can you guys give me a hand? our marketing guy got the idea from this website, that is basically what we want, but I was hoping i could make it a little better on some aspects:
1st-the client wouldn't have to press submit to see the results, as they fill the last field, the calculated part is populated automatically, for this i've been fiddling with the onChange event, unsuccessfully though xD
here's what I have so far, it is not working, at least on dreamweaver's live mode, haven't tested it online yet as I was hoping to develop the whole thing offline:
<script type="text/javascript">
function calc(){
var km=document.getElementById(km).value;
var euro=document.getElementById(euro).value;
var consumo=document.getElementById(consumo).value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
return fossil_day;
}
</script>
<form name="calc" id="calc" >
<p>
Km/dia
<input type="text" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="text" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="text" onChange="calc()" name="consumo" id="consumo" value="" />
</p>
<input type="button" onClick="calc()" name="submit" id="submit" value="Calcular" />
<script type="text/javascript">
var fossil_day = calc();
document.write('<p>'+fossil_day+'</p>');
</script>
</form>
Please note that although I have this already, I wouldnt mind not doing this at all and using another solution, even if it doesnt use forms, I'm just showing what i have already so you can tell me how I'm wrong and how I can have a better approach at it
there are many errors inside your code
document.getElementById() needs the element id in brackets ''
you can't create a element with the same name,id as a function calc else it will throw an error as it's an object and not a function.
your executing the function onload... but you want it to be executed when the button is clicked & onchange.
you don't need to add value if empty and name if you use getElementById
return false in the function on buttons inside form else it could send the form and so refresh the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<script>
function calc(){
var km=document.getElementById('km').value;
var euro=document.getElementById('euro').value;
var consumo=document.getElementById('consumo').value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
document.getElementById('result').innerHTML=fossil_day;
return false
}
</script>
</head>
<body>
<form>
<p>Km/dia<input type="text" id="km"/></p>
<p>€/Litro<input type="text" id="euro" /></p>
<p>Litros/100km<input type="text" onChange="calc()" id="consumo" /></p>
<input type="button" onClick="calc()" value="Calcular" />
</form>
<div id="result"></div>
</body>
</html>
Useing jQuery (and html5 type="number" form fields):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<p>
Km/dia
<input type="number" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="number" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="number" name="consumo" id="consumo" value="" />
</p>
<div id="fossil-day"></div>
</form>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function calculate(){
var km = $('#km').val();
var euro = $('#euro').val();
var consumo = $('#consumo').val();
var cem_km = consumo*euro;
var fossil_day = (cem_km*km)/100;
$('#fossil-day').html(fossil_day);
}
$(function() {
/*when #consumo input loses focus, as per original question*/
$('#consumo').blur(function(){
calculate();
});
});
</script>
</body>
</html>