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.
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>
Wrote a super basic script to try out addEventListener and it's not working ...
Why?
Here's the code:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function validateMe(){
document.getElementById("button1").addEventListener("click",validateForm);
function validateForm(){
alert("Wheeeeee!");
}
window.addEventListener("load",validateMe);
}
</script>
</head>
<body>
<form name="" id="" action="" onsubmit="return validateMe">
First Name: <input type="input" name="first_name" id="first_name" />
<br /><br />
Last Name: <input type="input" name="last_name" id="last_name" />
<br /><br />
Email Address: <input type="input" name="email" id="email" />
<br /><br />
<input type="submit" value="Validate" id="button1" />
</form>
</body>
</html>
It seems you're trying to add the function from within the function itself. The function will not get executed, therefore it will not be added. Try moving the addEventListener statement outside of the function block. Or, make the function anonymous and declare it inside the addEventListener call.
Edit: I see now it does get executed on submit. But the load phase has already passed so adding it at that point won't do anything.
Remove validateForm(). You have a function within the function which isn't being called anywhere.
function validateMe(){
document.getElementById("button1").addEventListener("click",validateForm);
alert("Wheeeeee!");
window.addEventListener("load",validateMe);
}
Guessing from your case, You may want to use addEventListener() instead of in-line event usage.
You could remove in-line event onsubmit="return validateMe" from the form DOM, then your window.addEventListener("load",validateMe) needs to be called out of its function:
function validateMe(){
document.getElementById("button1").addEventListener("click",validateForm);
function validateForm(){
alert("Wheeeeee!");
}
}
window.addEventListener("load", validateMe);
JSfiddle Demo
I have more than 5 card types and each card as different validation, when user change the card type, the reqpattern will change and i need to pass changed reqpattern in callonkeyup function.
Please tell me how to pass changed reqpattern in callonkeyup function.
callonkeyup(this,'AccountNumber',this.getAttribute('reqpattern'))
<input type="tel" reqpattern="^[0-9]+\$"
onblur="callonkeyup(this,'AccountNumber',this.getAttribute('reqpattern'));"
value="" id="AccountNumber"/>
Why not just pass the req pattern within the function call:
<input type="tel" onblur="callonkeyup(this,'AccountNumber', '^[0-9]+\$');" value="" id="AccountNumber"/>
I am not able to reproduce your issue with your code.
I have tried with the below code snippet, Can you please check it at your hand?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="tel" reqpattern="^[0-9]+\$"
onblur="callonkeyup(this,'AccountNumber',this.getAttribute('reqpattern'));"
value="" id="AccountNumber"/>
<input type="tel" reqpattern="^[a-z]+\$"
onblur="callonkeyup(this,'AccountName',this.getAttribute('reqpattern'));"
value="" id="AccountName"/>
<script>
function callonkeyup(obj,txtType,rpattern)
{
alert(obj);
alert(txtType);
alert(rpattern);
}
</script>
</body>
</html>
Let me know if any concern.
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/
I have a generic JavaScript function which takes one parameter
function foo(val) { ...}
and I want to call the function when submit a form
<form>
<input type="text" id="formValueId"/>
<input type="button" onclick="foo(this.formValueId)"/>
</form>
but the expression foo(this.formValueId) does not work (not surprised, it was a desperate attempt), So the question is, how can I pass a form value to the javascript function.
As I mentioned the javascript is generic and I don't want to manipulate the form inside it!
I could create a helper function in the middle to get the form values with jQuery (for example) and then call the function but I was wondering if I can do it without the helper function.
It might be cleaner to take out your inline click handler and do it like this:
$(document).ready(function() {
$('#button-id').click(function() {
foo($('#formValueId').val());
});
});
Give your inputs names it will make it easier
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" onclick="foo(this.form.valueId.value)"/>
</form>
UPDATE:
If you give your button an id things can be even easier:
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="theButton"/>
</form>
Javascript:
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
button.onclick = function() {
foo(value);
}
Use onclick="foo(document.getElementById('formValueId').value)"
There are several ways to approach this. Personally, I would avoid in-line scripting. Since you've tagged jQuery, let's use that.
HTML:
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="myButton" />
</form>
JavaScript:
$(document).ready(function() {
$('#myButton').click(function() {
foo($('#formValueId').val());
});
});
Well ya you can do that in this way.
<input type="text" name="address" id="address">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<input type="button" onclick="showAddress(address.value)" value="ShowMap"/>
Java Script
function showAddress(address){
alert("This is address :"+address)
}
That is one example for the same. and that will run.
More stable approach:
<form onsubmit="foo($("#formValueId").val());return false;">
<input type="text" id="formValueId"/>
<input type="submit" value="Text on the button"/>
</form>
The return false; is to prevent actual form submit (assuming you want that).