Is it possible to have a group of inactive fields where if one of the fields is clicked some of the fields become mandatory and some segments of code are run? Say for example you have three fields which are shown:
<input type="text" id="gov1" name="gov1">
<input type="text" id="parentb" name="parentb">
<input type="checkbox" name="child" id="child">
All three of these fields are initially inactive; but say you click on one of the fields it now makes the rest active and mandatory, and some segment of code is run on the field "parentb" and it is attributed at readonly.
window.onload = function(event)
{
var $input2 = document.getElementById('dec');
var $input1 = document.getElementById('parentb');
$input1.addEventListener('keyup', function()
{
$input2.value = $input1.value;
});
}
I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite new to JavaScript so any sort of help would be great. Is this at all possible using JavaScript? Or is something similar to this possible?
This method you are looking is called 'chained-select' method.
jQuery framework is used for example below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="" method="get">
<label>
<input name="Government" type="checkbox" value="">Government</label>
<br>
<label>
<input name="Parent" type="checkbox" id="parent_child_group" value="">Parent</label>
<br>
<label>Name of Child
<input type="text" name="parent_child" value="" class="parent_child_group"></label>
<br>
<label>Other
<input type="text" name="parent_other" value="" class="parent_child_group"></label>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
enable_cb();
$("#parent_child_group").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.parent_child_group").removeAttr("disabled");
} else {
$("input.parent_child_group").attr("disabled", true);
}
}
});
</script>
</body>
</html>
Working example on JSFiddle: http://jsfiddle.net/farondomenic/fg7p8/1/
Related
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>
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>
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>
I don't really know much Javascript yet, I was hoping somebody could help me understand how to solve my problem:
My HTML form has a checkbox and then a textarea:
<form>
<input type="checkbox" name="detailsgiven" />
<textarea name="details"></textarea>
</form>
I want it so that the textarea gets disabled when the checkbox is ticked so that the user cannot click it and enter text.
I've had a look here and on google, I couldn't find any clear examples of how to do it.
I'm guessing this can be done in Javascript, but I'm feeling a bit out of my depth. Can somebody explain to me how to do this, preferably without using a third party library?
<form>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked)"/>
<textarea name="details" id="tb1"></textarea>
</form>
<script>
function toggleDisabled(_checked) {
document.getElementById('tb1').disabled = _checked ? true : false;
}
</script>
This extremely easy to do with jQuery. Everyone uses jQuery, so should you ;-).
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" />
<textarea name="details" id="details"></textarea>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#detailsgiven").change(function() {
if($(this).is(":checked")) {
$("#details").attr("disabled", "disabled");
}
else {
$("#details").removeAttr("disabled");
}
});
});
</script>
try this:
if ($('input:checkbox').is(':checked')) {
$('textarea').attr('disabled', 'disabled');
}
<form>
<input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" />
<textarea id="t" name="details"></textarea>
</form>
Notice how onclick event of checkbox is used to execute some javascript code.
if you give your html elements ids, you can access the elements in javascripts through getElementById method of javascript DOM (document object model).
And once you have the element, you can set/get it's attributes, do whole lot of things.
According to my understanding to your requirement. At first, textarea is disabled. When detailsgiven checkbox is checked, textarea is enabled and checkbox is disabled so that he cannot changed. Try like this.
<!DOCTYPE html>
<html>
<head>
<script>
function valueChanged()
{
var element1 = document.getElementById("detailsgiven");
var element2 = document.getElementById("details");
if(element1.checked)
{
element2.disabled=false;
element1.disabled="disabled";
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" onchange="valueChanged()"/>
<textarea name="details" id="details" disabled="true"></textarea>
</form>
</body>
</html>
All you have to do is when you mark the checkbox, just add the attribute disabled="disabled" in the textarea.
Checkout the jsfiddle I have added
http://jsfiddle.net/Q9Lg4/
I'm sorry if the title is not too clear but I didn't know how to do it more precise.
I have this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Test</title>
<script type="text/javascript">
function p1() {
document.getElementById('f1').value = 'Isaac';
}
function p2() {
x=document.getElementById('f1');
x.value += ' Newton';
}
</script>
</head>
<body>
<form action="" method="get">
<input type="text" id="f1" name="f1" onChange="p2()">
<input type="text" id="f2" name="f2" onChange="p1()">
<input type="submit" value=">">
</form>
</body>
</html>
I need to show "Isaac Newton" in the f1 field when write something in f2. I only can modify the p1 function. I don't know the name of the p1 functions, even it is changed every time the page is loaded.
Thanks.
Thanks for the answer. The real input fields are like this:
<input type="text" id="tceforms-textfield-4e20ac55d3700" class="formField tceforms-textfield" name="data[tx_oriconvocatorias_publicadas][NEW4e20ac55cdc8f][cnom]_hr" value="" style="width: 460px; " maxlength="255" onchange="typo3form.fieldGet('data[tx_oriconvocatorias_publicadas][NEW4e20ac55cdc8f][cnom]','required,trim,tx_oriconvocatorias_autoLlenar','',1,'');TBE_EDITOR.fieldChanged('tx_oriconvocatorias_publicadas','NEW4e20ac55cdc8f','cnom','data[tx_oriconvocatorias_publicadas][NEW4e20ac55cdc8f][cnom]');">
And I have 10 fields of different types: select, text and textarea.
Is there a way to load this dynamic code, from my onchange function?
I can access the name of the fields so I want to do something like:
function p1() {
code + name.Onchange;
}
It is possible? I don't know the correct syntax.
I also tried with the focus(),click(),select() and blur() methods, but they don't communicate Javascript that a change was made.
The problem is the onChange event does not fire when you do document.getElementById('f1').value = 'Isaac';. So make these following changes and you should be good:
<input type="text" id="f1" name="f1">
<input type="text" id="f2" name="f2" onChange="p1();p2()">
No matters.
I used regEx to load the parameters and call the function p2 from inside the p1 function.
The call looks like this.
function p1(){
//...
typo3form.fieldGet('data['+tconv+']['+idconv+']['+camconv[c]+']','','',1,'');
TBE_EDITOR.fieldChanged(tconv,idconv,camconv[c]);
//...
}
Where tconv, idconv, and camconv are the results of the regEx queries.